一步一步學習SignalR進行實時通信_4_Hub
標簽（空格分隔）： SignalR
前言
之前我們介紹了SignalR有2級抽象,前2篇文章我們講的是較底層PersistentConnection，從這篇文章開始我們學習下較高一層的Hub。
創建Hub
創建Hub的方法和創建PersistentConnection非常類似
public class EchoHub:Hub
{
//這是Hub
}
public class EchoPersistentConnection:PersistentConnection
{
//這是PersistentConnection
}
配置Hub
學過了PersistentConnection,那么Hub更加不是難事
public void Configuration(IAppBuilder app)
{
// 映射 persistent connections 到/myconnection
app.MapSignalR<MyPersistentConnection>("/myconnection");
// 映射 hubs 默認為"/signalr"
app.MapSignalR();
//映射Hubs到"/realtime",同時還可以配置HubConfiguration,比如我們uxyao跨域,和上一講用法是一致
app.MapSignalR("/realtime", new HubConfiguration());
}
創建Hubs服務
接下來我們進入正題,如何來創建基於Hub的實時通信服務,這里與PersistentConnection有一點差別,前面我們在服務器通過OnReceived()來接受客戶端的服務並進行處理,在Hub中我們可以實現我們自己需要的方法來進行處理信息。
- 新建一個Hub類取名為MyFirstHub
- 默認會生成這樣的代碼,有一個默認的方法,應該能看得出來這個
Hello()方法的功能是發送給有客戶端信息,說的更直白一點是所有連接了此Hub的客戶端即為Clients,服務器會發送請求調用客戶端的hello()方法,類似於PersistentConnection的廣播Broadcast()。
- 創建一個客戶端連接
- 我創建一個html頁面名為Hub,引入jquery和signalr的js
- 在頁面載入的時候連接Hub服務,並調用Hello,向所有客戶端打招呼
詳細代碼
- startup映射
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalR_3_Hubs.Startup))]
namespace SignalR_3_Hubs
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
}
}
- MyFirstHub
using Microsoft.AspNet.SignalR;
namespace SignalR_3_Hubs.Models
{
public class MyFirstHub : Hub
{
public void Hello(string name)
{
Clients.All.hello(name);
}
}
}
- hub.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<ul id="chat"></ul>
<button id ="sayHello">發送</button>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
<script src="/signalr/js"></script>
<script type="text/javascript">
$(function () {
//創建一個hub服務
var hub = $.connection.myFirstHub;
$.connection.hub.start()
.done(function () {
alert("連接成功!");
})
.fail(function () {
alert("連接失敗!");
});
hub.client.hello = function (name) {
$('#chat').append('<li><strong>' + name + '</strong>:Hi!</li>');
}
$("#sayHello").click(function () {
console.log(1);
hub.server.hello("Jack");
console.log(2);
});
});
</script>
</body>
</html>
代碼解析
這3端代碼非常簡短也很簡單,但是有一點特別要注意的是,我們用PersistentConnetcion在startup中配置SignalR映射時
startup中映射的代碼為app.MapSignalR
("/echo");
在html客戶端js代碼中我們是這樣寫的
var connection = $.connection("/echo");
若通過跨域其他客戶端連接則為var connection = $.connection("127.0.0.1：8083/echo");(假設signalR部署在127.0.0.1：8083端口)
這在前面2章我都講到過,Hub與PersistentConnection有所不同,Hub的默認服務是映射在__/signalr/js__或__/signalr/hubs__
因此如果我們默認hub映射代碼為app.MapSignalR();
那么我們需要在html引入<script src="/signalr/js"></script>或者<script src="/signalr/hubs"></script>,否則服務將無法開啟
我改為<script src="/signalr/></script>那么就報了404錯誤並提示你是否引用正確。
如果我將映射改為app.MapSignalR("/realtime");
那么引入的代碼就應該是<script src="/realtime/signalr/js"></script>或者<script src="/realtime/signalr/hubs"></script>
這下應該明白了吧,前面的映射代表的是映射的根目錄。同時你不用奇怪這個路徑,這只是個虛擬路徑,服務開啟后生成的代理(在后面我會講到代理和非代理的使用),可以看到下載下來的腳本資源文件
到此Hub的整個過程應該有些了解了
效果展示
- 進入頁面
- 點擊按鈕觸發
結束語
這里簡單的介紹了下Hub,並通過與PersisentConnection進行了比較。下一節將具體的介紹Hub。