asp.net mvc signalr簡單聊天室制作過程分析
signalr的神奇、實用很早就知道,但一直都沒有親自去試用,僅停留在文章,看了幾篇簡單的介紹文字,感覺還是很簡單易用的。
由于最后有個項目需要使用到它,所以就決定寫個小程序測試一下,實踐出真知;別人寫的文章,由于環(huán)境(版本等)不同,還是或多或少存在一些出入的。
環(huán)境:vs2013 / asp.net mvc 5 / signalr 2.2.1 / jquery 1.10.2
先上兩個效果圖:
系統(tǒng)會自動給加入聊天室的人員分配一個ID,是該人員的唯一標識(綠色為當(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的,所以這三個腳本引用有嚴格的先后順序,如圖,不可調(diào)換順序。
以下為頁面內(nèi)容(請注意紅框中的幾個地方):
chatHub:這是創(chuàng)建的ChatHub類,生成在/signalr/hubs下面的名稱(默認為類名首字母小寫)
用戶也可以自己定義
這樣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ī)范也亂七八糟,所以就不詳細貼出擾亂視聽。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
form身份驗證通過后,只能用FormsAuthentication.RedirectFromLoginPage
form身份驗證通過后,只能用FormsAuthentication.RedirectFromLoginPage2009-03-03Asp.net移除Server,X-Powered-By和X-AspNet-Version頭
這篇文章主要介紹了Asp.net移除Server,?X-Powered-By,?和X-AspNet-Version頭,移除X-AspNet-Version很簡單,只需要在Web.config中增加相應(yīng)配置節(jié),感興趣的朋友一起看看吧2024-02-02asp.net GridView導(dǎo)出到Excel代碼
asp.net GridView導(dǎo)出到Excel代碼,需要的朋友可以參考下。2009-07-07Json數(shù)據(jù)轉(zhuǎn)換list對象實現(xiàn)思路及代碼
本文為大家詳細介紹下Json數(shù)據(jù)轉(zhuǎn)換list對象的具體實現(xiàn),感興趣的朋友可以參考下哈,希望對你有所幫助2013-04-04VS2017 Cordova Ionic2 移動開發(fā)環(huán)境搭建教程
這篇文章主要為大家詳細介紹了VS2017 Cordova Ionic2 移動開發(fā)環(huán)境搭建教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04WPF使用代碼創(chuàng)建數(shù)據(jù)模板DataTemplate
本文詳細講解了WPF使用代碼創(chuàng)建數(shù)據(jù)模板DataTemplate的方法,文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-02-02Entity?Framework使用Code?First的實體繼承模式
本文詳細講解了Entity?Framework使用Code?First的實體繼承模式,文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03