筆記一下用 AngularJS 並使用 Controller as 的方式,透過 SignalR 2 做出的聊天室範例
緣起
上一篇,小喵初體驗了 SignalR 2 的撰寫,預設的方式是搭配著jQuery 的方式,由於最近在使用 AngularJS 1 所以就搜尋一下,看看是否有相關的範例可以參考,小喵找了幾篇,大部分都是以Controller 搭配 $Scope 的方式,但小喵之前已經習慣用 Controller as的方式來撰寫,於是動手來寫寫看,是否可以把其他人的範例,改成使用 Controller as的撰寫模式。
參考
小喵主要是參考以下這一篇的為範本,並進行改寫。
起式
開始的部分,小喵的前一篇大致相似,所以而參考得那篇範例也講得很清楚,所以請大家直接參考小喵的上一篇【[筆記] 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來進行測試一下
末記
小喵特把這次的過程筆記一下,提供有需要的人參考,也提供自己未來參考
^_^
以下是簽名:
- 歡迎轉貼本站的文章,不過請在貼文主旨上加上【轉貼】,並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】,感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫,如果您需要C#的Code,也許您可以試著用線上的工具進行轉換,這裡提供幾個參考
Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |