Signalr簡單例子
一、需要引用的
Js:
二、編碼
用的是signalr2,需要新建Startup.cs類,編碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | using Microsoft.Owin; using Owin; using System; using System.Collections.Generic; using System.Linq; using System.Web; [assembly: OwinStartup( typeof (SignalrDemo.Startup))] namespace SignalrDemo { public class Startup { public void Configuration(IAppBuilder app) { app.MapSignalR(); } } } |
後臺還需要羣發消息的ChatHub.cs類,編碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | using Microsoft.AspNet.SignalR; using Microsoft.AspNet.SignalR.Hubs; using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace SignalrDemo.Hubs { [HubName( "chatHub" )] public class ChatHub:Hub { public void AddToRoom( string groupId, string userName) { //將分組Id放到上下文中 Groups.Add(Context.ConnectionId, groupId); //羣發人員進入信息提示 Clients.Group(groupId, new string [0]).addUserIn(groupId,userName); } public void Send( string groupId, string detail, string userName) { //Clients.All.addSomeMessage(detail);//羣發給所有 //發給某一個組 Clients.Group(groupId, new string [0]).addSomeMessage(groupId, detail,userName); } } } |
前端代碼如下:
@{ ViewBag.Title = "Index"; Layout = null; } <p> <span>房間號:</span> <input type="text" id="groupId" /> <span>用戶名:</span> <input type="text" id="userName" /> <button id="joinRoom">加入聊天室</button> </p> <p> <span>消息:</span> <input type="text" id="message" /> <button id="send">發送</button> </p> <div> <ul id="contentMsg"> </ul> </div> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script src="~/Scripts/jquery.signalR-2.0.2.min.js"></script> <script src="~/signalr/hubs"></script> <script type="text/javascript"> $(function () { var chat = $.connection.chatHub; chat.hubName = 'chatHub'; chat.connection.start(); //接收消息 chat.client.addSomeMessage = function (groupId, detail,userName) { console.info("廣播消息:" + detail); $("#contentMsg").append("<li>" + userName+": " + detail + "</li>"); }; //接收加入聊天室消息 chat.client.addUserIn = function (groupId,userName) { $("#contentMsg").append("<li>" + userName + "進入該聊天室!</li>"); }; $.connection.hub.logging = true;//啓動signalr狀態功能 //加入聊天室 $("#joinRoom").click(function () { var groupId = $("#groupId").val(); var userName = $("#userName").val(); chat.server.addToRoom(groupId,userName); }); //發送消息 $("#send").click(function () { var detail = $("#message").val(); var groupId = $("#groupId").val(); var userName = $("#userName").val(); chat.server.send(groupId, detail, userName); }); }); </script>
三、注意的地方。
1.在前端頁面中引用了
<script src="~/signalr/hubs"></script>這個js。這是在項目中找不到,是有signalr自己生成作爲橋接的js。
2.在引用過程中可能會出現一種錯誤。
“未能加載文件或程序集“Newtonsoft.Json, Version=4.5.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed”或它的某一個依賴項。找到的程序集清單定義與程序集引用不匹配。 (異常來自 HRESULT:0x80131040)”
此時可以嘗試下載web.config中加上下面一段:
<runtime>
<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
B:-->
<dependentAssembly>
<assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30AD4FE6B2A6AEED" culture="neutral"/>
<bindingRedirect oldVersion="0.0.0.0-6.0.0.0" newVersion="6.0.0.0"/>
</dependentAssembly>
<!--E-->
</assemblyBinding>
</runtime>