基于SignalR的小型IM系统

这个IM系统真是太轻量级了，提供的功能如下：

1.聊天内容美化

2.用户上下线提示

3.心跳包检测机制

4.加入用户可群聊

下面来一步一步的讲解具体的制作方法。

开篇准备工作

首先，巧妇难为无米之炊，这是总所周知的。这里我们需要两个东西，一个是Asp.net MVC4项目；另一个是Signalr组件。

新建一个Asp.net MVC4项目，然后通过以下命令安装Signalr组件：

这样我们就将组件安装完毕了。

后台交互部分

接着在项目中，新建一个文件夹名称为Hubs，在这个文件夹下面新建一个名称为IChatHub的接口，定义如下：

其中，SendChat方法主要用户Signalr后端向前台发送数据；SendLogin方法主要用于通知用户上线；SendLogoff方法主要用于通知用户下线；而TriggerHeartbeat方法主要用于接收前端发送的心跳包并做处理，以便于判断用户是否断开连接（有时候用户直接关闭浏览器或者在任务管理器中关闭浏览器，是无法检测用户离线与否的，所以这里引入了心跳包机制，一旦用户在20秒之后未发送任何心跳包到后端，则视为掉线）。

接下来添加一个ChatHub的类，具体实现如下：

这个类的设计思想有如下几个部分：

首先，所有用户的登陆信息，我持久化到了缓存集合中：IList<UserChat>,这个缓存集合的定义如下：

这样，用户登陆信息就会保存到内存中，一旦有新用户进来或者是旧用户退出，我就可以通过新增条目或者删除条目来维护这个列表，维护完毕，将这个列表推到前端。这样前台用户就能实时看到，哪些用户上线，哪些用户下线了。

其次，心跳包检测机制部分，前端用户每隔5秒钟会发送一次心跳包到处理中心，处理中心收到心跳包，会将实体类的计数器置为0；也就是说，如果用户登陆正常，那么用户实体中的计数器每隔5秒钟自动置为0；但是如果用户不按正常渠道退出（直接关闭浏览器或者在任务管理器中关闭浏览器），那么用户实体中的计数器就会一直递增，直到加到第20秒，然后会抛出事件，提示当前用户已经断开连接。

用户实体设计如下：

当用户意外退出，会有一个action事件抛出，我们在SendLogin方法中进行了接收，当这个事件抛出，就会立马触发用户的Logoff事件，通知掉线：

这就是处理中心的所有内容了。

需要注意的是，在ChatHub类中，SendChat方法，TriggerHeartbeat方法，SendLogin方法，SendLogoff方法都是Singnalr处理对象所拥有的方法，而addNewMessageToPage方法，loginUser方法，logoffUser方法则是其回调方法。也就是说，当你在前台通过SendChat方法向处理中心发送数据的时候，你可以注册addNewMessageToPage方法来接收处理中心返回给你的数据。





前端逻辑及布局

在如上代码中：

第49行，加载一个富文本编辑器

第51行，添加对自动生成的proxy的引用

第56行~第68行，注册回调方法，以便于更新前台UI

第73行，打开处理中心hub

第79行，发送用户上线信息

第94行，每隔5秒钟发送一次心跳包

如此而已，非常简便。

运行截图

打开界面，首先提示输入用户昵称：





输入完毕之后，用户上线：





后续两个用户加入进来：





用户聊天内容记录：





用户“浅浅的”正常退出：





用户“书韵妍香”非正常退出：