signalr的神奇、實(shí)用很早就知道，但一直都沒(méi)有親自去試用，僅停留在文章，看了幾篇簡(jiǎn)單的介紹文字，感覺(jué)還是很簡(jiǎn)單易用的。

由于最后有個(gè)項(xiàng)目需要使用到它，所以就決定寫(xiě)個(gè)小程序測(cè)試一下，實(shí)踐出真知；別人寫(xiě)的文章，由于環(huán)境（版本等）不同，還是或多或少存在一些出入的。

環(huán)境：vs2013 / asp.net mvc 5 / signalr 2.2.1 / jquery 1.10.2

先上兩個(gè)效果圖：

系統(tǒng)會(huì)自動(dòng)給加入聊天室的人員分配一個(gè)ID，是該人員的唯一標(biāo)識(shí)（綠色為當(dāng)前用戶(hù)說(shuō)的話(huà)，橙色為當(dāng)前用戶(hù)之外的人員說(shuō)的話(huà)，對(duì)于不同窗口，當(dāng)前用戶(hù)指示的主體是不一樣的哦，別弄繞了。。。）

下面來(lái)粗略敘述一下開(kāi)發(fā)步驟：

1、安裝signalr

建議使用nuget安裝，能省不少事，網(wǎng)上也有全手工配置的。

2、修改startup.cs文件

開(kāi)始的時(shí)候，我漏了這一步，發(fā)現(xiàn)始終生成不了/signalr/hubs，瀏覽器提示/signalr/hubs 400找不到

3、創(chuàng)建Hub

nuget安裝了signalr之后，會(huì)有相應(yīng)的signal分類(lèi)

命名為ChatHub，也可以創(chuàng)建一個(gè)普通類(lèi)，繼承Microsoft.AspNet.SignalR.Hub即可。

簡(jiǎn)單的編寫(xiě)一個(gè)Send方法（請(qǐng)注意紅框的兩個(gè)方法名）

4、調(diào)用

頁(yè)面需要引用三個(gè)主要腳本：

signalr是依賴(lài)于jquery的，所以這三個(gè)腳本引用有嚴(yán)格的先后順序，如圖，不可調(diào)換順序。

以下為頁(yè)面內(nèi)容（請(qǐng)注意紅框中的幾個(gè)地方）：

chatHub：這是創(chuàng)建的ChatHub類(lèi)，生成在/signalr/hubs下面的名稱(chēng)（默認(rèn)為類(lèi)名首字母小寫(xiě)）

用戶(hù)也可以自己定義

這樣hub名稱(chēng)就變成了設(shè)置的ChatHub（原來(lái)首字母小寫(xiě)，現(xiàn)在變成大寫(xiě)的了）

chat.client.receiveMessage：此處的receiveMessage，就是定義在ChatHub類(lèi)，Send方法下的Clients.All.receiveMessage，原來(lái)看一些文檔，此處的寫(xiě)法是chat.receiveMessage，但試下來(lái)沒(méi)有效果，查看了/signalr/hubs腳本后，看到有client的定義，這塊應(yīng)該是由于signalr版本不同造成的，大家使用時(shí)要注意。

chat.server.send：此處的send，就是定義在ChatHub類(lèi)下的Send方法，同樣可能是對(duì)于以前版本的signalr，使用方法是chat.send，大家注意就是了。

5、結(jié)束

到這為止，一個(gè)簡(jiǎn)單的開(kāi)發(fā)流程結(jié)束。打開(kāi)兩個(gè)或兩個(gè)以上窗口，就可以發(fā)消息聊天了，試試吧

樣式純粹是自己瞎倒騰，寫(xiě)的不規(guī)范也亂七八糟，所以就不詳細(xì)貼出擾亂視聽(tīng)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論