SignalR实现网页实时聊天功能

SignalR是利用html5 sokit方式实现网页的实时性,在客户端不支持html5的情况下通过轮询实现

实现原理是客户端发送的消息先去服务器，然后服务器根据需要将消息广播到需要接收信息的客户群。

添加对应的包 nuget:install-package Microsoft.AspNet.SignalR.nuget会帮忙处理将需要的包都添加到项目中。nuget以后会看到项目多出一些引用：Microsoft.Owin，Microsoft.AspNet.SignalR等。多出一个script文件夹，文件夹里有SignalR依赖的jquery包以及SignalR.js

到这一步准备工作就做好了。

分析一下：这个组件本身实现的是一个网页实时聊天，刚刚也说了是客户端先将消息发送到服务端，服务端处理然后再广播到需要接收消息的客户端。

这么说的话，必然会有一个接收客户端消息的服务端程序存在。这一点跟Ajax非常类似，客户端发送消息，给服务端，然后服务端返回数据更新部分页面。然而SignalR不只可以在web中使用也可在winform程序中使用（文档中有说明）。那要在web中使用SignalR就必然要告诉程序SigalR不同于一般的后台程序，它不是一个普通的dll

我用mvc空模板做的例子，在执行完Global.asax中的内容会直接执行这里边的内容。我的理解里这就是实现那所谓的接口跟SignalR扯上关系了。

---------------------这一步非常关键。不能省略，

然后加一个控制器，加个视图。  加上一个SignalR的控制中心

解释一下代码

$(function () {}文档加载完毕以后，执行以下内容：

$.connection.testhub;连接到testhub控制中心（跟实现了hub类的类名相对应，如有必要可在类前加描述[HubName("控制名称")]，在客户端就应该使用：$.connection.控制名称）

$.connection.hub.logging;查看调试信息，firebug中切换到控制器就能看到每一步执行的状态。

chart.client.addNewMessageToPage = function (message) {
            $("#message").append(message + "<br/>");
        }

实现服务端定义的客户端方法接口这里对应的是sendmessage中addNewMessageToPage方法，可以传递一个参数。。

chart.client.del同上。

$.connection.hub.start().done(function () {
            chart.state.username = "test";//客户端给服务端发送需要的变量
            chart.server.joinGroup("ClientGroup");//将客户添加到组  这里可以是从数据库查询得到的数据
            $("#btnok").click(function () {
                chart.server.sendmessage($("#input").val());
            });
            $("#btndel").click(function () {
                chart.server.clearmessage();
            });
        });

这里边就是成功连接到控制中心以后需要执行的一些东西。 chart.state.username = "test";定义变量

然后就是调用下服务端的方法：chart.server.joinGroup("ClientGroup");//将本客户端添加到组ClientGroup

$("#btnok").click(function () {
                chart.server.sendmessage($("#input").val());
            });

单击事件：调用服务端方法，

服务端只做一件事情（接收客户端发送的消息），然后根据需要把消息广播（添加一个客户端方法接口，具体怎么实现实在客户端做）

客户端：实现服务端定义好的接口。然后在需要的时候给服务端发送消息..

然后补充一点：每个客户端在连接到控制中心的时候会生成一个随机的userid.所以想要实现两个用户的网页聊天，需要将两个人所有客户端的连接加到同一个组里面进行消息广播。这样就可以实现消息的同步，可以同时手机上，ipad上，以及电脑上同时实现消息的广播，具体实现提示： chart.state.username = "test";//客户端给服务端发送需要的变量。。