Asp.net MVC信号做实时网络聊天示例代码

本章与大家分享的内容是利用Signal R框架创建一个简单的群聊功能，主要讲解如何在的MVC中使用这个框架。Net。由于这个项目有官方文档(当然都是英文的)，所以没有计划以后再写分享文章，主要目的是让朋友在需要使用Web进行实时交流时有更多的解决方案。毕竟这是微软推广的解决方案之一。

信号员在线简介

ASP。NET signalr是一个面向ASP.NET开发者的库，可以简化向应用程序添加实时Web功能的过程。实时Web功能是指服务器代码可以在内容可用时立即将内容推送到连接的客户端，而不是让服务器等待客户端请求新数据的功能。

当然，Signaler还提供了一个非常简单易用的高级API，使得服务器可以单独或批量调用客户端上的JavaScript函数，使得连接管理变得非常方便，比如客户端与服务器的连接或断开，客户端的分组，客户端的授权，使用Signaler都非常容易实现。

SignalR将与客户端的实时通信带到了ASP .NET中，当然这种方式使用起来很简单，可扩展性也足够。过去，用户需要刷新页面或使用Ajax轮询来实时显示数据。现在，它可以简单地通过使用信号来实现。最重要的是，您可以与现有的ASP无缝地使用SignalR。NET项目，而无需重新创建项目。

群聊示例效果

我们先来看看测试用例的效果，效果图：

界面很简单，这里不考虑风格，主要是展示它的用法。这里涉及的功能有：

1.统计在线人数

2.显示在线人员的昵称和连接模式(这个测试用例支持网络套接字和长轮询)

3.群聊信息

如何在MVC中使用SignalR

首先，我们通常创建MVC Web项目，然后通过Nuget控制台命令：install-package Microsoft添加SignalR的依赖项。自动添加的包如下：

包id='Microsoft。AspNet . SignalR '版本=' 2 . 2 . 2 ' TargetFrameWork=' net 45 '/包id='Microsoft。AspNet . SignalR.Core '版本=' 2 . 2 . 2 ' target framework=' net 45 '/包id='Microsoft。AspNet . SignalR.JS '版本=' 2 . 2 . 2 ' target framework=' net 45 '/Package id=' Microsoft。aspnet . signor . system web ' version=' 2 . 2 . 2 ' target framework=' net 45 '/并自动将相关js文件添加到MVC项目中的Script文件夹：

jquery . Signar-2 . 2 . 2 . min . js

jquery . Signar-2 . 2 . 2 . js

然后，我们需要在项目的一级目录中创建一个名为Startup.cs的类，里面的主要内容无法完成：

[assembly: OwinStartup(类型of(Stage。Api.Extend.Startup))]命名空间阶段。API . Extend { public class Startup { public void Configuration(IAppBuilder app){ app }。mapsignor('/chat '，新微软。AspNet . signor . hub configuration { EnableDetailedErrors=true，enablejavascript proxy=true })；}}}首先我们从上到下分析注意点：

1.owinStartup (type)构造函数传递一个类型，这个类型对应我们创建的启动类，它通过这个构造函数类来标记起始位置；

2.命名空间阶段。Api.Extend是我的项目的命名空间，可以随便定义；

3.公共空间配置(IAPP建设者应用程序)功能是固定的和必要的。这里，程序会先进入这个方法执行里面的逻辑代码；

4.app。MapSignalR是一种扩展的IAppBuilder接口方法，有多种表现形式。这里我选择公共静态IAPP生成器映射信号(这个IAPP生成器生成器，字符串路径，集线器配置)；这里有点类似于MVC的路由。这里主要关注的是这个Path参数，需要在前端页面使用；

在这里，后台所需的配置实际上已经完成。下面是需要操作的业务逻辑处理类。创建一个新的类(我这里命名为ChatHub)并继承Hub(由SignalR框架提供)，然后里面的逻辑代码如下：

