SignalR 实时推送消息

时间:2023-03-09 01:20:56
SignalR 实时推送消息

业务场景

以前做过一个东西,就是当数据库有数据更新的时候,能够自动更新到前台,那时候signalr还没出现的时候,需要自己实现轮询读库,对于数据库和程序都是比较郁闷的事情。现在利用SignalR解决数据传递的实时性。

实现机制

SignalR 的实现机制与 .NET WCF 或 Remoting 是相似的,都是使用远程代理来实现。在具体使用上,有两种不同目的的接口:PersistentConnection 和 Hubs,其中 PersistentConnection 是实现了长时间的 Javascript 轮询(类似于 Comet),Hub 是用来解决实时信息交换问题,它是利用 Javascript 动态载入执行方法实现的。SignalR 将整个连接,信息交换过程封装得非常漂亮,客户端与服务器端全部使用 JSON 来交换数据。

流程

1,在服务器端定义对应的 hub class;

2,在客户端定义 hub class 所对应的 proxy 类;

3,在客户端与服务器端建立连接(connection);

4,然后客户端就可以调用 proxy 对象的方法来调用服务器端的方法,也就是发送 request 给服务器端;

5,服务器端接收到 request 之后,可以针对某个/组客户端或所有客户端(广播)发送消息。

例子

SignalR 实时推送消息

SignalR 实时推送消息

控制台输入 Install-Package Microsoft.AspNet.SignalR -Version 1.1.2

最终会得到:

SignalR 实时推送消息

实现 Hub 服务器端代码

  [HubName("myChatHub")]
public class LetsChat : Hub
{ public void send(string msg)
{
Clients.All.addMessage(msg);
} }

在上面的代码中:

1),HubName 这个特性是为了让客户端知道如何建立与服务器端对应服务的代理对象,如果没有设定该属性,则以服务器端的服务类名字作为 HubName 的缺省值;

2),LetsChat继承自 Hub,从下面 Hub 的接口图可以看出:Hub 支持向发起请求者(Caller),所有客户端(Clients),特定组(Group) 推送消息。

3),public void Send(string clientName, string message) 这个接口是被客户端通过代理对象调用的;

4),Clients 是 Hub 的属性,表示所有链接的客户端页面,它和 Caller 一样是 dynamic,因为要直接对应到 Javascript 对象;

5),Clients.All.addMessage(clientName, message); 表示服务器端调用客户端的 addSomeMessage 方法,这是一个 Javascript 方法,从而给客户端推送消息。

6),总结:这里实现的服务很简单,就是当一个客户端调用 Send 方法向服务器发送 message 后,服务器端负责将该 message 广播给所有的客户端(也可以给特定组或特定客户端,见屏蔽代码),以实现聊天室的功能。

引用 SignalR Javascript

记住的是, <script src="signalr/hubs" type="text/javascript"></script>一定要引用,虽然说文件并不存在.并且这个文件要放在jquery文件和signalR文件后面.

    <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.signalR-1.0.0-rc1.js" type="text/javascript"></script>
<script src="signalr/hubs" type="text/javascript"></script>
<link href="Css/main.css" rel="stylesheet" type="text/css" />
         $(function () {
var IWannaChat = $.connection.myChatHub;
var count = 0;
$("#test").click(function () { IWannaChat.server.send("shshshshs");
}); //这个主要是接收后台处理的结果,然后打印到前台来
IWannaChat.client.addMessage = function (message) {
if (message.contains("|")) {
var result = message.split('|');
var fileFlag = result[0];
var filePrograss = result[1]; $('#myPrograss' + fileFlag).html('<table><tr><th style="width:' + filePrograss * 200 + 'px;background-color:green;"></th><th style="line-height:10px;background-color:white;border:none;">' + parseInt(filePrograss * 100) + '%</th></tr></table>');
if (filePrograss != 1)
$('#myState' + fileFlag).html('In Prograss');
else
$('#myState' + fileFlag).html('Done');
}
else {
$("#log").append("<li>" + message + "</li>");
}
}; //开启(长轮训的方式)
$.connection.hub.start();
}); String.prototype.contains = function (strInput) {
return this.indexOf(strInput) != -1;
}
SignalR 实时推送消息