SignalR 是一个合一的客户端与劳动器库,基于浏览器的客户端和根据 ASP.NET
的服务器组件可以借助它来开展双向多步对话。
换句话说,该对话可不受限制地举办单个无状态请求/响应数据沟通;它将持续,直到明确关闭。
对话通过永久连接举行,允许客户端向服务器发送多个新闻,并同意服务器做出相应回复,值得注意的是,还允许服务器向客户端发送异步新闻。它和AJax类似,都是依据现有的技艺。本身是一个复合体。一般景观下,SignalR会使用Javascript的长轮询(
long
polling),落成客户端和服务端通讯。在WebSockets出现未来,SignalR也扶助WebSockets通讯。当然SignalR也采用了服务端的任务并行处理技术以增强服务器的增添性。它的对象总体
.NET Framework 平台,它也不限 Hosting
的应用程序,而且如故跨平台的开源项目,援救Mono 2.10+,觉得它变成是 Web
API 的另一种实作选用,可是它在服务端处理一起的职能上比 ASP.NET MVC 的
Web API 要强多了,更首要的是,它可以在 Web Form 上行使。

SignalR 内的客户端库 (.NET/JavaScript)
提供了自行管理的能力,开发人士只须要一贯运用 SignalR 的 Client Library
即可,同时它的 JavaScript 库可和 jQuery 完美结合,因而能间接与像 jQuery
或 Knockout.js 一起行使。

SignalR内部有两类对象:

· Persistent Connection(HTTP持久链接):持久性连接,用来化解长日子总是的能力,而且还是可以由客户端主动向服务器需要数据,而服务器端也不要求达成太多细节,只须求处理
PersistentConnection 内所提供的多个事件:OnConnected, OnReconnected,
OnReceived, OnError 和 OnDisconnect 即可。

· Hub:新闻交流器,用来缓解 realtime 音信沟通的功力,服务器端可以采取URL 来注册一个或多少个 Hub,只要连接到这几个Hub,就能与有着的客户端共享发送到服务器上的音信,同时服务器端可以调用客户端的本子,不过它背后依然不离
HTTP 的正式,所以它看起来神奇,但它并从未那么神奇,只是 JavaScript
更强,强到可以用像 eval() 或是动态解释施行的法门,允许 JavaScript
可以动态的加载与履行办法调用而己。

SignalR 将整个调换信息的作为封装得尤其精美,客户端和服务器全体都利用
JSON 来维系,在劳动器端声明的有着 hub 的音讯,都会一般生成 JavaScript
输出到客户端,.NET 则是凭借 Proxy 来扭转代理对象,那一点就和 WCF/.NET
Remoting 极度好像,而 Proxy 的中间则是将 JSON
转换成对象,以让客户端可以看看目标。

下边大家来针对Persistent Connection和Hub 做个Demo试试:

新建一个ASP.NET MVC项目MvcApplicationSignalR,通过Nuget添加SignalR的包。

新建一个类MyConnection 继承自 PersistentConnection
,引用SignalR命名空间,重写OnReceivedAsync 的方式,并须求 SignalR
对传播的音信做广播

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using SignalR;
using System.Threading.Tasks;

namespace MvcApplicationSignalR
{
   public  class MyConnection : PersistentConnection

    {
       protected override Task OnReceivedAsync(IRequest request, string
connectionId, string data)
        {
            // Broadcast data to all clients
            data = string.Format(“数据是:{0} 时间是:{1}”, data,
DateTime.Now.ToString());
            return Connection.Send(connectionId, data);
        }

    }
}

随着在 Global.asax 中进入对应路由音信,那会由 SignalR 的路由表来处理
Metadata 的输出工作,粉色部分代码:

protected void Application_Start()
{
    RouteTable.Routes.MapConnection<MyConnection>(“echo”,
“echo/{*operation}”);

 

那般服务器端就马到功成了。现在大家在类型中Master、View
(Home/Index),然后进入需求的代码:

<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.6.4.min.js”)”
type=”text/javascript”></script>
    <script src=”@Url.Content(“~/Scripts/modernizr-1.7.min.js”)”
type=”text/javascript”></script>
    <script
src=”@Url.Content(“~/Scripts/jquery.signalR-0.5.2.min.js”)”
type=”text/javascript”></script>
</head>

@{
    ViewBag.Title = “Home Page”;
}
<script type=”text/javascript”>
    $(function () {
        var connection = $.connection(‘echo’);

        connection.received(function (data) {
            $(‘#messages’).append(‘<li>’ + data +
‘</li>’);
        });

        connection.start();

        $(“#broadcast”).click(function () {
            connection.send($(‘#msg’).val());
        });
        $(“#btnStop”).click(function () {
            connection.stop();
        });
    });

</script>
<h2>@ViewBag.Message</h2>
<input type=”text” id=”msg” />
<input type=”button” id=”broadcast” value=”发送” />
<input type=”button” id=”btnStop” value=”停止” />
<ul id=”messages”>
</ul>

运转起来就是其一作用:

图片 1

