您的位置：首页 > 编程语言 > ASP

Asp.NET MVC3 使用 SignalR 实现推

2015-07-26 12:16 711 查看



一，简单介绍

Signal 是微软支持的一个执行在 Dot NET 平台上的 html websocket 框架。

它出现的主要目的是实现server主动推送（Push）消息到client页面，这样client就不必又一次发送请求或使用轮询技术来获取消息。


二，实现机制

SignalR 的实现机制与 .NET WCF 或 Remoting 是相似的，都是使用远程代理来实现。

在详细使用上，有两种不同目的的接口：PersistentConnection 和 Hubs，当中
PersistentConnection 是实现了长时间的 Javascript 轮询（类似于 Comet），Hub 是用来解决实时信息交换问题。它是利用 Javascript 动态加载运行方法实现的。SignalR 将整个连接，信息交换过程封装得很美丽，client与server端所有使用 JSON 来交换数据。


三，实现 Hub server端代码

向project中新建 SignalR 文件夹，在当中加入 ChatHub.cs 文件。内容例如以下：

namespace SignalTutorial.SignalR
{
[HubName("chat")]
public class Chat : Hub
{
public void Send(string clientName, string message)
{
//var toSelfinfo = "You had sent message " + message;
//Caller.addSomeMessage(clientName, toSelfinfo);

// Call the addMessage method on all clients
Clients.addSomeMessage(clientName, message);
//Clients[Context.ConnectionId].addSomeMessage(clientName, data);
}
}
}


1），HubName 这个特性是为了让client知道怎样建立与server端相应服务的代理对象，假设没有设定该属性，则以server端的服务类名字作为 HubName 的缺省值；

2），Chat 继承自 Hub。从以下 Hub 的接口图能够看出：Hub 支持向发起请求者（Caller）。全部client(Clients)，特定组（Group) 推送消息。

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

4）。Clients 是 Hub 的属性，表示全部链接的client页面，它和 Caller 一样是 dynamic。由于要直接相应到 Javascript 对象。

5），Clients.addSomeMessage(clientName, message); 表示server端调用client的 addSomeMessage 方法，这是一个 Javascript 方法，从而给client推送消息。

6），总结：这里实现的服务非常easy，就是当一个client调用 Send 方法向server发送 message 后。server端负责将该 message 广播给全部的client（也能够给特定组或特定client。见屏蔽代码），以实现聊天室的功能。


四，实现 Hub client代码

<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.6.4.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.signalR-0.5.3.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>
</head>


注意：signalR 依赖于 jquery。所以 signalR 必须放在 jquery 之后。而 hubs 又必须放在 signalR 之后。

然后在 body 部分增加 HubChat Tab：

@model dynamic

@{
ViewBag.Title = "title";
}

<script src="@Url.Content("~/Scripts/hubDemo.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
});
</script>

<h2>Hub Chat</h2>

<div>
<input type="text" id="Placeholder" value="@ViewBag.ClientName" hidden="true"/>
<input type="text" id="msg" />
<input type="button" id="broadcast" value="广播" />

<br />
<br />

<h3>
消息记录： (你是：<span id="MyClientName">@ViewBag.ClientName</span>):
</h3>

<ul id="messages">
</ul>
</div>


向 Scripts 文件夹加入新的 Javescript 脚本：hubDemo.js。其内容例如以下：

$(function () {

var myClientName = $('#Placeholder').val();

// Proxy created on the fly
var chat = $.connection.chat;

// Declare a function on the chat hub so the server can invoke it
chat.addSomeMessage = function (clientName, message) {
writeEvent('<b>' + clientName + '</b> 对大家说: ' + message, 'event-message');
};

$("#broadcast").click(function () {
// Call the chat method on the server
chat.send(myClientName, $('#msg').val())
.done(function () {
console.log('Sent message success!');
})
.fail(function (e) {
console.warn(e);
});
});

// Start the connection
$.connection.hub.start();

//A function to write events to the page
function writeEvent(eventLog, logClass) {
var now = new Date();
var nowStr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
$('#messages').prepend('<li class="' + logClass + '"><b>' + nowStr + '</b> ' + eventLog + '.</li>');
}
});


我已经执行过一次。能够正常执行。


Persistent Connection部分，下节再介绍。大家假设发现什什么问题。它可以指向。谢谢。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航