ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程。实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据。
官网:http://signalr.net/
下载:install-package Microsoft.AspNet.SignalR
本节将简单快速介绍
- 如果浏览器<=Internet Explorer 8,用长轮询的方式
- 如果配置中指定了使用jsonp,则会使用长轮询的方式
- 如何需要创建跨域连接,将会如使用WebSocket,如果一下条件满足的话(否则用长轮询)
- 客户端支持WebSocket
- 服务端支持WebSocket
- 客户端支持Cross-Origin Resource Sharing
基于SignalR(SR)的实现原理,所以SR在客户端浏览器IE8以上基本都是完全兼容的。可以说完全支持jQuery 1.6.4的浏览器就能支持SignalR。
创建空的Asp.Net项目
安装
install-package Microsoft.AspNet.SignalR
install-package bootstrap
添加一个集线器类
public class ChatHub : Hub { public void Send(string name, string message) { // Call the broadcastMessage method to update clients. Clients.All.broadcastMessage(name, message); } }
添加一个OWIN Startup类
[assembly: OwinStartup(typeof(SignalRChart.Startup))] namespace SignalRChart { public class Startup { public void Configuration(IAppBuilder app) { // 有关如何配置应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkID=316888 app.MapSignalR(); } } }
添加一个index.html
1.导入js
<!--Script references. --> <!--Reference the jQuery library. --> <script src="Scripts/jquery-1.9.1.min.js"></script> <!--Reference the SignalR library. --> <script src="Scripts/jquery.signalR-2.2.0.min.js"></script> <!--Reference the autogenerated SignalR hub script. --> <script src="signalr/hubs"></script>
2.hub
// Declare a proxy to reference the hub. var chat = $.connection.chatHub; // Call the Send method on the hub. chat.server.send(name, message); // Create a function that the hub can call to broadcast messages. chat.client.broadcastMessage = function (name, message) { }
Hub代码
Client代码
1.发送给所有客户端
Clients.All.onMsg
2.发送给单一客户端
Clients.Client(_clientID).onMsg
3.发送给其他客户端
Clients.AllExcept(_clientID).onMsg
Clients.Ohther.onMsg
4.发送给当前客户端
Clients.Caller.onMsg
In ASP.NET MVC 4 you can do the following:
<script src="~/signalr/hubs"></script>
If you're writing an ASP.NET MVC 3 application, make sure that you are using Url.Content for your script references:
<script src="@Url.Content("~/signalr/hubs")"></script>
Chat.cshtml頁面代碼:
@{
ViewBag.Title = "Chat";
}
<h2>Chat</h2>
<div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<div id="discussion" style="overflow: auto; width: 400px; height: 200px; border: 1px solid #999; ">
</div>
</div>
@section scripts {
<!--Script references. -->
<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.0.3.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
<!--SignalR script to update the chat page and send messages.-->
<script>
$(function () {
// Reference the auto-generated proxy for the hub.
var chat = $.connection.chatHub;
// Create a function that the hub can call back to display messages.
chat.client.addNewMessageToPage = function (name, message) {
// Add the message to the page.
var div = document.getElementById('discussion');
div.innerHTML = div.innerHTML + '<li><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>';
div.scrollTop = div.scrollHeight;
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(prompt('Enter your name:', ''));
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
// This optional function html-encodes messages for display in the page.
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
}