MVC中使用SignalR打造酷炫实用的即时通讯功能附源码

前言，现在这世道写篇帖子没个前言真不好意思发出来。本贴的主要内容来自于本人在之前项目中所开发的一个小功能，用于OA中的即时通讯。由于当时走的太急，忘记把代码拿出来。想想这已经是大半年前的事情了，时间过了这么久，在当时最新的SignalR2.0.1到现在已经变成了2.2。昨天晚上特地熬了个夜，重新又把它写出来做了一个小小的Demo。当然我只是大自然的搬运工，这个SignalR即时通讯功能里面有一些前端的类库不是我自己写的。我只是改吧改吧~~在此鸣谢 @贤心，是他的几条库才使得我的这个功能如此酷炫。前言猝！

最终效果演示

没个GIF的演示我会拿出来秀？

看上去是不是感觉还可以？ 那下面我讲解一下开发步骤。

创建MVC项目

首先我们打开VS2015（当然其它的版本也可以。我只是赶了个时髦，有天心血来潮就给安装了），再依次点击[文件]-[新建]-[项目]后弹出如下界面：

我们选择get='_blank'>ASP.NET Web应用程序，并且将项目名称完善好，选择好项目保存路径。再点击确定：

这里为了让等会的操作更加简单我直接选择了一个ASP.NET 4.5的 Empty 模板。并把下方的“为以下项目添加文件夹和核心引用”选择MVC。再点击确定：

好了到这里风云突变狂风大作…一个活生生拥有着MVC核心引用和文件夹的项目已经展现在眼前。下面我们就往项目中加入等会要使用到的SignalR。

为MVC项目在NuGet中引用SignalR

这里用到了NuGet，网上也有很多资源讲解怎么使用这个。我这里只大概讲解一下。首先打开[工具]-[NuGet 程序包管理器]-[管理解决方案的 NuGet 程序包]

接下来在出现的界面中将程序包源改成：联机，然后搜索SignalR。接下来自行解决~.~

使用SignalR

由于此时的项目还是一个Empty的项目，需要通过Startup类来配置OWIN程序，所以要在项目中加入一个OWIN Startup类

创建好之后，再在Configuration函数中加入app.MapSignalR();

好了下面，我们再为SignalR创建一个集线器Hubs，我的习惯是在项目中创建一个Hubs目录，然后把需要创建的HubClass放到里面。下面先在项目中创建一个Hubs目录，再在目录上单击右键选择[添加]-[新建项]选择[SignalR 集线器类]

点击确定，再把新建的HubClass中的Hello函数干掉。然后在类上增加一个特性：[HubName("systemHub")]。既然是要聊天那么自然离不开用户，为了方便管理我建立了一个用户的实体类UserDetail

 1  /// <summary> 2 /// 用户细节 3 /// </summary> 4 public class UserDetail 5  { 6 /// <summary> 7 /// 连接ID 8 /// </summary> 9 public string ConnectionId { get; set; }10 /// <summary>11 /// 用户ID12 /// </summary>13 public string UserID { get; set; }14 /// <summary>15 /// 用户名16 /// </summary>17 public string UserName { get; set; }18 /// <summary>19 /// 用户部门20 /// </summary>21 public string DeptName { get; set; }22 /// <summary>23 /// 登录时间24 /// </summary>25 public DateTime LoginTime { get; set; }26 }

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：MVC中使用SignalR打造酷炫实用的即时通讯功能附源码

关键词：mvc