最近在做asp.net mvc项目的时候需要做一个即时通讯的功能，类似于QQ群，登录用户都能发言，这是一个我第一次接触的东西，经过查百度以及大佬的指点知道了SignalR的存在，经过一番折腾终于实现了这个功能。
效果图
因为项目尚未发布到服务器，所以我用两个不同的浏览器模拟不同的用户登录，可能字体方面有点差异。
实现环境和工具
- VS2017
- Asp.Net mvc框架
- SignalR 1.2.2(不同的版本使用可能会有差异！)
安装SignalR
打开程序包管理器控制台，输入以下安装命令
|
1 |
Install-Package Microsoft.AspNet.SignalR |
当SignalR安装好之后你会发现你的项目多了一个Scripts的文件夹，不要改动它的名称！
找到你项目的packages文件夹下的Microsoft.AspNet.SignalR.1.2.2文件夹，点开里面的readme.txt，有如下内容
|
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
Please see http://go.microsoft.com/fwlink/?LinkId=272764 for more information on using SignalR. Mapping the Hubs connection ---------------------------- SignalR Hubs will not work without a Hub route being configured. To register the default Hubs route, call RouteTable.Routes.MapHubs() in your application's Application_Start method, e.g.: using System; using System.Web; using System.Web.Routing; namespace MyWebApplication { public class Global : System.Web.HttpApplication { public void Application_Start() { // Register the default hubs route: ~/signalr RouteTable.Routes.MapHubs(); } } } Why does ~/signalr/hubs return 404 or Why do I get a JavaScript error: 'myhub is undefined'? -------------------------------------------------------------------------------------------- This issue is generally due to a missing or invalid script reference to the auto-generated Hub JavaScript proxy at '~/signalr/hubs'. Please make sure that the Hub route is registered before any other routes in your application. In ASP.NET MVC 4 you can do the following: <script src="~/signalr/hubs"></script> If you're writing an ASP.NET MVC 3 application, make sure that you are using Url.Content for your script references: <script src="@Url.Content("~/signalr/hubs")"></script> If you're writing a regular ASP.NET application use ResolveClientUrl for your script references or register them via the ScriptManager using a app root relative path (starting with a '~/'): <script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script> If the above still doesn't work, you may have an issue with routing and extensionless URLs. To fix this, ensure you have the latest patches installed for IIS and ASP.NET. |
在你项目的Global.asax文件里面的Application_Start()方法里第一条加上
|
1 |
RouteTable.Routes.MapHubs(); |
代码
在项目中创建一个signalr文件夹，里面写集线器方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
using Microsoft.AspNet.SignalR; using Microsoft.AspNet.SignalR.Hubs; using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace TC.AO.Web.signalr { [HubName("test")] public class MyHub:Hub { public void GetMess(string content,string name) { Clients.All.Ccc(content,name); } } } |
新建的类要继承Hub，并且要在类的上面打上集线器标记，名称可以随便取，在页面上的时候会用到。
页面上要记得引入以下三个文件，顺序已经固定不能改变！
|
1 2 3 |
<script src="/js/jquery.min.js"></script> <script src="/Scripts/jquery.signalR-1.2.2.min.js"></script> <script src="/signalr/hubs"></script> |
|
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 28 29 30 31 32 33 34 35 |
<script> function getNowFormatDate() {//获取当前时间 var date = new Date(); var seperator1 = "-"; var seperator2 = ":"; var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds(); return currentdate; } $(function () { var name = $('.font-bold').text(); //创建出集线器hub var myHub = $.connection["test"]; //注册客户端方法 myHub.client.ccc = function (msg, names) { if (names != name) { $("<div class='left'><div class='author-name'>" + names + "<small class='chat-date'>" + getNowFormatDate() + "</small></div><div class='chat-message active'>" + msg + "</div></div>").appendTo($('.content')); } else { $("<div class='right'><div class='author-name'>" + names + "<small class='chat-date'>" + getNowFormatDate() + "</small></div><div class='chat-message'>" + msg + "</div></div>").appendTo($('.content')); } } //启动hub $.connection.hub.start().done(function () { $('#fs').click(function () { //调用服务器的方法 myHub.server.getMess($('#neiron').val(), name); $('#neiron').val(""); }) }) }) </script> |
创建集线器的时候要记得页面上的首字母要小写！
if (names != name) 是为了聊天样式，跟集线器没有任何关系。
评论