[筆記] SignalR 2 搭配 AngularJS 1 Controller as 範例

  • 253
  • 0
  • 2016-08-11

筆記一下用 AngularJS 並使用 Controller as 的方式,透過 SignalR 2 做出的聊天室範例

緣起

上一篇,小喵初體驗了 SignalR 2 的撰寫,預設的方式是搭配著jQuery 的方式,由於最近在使用 AngularJS 1 所以就搜尋一下,看看是否有相關的範例可以參考,小喵找了幾篇,大部分都是以Controller 搭配 $Scope 的方式,但小喵之前已經習慣用 Controller as的方式來撰寫,於是動手來寫寫看,是否可以把其他人的範例,改成使用 Controller as的撰寫模式。

參考

小喵主要是參考以下這一篇的為範本,並進行改寫。

http://www.dispatchertimer.com/signalr/signalr-tutorial-a-simple-chat-application-using-signalr-and-angularjs/

 

起式

開始的部分,小喵的前一篇大致相似,所以而參考得那篇範例也講得很清楚,所以請大家直接參考小喵的上一篇【[筆記] SignalR 2 初體驗 處理無【OWIN啟動類別(OWIN startup class)】問題】以及這次參考的範本【A Simple Chat Application using SignalR and AngularJS】。

其中,如果您跟小喵一樣是使用VB.NET,一樣 OWIN啟動類別 的部分要使用基本的類別自己改寫,上一篇有特別說明過,這篇就不再贅訴。

Server端部分

SignalR Hub 類別:ChatHub

Imports Microsoft.AspNet.SignalR

Public Class ChatHub
    Inherits Hub

    Public Sub SendMessage(ByVal name As String, ByVal message As String)
        Clients.All.broadcastMessage(name, message)
    End Sub
End Class

OWIN啟動類別:ChatStartUp

Imports Microsoft.VisualBasic
Imports Microsoft.Owin
Imports Owin

<Assembly: OwinStartup(GetType(SignalRChart.ChatStartUp))>
Namespace SignalRChart
    Public Class ChatStartUp
        Public Sub Configuration(ByVal app As IAppBuilder)
            app.MapSignalR()
        End Sub
    End Class
End Namespace

Client端

這部分是這篇文章的重點,我們直接看範例程式:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    {{1+2}}
    <hr />

    <div ng-controller="DemoController as Demo">
        Name : <input type="text" ng-model="Demo.name" /><br />
        Message : <input type="text" ng-model="Demo.message" /> <br />
        <input type="button" value="Send" ng-click="Demo.newMessage()" />
        <div>
            <ul>
                <li ng-repeat="chat in Demo.messages">
                    <span ng-bind="chat"></span>
                </li>
            </ul>
        </div>

    </div>




    <script src="../Scripts/jquery-1.10.2.js"></script>
    <script src="../Scripts/jquery.signalR-2.1.2.js"></script>
    <script src="/signalr/hubs"></script>

    <script src="../Scripts/angular.js"></script>
    <script>

        var app = angular.module('myApp', []);
        //由於還是利用jQuery的部分,所以需要加上【$scope】
        app.controller('DemoController', function ($scope) {

            //屬性宣告
            var self = this;
            self.name = '';     //討論者名稱
            self.message = '';  //要送出的訊息內容
            self.messages = [];     //全部訊息的集合

            
            $scope.chatHub = null;  //聊天室Hub宣告
            $scope.chatHub = $.connection.chatHub;  //初始化聊天室Hub
            $.connection.hub.start();   //開始聊天室的Hub

            //註冊SignalR Client 廣播時的 function (注意broadcastMessage涵式第一個字母要小寫)
            $scope.chatHub.client.broadcastMessage = function (name, message) {
                var newMessage = name + ':' + message;

                self.messages.push(newMessage);

                //主要還是這個,因為主要還是用angularjs以外,jQuery的signalr相關程式庫
                //所以還需要【$scope.$apply()】來回應變化
                $scope.$apply();
            }

            //註冊送出訊息的涵式
            self.newMessage = function () {
                //把姓名、訊息傳送到Server上
                $scope.chatHub.server.sendMessage(self.name, self.message);
                //輸入的訊息屬性,恢復成為為空字串
                self.message = '';
            }
        });
    </script>


</body>
</html>

測試執行畫面

執行測試的畫面,小喵用 Microsoft 的 IE 與 Google 的 Chrome來進行測試一下

末記

小喵特把這次的過程筆記一下,提供有需要的人參考,也提供自己未來參考

^_^

 

 

 

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6)