前言

瀏覽器訪問(wèn)網(wǎng)頁(yè)通過(guò)的是 HTTP 協(xié)議，瀏覽器發(fā)送一個(gè)請(qǐng)求，服務(wù)器返回一個(gè)結(jié)果。服務(wù)器是被動(dòng)接收請(qǐng)求，如果想反過(guò)來(lái)，服務(wù)器主動(dòng)發(fā)送信息給瀏覽器咋辦呢？

有很多解決方法，比如輪循（瀏覽器定時(shí)去向服務(wù)器詢問(wèn)是否有新數(shù)據(jù)）、WebSocket（HTML 5）……

而 SignalR 就是把這些技術(shù)綜合在一起，它自動(dòng)識(shí)別當(dāng)前瀏覽器支持哪些方式，然后選擇最優(yōu)的方式。我們開(kāi)發(fā)時(shí)不必去關(guān)注這些細(xì)節(jié)，SignalR 會(huì)幫我們實(shí)現(xiàn)，而且 SignalR 是微軟開(kāi)發(fā)的，好用是一貫風(fēng)格。

環(huán)境

.NET 4.5 及以上，低了不行。

如果 Visual Studio 版本太低，沒(méi)有 SignalR，則按下面的步驟添加：

Visual Studio 的菜單“工具 -> 庫(kù)程序包管理器 -> 管理解決方案的 NuGet 程序包（打開(kāi)解決方案之后才有）”，在彈出對(duì)話框中搜索“SignalR”。

我用的 Visual Studio 2013 是不需要手工添加 SignalR 的，本身就自帶。

實(shí)戰(zhàn)

打開(kāi) Visual Studio（我的版本是 2013），建立一個(gè) ASP.NET 項(xiàng)目。

第一步、添加一個(gè)“SignalR 永久連接類”

如下圖：

添加后，我們可以發(fā)現(xiàn) Visual Studio 還自動(dòng)為我們添加了一些引用，還有 Scripts 文件夾（里面包含 jquery.signalR-2.0.0.js）。這個(gè)類初始的代碼如下：

public class MyConnection1 : PersistentConnection
{
 protected override Task OnConnected(IRequest request, string connectionId)
 {
 return Connection.Send(connectionId, "Welcome!");
 }

 protected override Task OnReceived(IRequest request, string connectionId, string data)
 {
 return Connection.Broadcast(data);
 }
}

第二步、添加“OWIN Startup 類”

然后添加點(diǎn)代碼：

public class Startup1
{
 public void Configuration(IAppBuilder app)
 {
 // 有關(guān)如何配置應(yīng)用程序的詳細(xì)信息，請(qǐng)?jiān)L問(wèn) http://go.microsoft.com/fwlink/?LinkID=316888
 app.MapSignalR<MyConnection1>("/myPath"); // myPath 是我們隨便寫的。
 }
}

MyConnection1 就是第一步創(chuàng)建的類名。

第三步、添加一個(gè)“Web 窗體 ”

<textarea id="info" cols="60" rows="10"></textarea>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
<script type="text/javascript">
<!--
 var conn = $.connection("/myPath");

 conn.start().done(function (data) {
  $("#info").append("連接成功，connectionId 為： " + data.id + "\r\n");
 });

 conn.received(function (data) {
  $("#info").append("收到數(shù)據(jù)： " + data + "\r\n");
 });
//-->
</script>

運(yùn)行效果如下：

擴(kuò)展一下

MyConnection1：

方法 OnConnected：創(chuàng)建了連接時(shí)。

方法 OnReceived：收到了客戶端提交的數(shù)據(jù)時(shí)，參數(shù) data 就是它所收到的數(shù)據(jù)。

方法 OnDisconnected：斷開(kāi)了連接時(shí)。上面沒(méi)有用它。

方法 OnReconnected：重新連接了時(shí)。上面沒(méi)有用它。

……
MyConnection1 的 Connection 屬性：

方法 Send：向?yàn)g覽器發(fā)送數(shù)據(jù)，第一個(gè)參數(shù)為 connectionId（字符串類型），第二個(gè)參數(shù)為要發(fā)送的數(shù)據(jù)。

方法 Broadcast：向所有瀏覽器（準(zhǔn)確地說(shuō)應(yīng)該是所有連接）發(fā)送數(shù)據(jù)。

JS：

1. var conn = $.connection("/myPath"); 創(chuàng)建連接對(duì)象。
2. conn.start().done() start() 是開(kāi)始連接，done() 連接成功后要執(zhí)行的代碼。
3. conn.received() 是收到服務(wù)器發(fā)送來(lái)的數(shù)據(jù)要執(zhí)行的。
4. conn.send() 是向服務(wù)器發(fā)送數(shù)據(jù)。上面沒(méi)有用它。
   

下面看一個(gè)更全點(diǎn)的代碼：

上面不是說(shuō)有些方法沒(méi)有用到?jīng)]，下面的例子更全一點(diǎn)：

MyConnection1：

protected override Task OnConnected(IRequest request, string connectionId)
{
 return Connection.Send(connectionId, "Welcome!");
}

protected override Task OnReceived(IRequest request, string connectionId, string data)
{
 Connection.Send(connectionId, "我收到了：" + data);
 return Connection.Broadcast("全體注意：我收到了客戶端的數(shù)據(jù)。");
}

Web 窗體的代碼：

<textarea id="info" cols="60" rows="10"></textarea>
要發(fā)送到服務(wù)器的消息：<input type="text" id="msg" size="20" />
<input type="button" value="發(fā)送消息" onclick="javascript: conn.send($('#msg').val());" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
<script type="text/javascript">
<!--
 var conn = $.connection("/myPath");

 conn.start().done(function (data) {
  $("#info").append("連接成功，connectionId 為： " + data.id + "\r\n");
 });

 conn.received(function (data) {
  $("#info").append("收到數(shù)據(jù)： " + data + "\r\n");
 });
//-->
</script>

到目前為止，大家可能都提不起興趣，服務(wù)器主動(dòng)發(fā)送數(shù)據(jù)在哪里？？？

我們現(xiàn)在做一個(gè)定時(shí)程序，服務(wù)器定時(shí)向?yàn)g覽器發(fā)送數(shù)據(jù)。

新建 Global.asax（全局應(yīng)用程序類）（并不是說(shuō)這些代碼只能在 Global.asax 中運(yùn)行，我們只是為了測(cè)試定時(shí)執(zhí)行，才放在這里的）。

添加如下代碼：

protected void Application_Start(object sender, EventArgs e)
{
 Timer timer = new Timer(5000);
 timer.Elapsed += timer_Elapsed;
 timer.Start();
}

void timer_Elapsed(object sender, ElapsedEventArgs e)
{
 var context = GlobalHost.ConnectionManager.GetConnectionContext<MyConnection1>();
 context.Connection.Broadcast("我在 " + DateTime.Now.ToString() + " 主動(dòng)向?yàn)g覽器發(fā)送數(shù)據(jù)。");
}

效果如下：

以上代碼，我們用的是 context.Connection.Broadcast，如果是針對(duì)某一連接發(fā)送，則用 Send 方法，這就需要 connectionId，不過(guò)要選擇哪個(gè) connectionId 都是業(yè)務(wù)層面的事，不是問(wèn)題。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

最新評(píng)論