下边我们来显示 SignalR 的另一个效果:由劳务器端调用客户端的 JavaScript
脚本的意义,而以此功效的必要必须是要促成成 Hub
的形式,因而我们得以顺便看看什么样兑现一个 Hub 类型的 SignalR 应用程序。

向品种中投入一个类Chat继承自 Hub 类 (那是 Hub 应用程序的要求) :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using SignalR.Hubs;
using System.Threading.Tasks;
using System.Threading;

namespace MvcApplicationSignalR
{
   [HubName(“geffChat”)]
   public class Chat : Hub 
   {
       public void SendMessage(string message)
       {
           Clients.sendMessage(message);
       }
   }
}

那段程序代码的企图是,在接二连三进到 Hub
时,将连续代码加到联机用户的聚众中,等会就会使用到,因为大家会遵从客户端的
ID 来调用客户端脚本。

  1. HubName:这些 atttibute 代表 client 端要哪些树立相应 server 端对象的
    proxy object。通过 HubName , server 端的 class name才不会被 client
    绑死。假如没有设定,则会以 server 端 class name 为 HubName 默许值。

  2. 持续 Hub:继承 Hub
    之后,很多应和的宏图就都休想写了,大家只必要把注意力放在 client 怎样送
    request 给 server的 hub , server 怎么样打招呼 client 即可。

  3. public void SendMessage(string message) ,就像 WebService Method 或
    PageMethod 一般, client 端通过 proxy object ,可以直接调用 server
    端这些措施。后续会介绍到什么在页面上采用。

  4. Clients 属性:代表享有有利用 Chat 的页面。而 Clients 的型别是 dynamic
    ,因为要一贯对应到 JavaScript 的靶子。

  5. Clients.sendMessage(message):代表 server 端调用 Clients 上的
    sendMessage 方法,也就是 JavaScript 的方法。

  6. 总计: Chat 对象义务就是当 client 端调用SendMessage()
    方法后,要把那些 message ,送给所有 client
    页面上展现。以高达聊天室的效果。

服务端的做完了,发轫创设客户端,同样在Home/Index页面上扩张以下html代码

<%–很关键的一个参阅,一定要加,且在这一行此前,一定要先参考jQuery.js与signalR.js–%>
<script src=”@Url.Content(“~/signalr/hubs”)”
type=”text/javascript”></script>

@{
    ViewBag.Title = “Home Page”;
}
<script type=”text/javascript”>
    $(function () {
        var connection = $.connection(‘/echo’);    

        connection.received(function (data) {
            $(‘#messages’).append(‘<li>’ + data +
‘</li>’);
        });

        connection.start();

        $(“#broadcast”).click(function () {
            connection.send($(‘#msg’).val());
        });
        $(“#btnStop”).click(function () {
            connection.stop();
        });

        // 建立对应server端Hub
class的目的,请留心geffChat的第三个假名要改成小写
        var chat = $.connection.geffChat;

        // 定义client端的javascript
function,供server端hub,通过dynamic的法子,调用所有Clients的javascript
function
        chat.sendMessage = function (message) {
            //当server端调用sendMessage时,将server
push的message数据,呈现在wholeMessage中
            $(‘#wholeMessages’).append(‘<li>’ + message +
‘</li>’);
        };

        $(“#send”).click(function ()
{
            //调用叫server端的Hub对象,将#message数据传给server
            chat.sendMessage($(‘#message’).val());
            $(‘#message’).val(“”);
        });

        //把connection打开
        $.connection.hub.start();

    });

</script>
<h2>@ViewBag.Message</h2>
<input type=”text” id=”msg” />
<input type=”button” id=”broadcast” value=”发送” />
<input type=”button” id=”btnStop” value=”停止” />
<ul id=”messages”>
</ul>

<div>
    <input type=”text” id=”message” />
    <input type=”button” id=”send” value=”发送” />
    <div>
        聊天室内容:
        <br />
        <ul id=”wholeMessages”>
        </ul>
    </div>
</div>

  1. 先引用 jQuery 与 signalR 的 js 文件。

  2. 很重点的一个手续:出席一个 js
    引用,其路径为「根目录/signalr/hubs」。 SignalR 会建立有关的
    JavaScript,放置于此。

  3. 因此 $.connection.『server 端的 HubName』,即可建立对相应 hub 的
    proxy object。要留意,首字母需小写。

  4. 概念 client 端上,供 server 端文告的 JavaScript
    function,那边的例子是 sendMessage。

  5. 当按下发送按钮时,调用 server 端的 SendMessage() 方法,只要求向来通过
    proxy object 即可。要注意,首字母需小写。

  6. 回忆透过 $.connection.hub.start() ,把 connection 打开。

图片 2

在意:SingalR 会自动生成一个siganlr/hub
的桥接js..,在本机使用localhost测试都不会有标题。当安顿到IIS的时候会时有暴发404谬误,是出于被IIS误判可能是虚构目录…,解决措施是在web.config参加一段:

<!– 参加上面这一段–>

<system.webServer>

<validation validateIntegratedModeConfiguration=”false” />

<modules
runAllManagedModulesForAllRequests=”true”>

</modules>

</system.webServer>

参考:

实例代码:MvcApplicationSignalR

相关文章

网站地图xml地图