前言
交流群:195866844
先說一下我為什么會寫這個博客吧,(首先說一下,我是一個小菜鳥,講的不好請指導 - -,)
前段時間公司的項目涉及到在B/S上使用即時通訊,(其實就是做一個B/S的客服系統),當時公司很多大牛都說比較難搞,涉及到很多東西.
按照我的知識體系..因為之前做過C/S的即時通訊,基於Socket的..很麻煩 - -,很多坑,所以我也說..有點復雜,所以這個功能就被擱置下來了
加上項目上線各種忙就忘記了這個事,現在項目進入后期測試階段就抽出了時間想這個問題,問了大神,說是可以使用SignalR 技術實現.
當然,我是直接沒聽過這個技術,所以去查了很多資料,給我的感覺就是這個SignalR 實在是太方便了.
這里我們就不詳細的講SignalR 到底怎么實現和他的機制了,我們只拿來用,有興趣的可以自己去看這兩篇文章.
http://blog.darkthread.net/post-2013-12-03-inside-signalr-transport.aspx
http://blog.jobbole.com/82746/
知道了技術,剩下的就是實現功能,經過查資料發現,很多關於SignalR 的博客和資料都使用的1.XXX版本 現在SignalR最新的是2.幾的版本,發現1.0和2.0版本的用法差距還是很大的.
所以想寫個系列的博客來講解一下.
廢話不多說了 - -,我們開始.
使用環境
開發工具:VS2013 旗艦版
數據庫:未用
操作系統:WIN7旗艦版
項目創建
首先
第一步:我們創建一個ASP.NET Web的空項目,命名為SignalRTest如下圖:
第二步:我們右鍵項目,添加一個SignalR集線器(V2)新建項,如下圖:
添加這個之后我們來看看項目文件夾,會出現這些東西:
藍色框中為我們所要用到的SignalR集線器類,紅色的框為我們要用到的JS庫(注意:在添加SignalR集線器之后會自動添加Script這個文件夾)
第三步:添加OWIN StartUp類 (注:這里是和1.0版本區別之一,1.0版本不用加這個,需要注冊路由路徑即可)
如下圖:
這樣,我們就算基本完成SignalR的創建了,下面我們看代碼
首先我們來看看SignalR類中的代碼:
1 public class MoveTextHub : Hub 2 { 3 public void Hello() 4 { 5 Clients.All.hello(); 6 } 7 8 }
繼承自HUB類,我們可以跳轉到其中看,值得注意的是這個SignalR是開源的,有興趣的可以在GitHub上下載源碼研究研究,或者自己擴展.
下面我們來看看OWIN StartUp代碼
using System; using System.Threading.Tasks; using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(SignalRTest.MyStartup))] namespace SignalRTest { public class MyStartup { public void Configuration(IAppBuilder app) { // 有關如何配置應用程序的詳細信息，請訪問 http://go.microsoft.com/fwlink/?LinkID=316888 } } }
里面什么都沒有,只幫你實現了一個空的方法,當然..這些都不重要...
下面我們看看改過后的代碼.
SignalR的代碼:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using Microsoft.AspNet.SignalR; using Microsoft.AspNet.SignalR.Hubs; namespace SignalRTest { //Hub的別名,方便前台調用 [HubName("getMessage")] public class MoveTextHub : Hub { //自動產生的方法 public void Hello() { Clients.All.hello(); } //編寫發送信息的方法 public void SendMessage(string message) { //調用所有客戶注冊的本地的JS方法(broadcastMessage) Clients.All.broadcastMessage(message + DateTime.Now.ToString()); } } }
OWIN StartUp代碼
using System; using System.Threading.Tasks; using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(SignalRTest.MyStartup))] namespace SignalRTest { public class MyStartup { public void Configuration(IAppBuilder app) { // 有關如何配置應用程序的詳細信息，請訪問 http://go.microsoft.com/fwlink/?LinkID=316888 //注冊管道,使用默認的虛擬地址,根目錄下的"/signalr",當然你也可以自己定義 app.MapSignalR(); } } }
至此,我們的后台代碼就暫時完成了..
下面我們來看看前端的JS代碼:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="Scripts/jquery-1.10.2.min.js"></script> <script src="Scripts/jquery.signalR-2.0.0.min.js"></script> <!--這里要注意,這是虛擬目錄,也就是你在OWIN Startup中注冊的地址--> <script src="signalr/hubs"></script> <script> $(function () { $(function () { // 聲明一個代理引用該集線器,記得$.connection.后面的方法首字母必須要小寫,這也是我為什么使用別名的原因 var chat = $.connection.getMessage; // 這里是注冊集線器調用的方法,和1.0不同的是需要chat.client后注冊,1.0則不需要 chat.client.broadcastMessage = function (name) { // HTML編碼的顯示名稱和消息。 var encodedMsg = $('<div />').text(name).html(); // 將消息添加到該頁。 $('#messsagebox').append('<li>'+ encodedMsg + '</li>'); }; // 獲取用戶名稱。 $('#username').html(prompt('請輸入您的名稱:', '')); // 設置初始焦點到消息輸入框。 $('#message').focus(); // 啟動連接,這里和1.0也有區別 $.connection.hub.start().done(function () { $('#send').click(function () { var message = $('#username').html() + ":" + $('#message').val() // 這里是調用服務器的方法,同樣,首字母小寫 chat.server.sendMessage(message); // 清空輸入框的文字並給焦點. $('#message').val('').focus(); }); }); }); }); </script> </head> <body> <div> <div >名稱:<p id="username"></p></div> <div style="border-color:red;border:double"> <ul id="messsagebox"> <li>聊天窗口</li> <li></li> </ul> </div> <input type="text" value="asdasd" id="message" /> <button id="send">發送</button> </div> </body> </html>
至此我們就完成了最基本的通過集線器消息群發.效果如下:
謝謝大家支持,我會堅持把這個系列寫完,寫的不好希望大家多多包含,請大神指導..
源碼下載地址:http://pan.baidu.com/s/1qWBlRp6