公共类ChatHub : Hub {//public int Num=10001；公共静态ListMoHubUser _ Users=new ListMoHubUser()；///summary////添加聊天人/////summary//param name=' user '/param public void add user(mohub user user){ user . id=context . connectionid；if(！_用户。任何(b=b.Id==用户。Id)) { _Users。添加(用户)；}//客户端。All.newUser(用户)；客户。all . user list(_ user)；}///summary///send information/////summary//param name=' user '/param///param name=' message '/param public void sendall(mohub user user，string message) {clients。全部。addnewmessagetopic(用户，消息)；}///summary////如果聊天退出，通知所有在线的人重新加载聊天号码////summary///param name=' stop called '/param////returns/returns public override System。线程化. tasks . task on connected(bool stop called){ var user=_ user。SingleOrDefault(x=x . Id==Context。ConnectionId)；if(用户！=null) { _Users。移除(用户)；客户。all . user list(_ user)；}返回基地。on disconnected(stop called)；}}以上三种方法分别完成：在List中添加聊天人，向客户端发送信息，连接失败后通知各有效聊天人重新加载信息；这里值得注意的是通过重新公开覆盖系统来捕获并移除无效连接(这里是聊天人的信息)。穿线。任务。已断开连接的上的任务(已调用bool stop整个测试用例通过上下文保证了连接的唯一性。ConnectionId只要有新的链接请求，服务器就会为这个链接分配一个唯一的字符串。当客户端关闭页面或关闭链接时，可以在OnDisconnected方法中捕获这个无效链接的ConnectionId，从而满足删除无效聊天人的要求。为了代码的方便，这里创建了一个聊天信息类：

公共类MoHubUser {公共字符串Id { get设置；}公共字符串昵称{ get设置；}公共字符串TransportMethod { get设置；}}后台的聊天室代码到此结束。就这么简单；让我们看看如何在尝试中编写代码。这里我将首先给出我的html布局代码：

@{ ViewBag .Title='神牛聊天室-信号员；}样式类型='text/css ' .div _ left {宽度： 70%；向左浮动：} .div _ right { width : 28%；向左浮动：} .ul {列表式：无；border: 1px固体# ccc高度： 500像素；溢出-y:滚动；颜色：黑色；} .ul Li {填料-top : 5px；填充-右侧： 25px} .ul _ user {列表样式：无；} .ul _ user Li { padding-top : 5px；} .发送{相对位置：背景技术# EAE 7e 7 border-radius : 5px；/* 圆角*/padding-top : 4px；左衬垫左： 5px保证金-top : 13px；} .发送。箭头{位置：绝对值；top :-16px；font-size : 0；border:固体8pxborder-color : # fff # fff # EAE 7e 7 # fff；}/style H3 @ viewpag .标题在线人数：span id='sapnUserTotal'0/span人/h3div class=' container text-left ' div class=' div _ left ' ul class=' ul ' id=' discussion '/ul text area row=' 5 ' class=' form-control ' id=' message ' maxlength=' 500 ' placeholder='开始聊天。style=' max-width : 100% '/textarebr/input type=' button ' id=' send message ' value='发送class=' BTN BTN-默认'/输入类型='隐藏' id='显示名称'/div class=' div _ right ' ul id=' users ' class=' ul _ user '/ul/div/div script src=' http : ~/Scripts/jquery。二号先生。2 .2 .量滴js '/script @ * script src=' http 3360 ~/chat/hubs '/script * @客户端这里写法大致有两种选择，一种直接使用生成的代理来操作，一种不用自动生成的代理采用手动创建代理的方式；为了内容的简洁性，这里只简单讲解下自动生成的代理方式，而更多的是分享手动创建代理链接的方式；

使用生成的代理获取链接

首先，我们需要通过脚本标签来引用一下自动生成代理的路径：脚本src=' http : ~/chat/hubs '/脚本，注意啦这里的路径/聊天对应的就是咋们在前面Startup.cs文件中配置应用程序.mapsignor('/chat '路径，而后面/集线器固定的写法（至少目前我还没更多的试验过),只有先应用了这个~/聊天/枢纽，才能在后面使用生成的代理，先上段代码：

var chat=$ . connection . ChatHubChat。客户。new USer=function(USer){ $(' # USers ').追加(“listrong”用户。昵称为"["的用户运输方式']/strong/Li ')；};chat.client.userList=function(用户){ console.log(用户);$('#sapnUserTotal ').html(用户。长度)；$.每个（用户，函数(一，项){ $(' #用户').追加(' li[项TransportMethod '] strong项。昵称/strong('项. id ')/Li ')；});};聊天。客户。addnewmessagetopage=function(用户，消息){ console.log(用户);$(' #讨论').追加(“li spanstrong”用户。昵称为"["的用户传输方法']/strong:/span div class=' send ' message div class=' arrow '/div/div/Li ')；};//连接。集线器。start({ transport :[' WebSockets '，' longPolling'] }).done(function () { //my).传输方法=连接。集线器。运输。姓名；//聊天。服务器。add user(my)；//$('#sendmessage ').点击(function () { ////console.log(聊天);//var内容=$。修剪($('#message ').val())；//if(内容。长度=0){ $(' # message ').val(" ")。焦点();返回；} //chat.server.sendAll(my，content)；//$('#message ').val(" ")。焦点();//});//}).失败(函数(){ //alert(')链接聊天室失败，请重新刷新页面。');//});咋们逐步来解析下代码注意点：

1.var chat=$ .connection.chatHub这里的chatHub对应的就是咋们创建的并继承中心的ChatHub类，由于射流研究…变量开头都是小写，所以这里是chatHub，这句活就表示链接到咋们后端了ChatHub类了，然后就可以使用里面的方法啦（这种有点类似于早期的webform中某种创建交互式、快速动态网页应用的网页开发技术请求的写法)

2.通过chat.client.xxx来接收服务端通知的消息，而这个xxx对应的方法名称和咋们后端的客户所有人，本章实例对应的是：chat.client.userList=function(用户){}对应客户所有人。用户列表(_ user)；这样后端就能直接通知客户端的对应方法了；注意这里我后端客户。全部用的是通知全部客户端的意思，如果您需要通知指定的链接需要用到的是：T客户端（字符串连接标识);方法

3.聊天客户端是后端调用客户端，那相对的chat.server就是客户端请求服务端，和上面一样通过chat.server.xxx来指定请求的服务端方法，注意这个时候服务端方法指的是继承类中心的子类的公共方法（本篇对应的是：chat.server.sendAll(我的，内容)对应ChatHub.cs文件中的公共void SendAll(MohuBusuer用户，字符串消息)函数)

4 .连接。集线器。开始({ transport :[' WebSockets '，' longPolling'] })来指定运行的交互协议

以上就是使用生成代理的方式，按照上面的注意点来写应该不是问题；

使用手动创建反向代理来链接

不采用生成的代码的方式，我们只需要修改前端就行了，后台代码不用变或设置不用变动；首先我们把上面说的脚本引用自动代理的代码去掉，因为这个时候不需要了，我们还是先上代码：

var my={昵称： '神牛001 '，transport method : ' ' }；定义变量连接=$。集线器连接('/chat/hub ')；var chat=连接。createhubsproxy(' ChatHub ')；chat.on('用户列表'，函数（用户){ console.log(用户);$('#sapnUserTotal ').html(用户。长度)；$(“# user”).html(" ")；$.每个（用户，函数(一，项){ $(' #用户').追加(' li[项TransportMethod '] strong项。昵称/strong('项. id ')/Li ')；});});chat.on('addNewMessageToPage '，函数（用户，消息){ console.log(用户);$(' #讨论').追加(“li spanstrong”用户。昵称为"["的用户传输方法']/strong:/span div class=' send ' message div class=' arrow '/div/div/Li ')；var div=文档。getelementbyid('讨论')；//div。滚动顶部=div。滚动高度；div . scrollTop=999999 })；定义变量昵称=提示('请输入一个昵称：',我的。昵称);我的。昵称=昵称。长度0?昵称：我的.昵称；$('#displayname ').val(昵称);$('#message ').焦点();连接。start({ transport :[' WebSockets '，' longPolling'] }).done(function () { my .传输方法=连接。运输。姓名；//console.log(my .运输方法)；chat.invoke('addUser '，my)；$('#sendmessage ').单击(function () { var content=$).修剪($('#message ').val())；if(内容。长度=0){ $(' # message ').val(" ")。焦点();返回；} chat.invoke('sendAll '，my，content)；$('#message ').val(" ")。焦点();});});同样列出如下注意点：

1.var连接=$。集线器连接('/chat/hub ')；创建链接，这里的小路同样对应后端的应用程序.mapsignor('/chat '，路径保持一致

2.var聊天=连接。createhubsproxy(' ChatHub ')；来创建反向代理链接，这里的名称：chatHub对应的是后端的ChatHub类名称

3.通过on('xxx '，function(){})函数来绑定服务端通知客户端的事件，xxx对应客户所有人中的xxx

4 .连接。开始({ transport :[' WebSockets '，' longPolling'] })来设置允许的链接方式，并开始链接

5.connection.transport.name来获取链接的方式名称，默认开始不设置的话有这么几种：网络套接字、帧、服务器事件、长轮询

6.chat.invoke('xxx '，param1，param2)通过引起来映射继承类中心的类的公共方法，这里实例对应的是：chat.invoke('sendAll '，我的，内容)对应公共void SendAll(MohuBusuer用户，字符串消息)

写在最后

在这里，如果满足以上注意点，那么基本SignalR就可以成功链接使用了。注意点很多，但都是总结经验。希望对大家的学习有帮助，支持我们。