步驟1:安裝SignalR.Client
端套件
步驟2: 呼叫Server 端的/Scripts/jquery.signalR-2.2.0.js
jquery.signalR-2.2.0.js和signalr /hubs
<script src="scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://192.168.1.63/signalr/Scripts/jquery.signalR-2.2.0.js"></script>
<script type="text/javascript" src="http://192.168.1.63/signalr/signalr/hubs"></script>
<link href="Content/Chat.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/angular.min.js"></script>
|
注意需事先架設Server
端的ChatHub 並放置IIS上，才能透過手持裝置呼叫Server端的ChatHub ，如不懂ChatHub的朋友們請看Angular 搭配 SignalR的文章 有詳細說明
|
步驟3: 在server端的SignalrR 設定允許JSONP
[assembly: OwinStartup(typeof(singalR2.Startup))]
namespace singalR2
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// Any connection or hub wire up and configuration should go here
app.MapSignalR(new HubConfiguration{ EnableJSONP=true});
}
}
}
|
步驟4: Client 端的呼叫Server端的ChatHub的方式
<script type="text/javascript">
var app = angular.module("chatModel", []);
app.controller("chatController", function ($scope) {
$scope.allMessage =
[]; //初始化
$.connection.hub.url = "http://192.168.1.63/signalr/signalr";
var proxy = $.connection.chatHub;
$scope.name = prompt("請輸入您的名字","");
$.connection.hub.start({ jsonp: true }).done(function () {
$scope.send = function () {
proxy.server.send($scope.name, $scope.message); //廣播給全部的人
};
});
proxy.client.addNewMessageToPage = function (name, message) {
$scope.allMessage.push({
"name": name,
"message": message,
"time": new Date()
});
$scope.$apply(); //更新畫面
};
});
</script>
|
實驗結果，透過codova將程式成功部署到手持裝置(Android)上，ios目前沒有實機測試過，透過SignalR可以讓手持裝置直接發送訊息給大家(包括桌機的瀏覽器)，讓我們Web的工程師可以開發出更多互動式的APP喔。
參考文獻:
