asp.net mvc signalr簡單聊天室制作過程分析
signalr的神奇、實(shí)用很早就知道,但一直都沒有親自去試用,僅停留在文章,看了幾篇簡單的介紹文字,感覺還是很簡單易用的。
由于最后有個項(xiàng)目需要使用到它,所以就決定寫個小程序測試一下,實(shí)踐出真知;別人寫的文章,由于環(huán)境(版本等)不同,還是或多或少存在一些出入的。
環(huán)境:vs2013 / asp.net mvc 5 / signalr 2.2.1 / jquery 1.10.2
先上兩個效果圖:


系統(tǒng)會自動給加入聊天室的人員分配一個ID,是該人員的唯一標(biāo)識(綠色為當(dāng)前用戶說的話,橙色為當(dāng)前用戶之外的人員說的話,對于不同窗口,當(dāng)前用戶指示的主體是不一樣的哦,別弄繞了。。。)
下面來粗略敘述一下開發(fā)步驟:
1、安裝signalr
建議使用nuget安裝,能省不少事,網(wǎng)上也有全手工配置的。

2、修改startup.cs文件

開始的時候,我漏了這一步,發(fā)現(xiàn)始終生成不了/signalr/hubs,瀏覽器提示/signalr/hubs 400找不到
3、創(chuàng)建Hub
nuget安裝了signalr之后,會有相應(yīng)的signal分類

命名為ChatHub,也可以創(chuàng)建一個普通類,繼承Microsoft.AspNet.SignalR.Hub即可。
簡單的編寫一個Send方法(請注意紅框的兩個方法名)

4、調(diào)用
頁面需要引用三個主要腳本:

signalr是依賴于jquery的,所以這三個腳本引用有嚴(yán)格的先后順序,如圖,不可調(diào)換順序。
以下為頁面內(nèi)容(請注意紅框中的幾個地方):

chatHub:這是創(chuàng)建的ChatHub類,生成在/signalr/hubs下面的名稱(默認(rèn)為類名首字母小寫)

用戶也可以自己定義

這樣hub名稱就變成了設(shè)置的ChatHub(原來首字母小寫,現(xiàn)在變成大寫的了)

chat.client.receiveMessage:此處的receiveMessage,就是定義在ChatHub類,Send方法下的Clients.All.receiveMessage,原來看一些文檔,此處的寫法是chat.receiveMessage,但試下來沒有效果,查看了/signalr/hubs腳本后,看到有client的定義,這塊應(yīng)該是由于signalr版本不同造成的,大家使用時要注意。
chat.server.send:此處的send,就是定義在ChatHub類下的Send方法,同樣可能是對于以前版本的signalr,使用方法是chat.send,大家注意就是了。
5、結(jié)束
到這為止,一個簡單的開發(fā)流程結(jié)束。打開兩個或兩個以上窗口,就可以發(fā)消息聊天了,試試吧
樣式純粹是自己瞎倒騰,寫的不規(guī)范也亂七八糟,所以就不詳細(xì)貼出擾亂視聽。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
CheckBoxList兩列并排編譯為表格顯示具體實(shí)現(xiàn)
CheckBoxList兩列并排的顯示效果相比大家都有見到過吧,下面是具體的實(shí)現(xiàn)代碼,感興趣的朋友可以參考下哈2013-05-05
點(diǎn)擊提交按鈕后DropDownList的值變?yōu)槟J(rèn)值實(shí)現(xiàn)分析
在點(diǎn)擊提交按鈕后,頁面上所有的綁定到數(shù)據(jù)庫的控件值都恢復(fù)到默認(rèn)值,下面與大家分享下DropDownList的值變?yōu)槟J(rèn)值2013-05-05
Windows虛擬主機(jī)與VPS如何實(shí)現(xiàn)301重定向(asp.net)
301重定向應(yīng)該是研究SEO必須掌握的技術(shù)。如果你是剛接觸SEO的菜鳥,想了解什么是301重定向,請看《html實(shí)現(xiàn)301重定向的方法》一文,我在該篇隨筆中引用了Google網(wǎng)站站長工具對301重定向的解釋2011-12-12
.NET Core使用HttpClient進(jìn)行表單提交時遇到的問題
這篇文章主要介紹了.NET Core使用HttpClient進(jìn)行表單提交時遇到的問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
ASP.NET網(wǎng)站使用Kindeditor富文本編輯器配置步驟
首先下載編輯器然后部署編輯器最后在網(wǎng)頁中加入(ValidateRequest="false")引入腳本文件,具體配置步驟如下,有需求的朋友可以了解下哈2013-06-06
.NET微信開發(fā)之PC 端微信掃碼注冊和登錄功能實(shí)現(xiàn)
這篇文章主要介紹了.NET微信開發(fā)之PC 端微信掃碼注冊和登錄功能實(shí)現(xiàn)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09
asp.net中Fine Uploader文件上傳組件使用介紹
最近在處理后臺數(shù)據(jù)時需要實(shí)現(xiàn)文件上傳.考慮到對瀏覽器適配上采用Fine Uploader. Fine Uploader 采用ajax方式實(shí)現(xiàn)對文件上傳.同時在瀏覽器中直接支持文件拖拽[對瀏覽器版本有要求類似IE版本必須是9或是更高的IE10].2013-01-01

