SignalR入门

一:什么是signalR

Asp.net SignalR是微软为实现实时通信的一个类库。一般情况下,signalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中WebSockets出现,SignalR也支持WebSockets通信。另外SignalR开发的程序不仅仅限制于宿主在IIS中,也可以宿主在任何应用程序,包括控制台,客户端程序和Windows服务等,另外还支持Mono,这意味着它可以实现跨平台部署在Linux环境下。

SignalR将整个信息的交换封装起来,客户端和服务器都是使用JSON来沟通的,在服务端声明的所有Hub信息,都会生成JavaScript输出到客户端,.NET则依赖Proxy来生成代理对象,而Proxy的内部则是将JSON转换成对象。

客户端和服务端的具体交互情况如下图所示:

1、SignalR传输方式

1、HTML5 传输

这种传输方式当然是需要对HTML5兼容支持。如果客户端不支持HTML5 标准,那么你可以使用其他方式。

  • WebSocket: (前提是服务器和客户端都可以支持WebSocket )。WebSocket 是唯一的能够支持服务器和客户端建立真正持久的双向连接的传输方式,但是就是WebSocket要求的条件比较苛刻。WebSocket真正能够支持只是在最新的IE 浏览器、Chrome、Firefox和一些其他的浏览器比如Opera 和 Safari。

  • 服务端发送事件 :就是我们常说的EventSource (除了IE的其他浏览器都支持支持服务器发送事件)。

2、Comet  传输

下面的传输方式都是建立在Comet Web应用模型上。这种传输方式会在浏览器或者其他客户端保持一个长连接的HTTP请求,服务器可以利用这个请求将数据推送到客户端,而不用等客户端单独去请求数据。

  • Forever Frame:(只有IE浏览器支持)Forever Frame 会创建一个隐藏的IFrame ,这个IFrame 会向服务器发起一个端点请求,但是这个请求不会结束。服务器会不停的发送脚本到客户端马上执行,提供一个从服务器端到客户端的单向实时连接。服务端到客户端和客户端到服务端分别是两个不同的连接,就像一个标准的HTTP请求,一旦有数据需要发送就会创建一个新的连接。

  • Ajax 长轮询:长轮询不会创建一个持久的连接,它是会保持一个客户端与服务器的连接,直到服务器做出应答就会立即关闭,然后创建一个新的连接。当连接重置的时候这会导致一些延迟。

2、SignalR连接模式

  1. Http Persisten Connection(持久连接)对象:用来解决长时间连接的功能。还可以由客户端主动向服务器要求数据,而服务器端不需要实现太多细节,只需要处理PersistentConnection 内所提供的五个事件:OnConnected, OnReconnected, OnReceived, OnError 和 OnDisconnect 即可。
  2. Hub(集线器)对象:用来解决实时(realtime)信息交换的功能,服务端可以利用URL来注册一个或多个Hub,只要连接到这个Hub,就能与所有的客户端共享发送到服务器上的信息,同时服务端可以调用客户端的脚本。SignalR将整个信息的交换封装起来,客户端和服务器都是使用JSON来沟通的,在服务端声明的所有Hub信息,都会生成JavaScript输出到客户端,.NET则依赖Proxy来生成代理对象,而Proxy的内部则是将JSON转换成对象。

下面的图展示了Hub和持久连接的关系,让你对底层的传输技术一目了然。

二、服务端

原文参考:教程:通过 SignalR 2 进行实时聊天

使用vs2012创建一个新的ASP.NET Web Application项目。

1、添加服务端Hub

解决方案中添加SignalR Hub类选项,然后创建文件ChatHub.cs。此步骤将创建ChatHub.cs类文件并添加一组脚本文件和 SignalR 支持到项目的程序集引用。

注意:可以使用NuGet命令 install-package Microsoft.AspNet.SignalR 来引用SignalR到项目中

然后在ChatHub类中输入下面这段代码。

using Microsoft.AspNet.SignalR;

namespace WebApplication2
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // 客户端通过调用broadcastMessage来获取数据
            Clients.All.broadcastMessage(name, message);
        }
    }
}

ChatHub类中,可以看到它继承自Microsoft.AspNet.SignalR.Hub类。从Hub类派生出类是构建SignalR应用程序的有用方式。在这个类(ChatHub)中定义的公共方法可以被网页内的脚本访问。

在这段代码中(ChatHub类),客户端通过调用ChatHub.Send方法,并把名称和消息内容做为参数传递给ChatHub。而ChatHub则通过Clients.All.broadcastMessage方法把该消息广播给所有客户端。

Send方法演示了几个Hub概念:

  • 在hub上声明一些公共方法,以便客户端可以调用它们。
  • 使用Microsoft.AspNet.SignalR.Hub。客户端动态属性用于与连接到此中心的所有客户端进行通信。
  • 调用客户机上的函数(如broadcastMessage函数)来更新客户机。

2、添加OWIN 启动类

Solution Explorer中,右击项目,然后添加一个名为StartupOWIN 启动类,然后输入下面这段代码。

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(WebApplication2.Startup))]
namespace WebApplication2
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

三、客户端

在项目中添加一个静态网页文件,并命名为index.html,然后右击该网页文件,并选择Set As Start Page,在Index.html中输入下面的代码,注意引用正确的文件名。

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Simple Chat</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />

        <input type="hidden" id="displayname" />
        <ul id="discussion"></ul>
    </div>

    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-1.12.4.js"></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.4.1.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>
    <!--Add script to update the page and send messages.-->
    <script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub.
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message.
                var encodedName = $(‘<div />‘).text(name).html();
                var encodedMsg = $(‘<div />‘).text(message).html();;
                // Add the message to the page.
                $(‘#discussion‘).append(‘<li><strong>‘ + encodedName
                    + ‘</strong>:&nbsp;&nbsp;‘ + encodedMsg + ‘</li>‘);
            };
            // 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();
                });
            });
        });
    </script>
</body>
</html>

客户端通过jquery.signalR.jssignalr/hubs来与服务器进行通信,首先它要声明一个代理来引用集线器。

var chat = $.connection.chatHub

请注意:在JavaScript中,对服务器类及其成员的引用必须是camelCase形式。本例中将C#服务端的ChatHub类在JavaScript中的引用为chatHub。

然后它要再定义一个回调函数,这个回调函数主要是为了让服务器进行调用,从而将数据推送到客户端。

chat.client.broadcastMessage = function (name, message) {
    //TODO:接收服务器推送的消息
};

而下面的代码则是为了确保在将消息发送到服务器之前已经与服务器建立了连接。启动连接后,传递一个函数来处理HTML页面中Send按钮上的单击事件。

// 与服务器建立连接后才能发送消息到服务器
$.connection.hub.start().done(function () {
    $(‘#sendmessage‘).click(function () {
        // 调用服务器端的ChatHub.Send方法,并把消息发送到服务器
        chat.server.send("name", "message");
    });
});

保存项目,并按F5运行,就可以实现B/S模式下的即时通讯。

四、运行结果

项目运行起来后,同时用多个浏览器打开的,输入各自的姓名之后,就能够实现即时通讯了。回到我们的vs,还能够看到自动生成的hubs脚本文件,如下图所示。

三个不同的浏览器中的运行方式。 当 Tom、 Anand 和 Susan 发送消息时,所有浏览器实时更新:

原文地址:https://www.cnblogs.com/springsnow/p/11840881.html

时间: 2024-10-13 22:30:49

SignalR入门的相关文章

ASP.NET SignalR入门

前言 之前在培训ASP.NET WebAPI的时候有提过SignalR这个技术,但当时只是讲了是用来做什么的,并没有多说.因为自己也是画图找资料的时候见到的.后来当一直关注的前端大神贤心发布LayIM2.0之后,于是对Web聊天产生了兴趣.那么在.NET平台下的Web聊天有哪些呢?查找资料发现了ASP.NET SignalR.于是乎...So...Just do it! 简介 按照惯例,先介绍一下什么是SignalR.简单的说,ASP .NET SignalR 是一个ASP .NET 下的类库,

SignalR入门之持久性连接

为了保持客户端和服务端之间的持久性连接的开发性,并且使用传输在这这样的连接上发送数据,这个用来访问SignalR持久性连接的底层API提供了一个隐藏底层固有复杂性的抽象层. 事实上,通过该API访问通信通道和在底层使用Socket方式类似: 在服务端,当连接打开或关闭.接受数据.给客户端发送信息时我们将被通知.在客户端,我们可以打开或关闭连接,发送或接受任何数据.与Socket一样,消息没有格式,可以说它的格式是传统数据格式——文本字符串. 从客户端来看,只需要发起一个到服务端的连接就可以立即使

一、SignalR入门

准备: 开发工具:visual studio 2013 使用框架:SignalR.Jquery 正文 概述 基于ASP.NET web 应用程序创建并引用SignalR 和JQuery框架简单实现文字聊天 开发任务: A.创建一个空的ASP.NET web 项目 B.引用SignalR 和Jquery框架 C.创建一个集线器类,以将内容推送到客户端. D.创建一个OWIN Startup类,配置启动. E.在Web中使用SignalR jQuery实现消息的收发.     效果图展示: 开发步骤

SignalR入门之多平台SignalR服务端

之前创建SignalR服务端是基于Web应用程序而言的.那么能不能把SignalR服务端做成控制台应用程序.Winform或windows服务呢? 答案是肯定的. 之前尽管看起来好像是IIS和ASP.Net构成托管SignalR服务的唯一环境,但事实上并非如此,很多情况下采用的并非是IIS和ASP.NET. 现在,在这里以控制台程序为例,将SignalR服务端建立在控制台程序里. 如何在控制台程序实现基于Hub或持久性连接的SignalR服务呢,首先安装下面的包: install-package

SignalR入门篇

一,简介 Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重新发送请求或使用轮询技术来获取消息. 可访问其官方网站:https://github.com/SignalR/ 获取更多资讯. 二,实现机制 SignalR 的实现机制与 .NET WCF 或 Remoting 是相似的,都是使用远程代理来实现.在具体使用上,有两种不同目的的接口:PersistentCo

快速了解SignalR—在MVA微软虚拟学院学习SignalR

©版权声明:本文为博主原创文章,如需转载请注明出处. SignalR把实时Web功能变得异常简单. 如果您希望在几个小时内对SignalR有一个直观的了解,观看微软虚拟学院(MVA)的视频教学Lighting Up Real-Time Web Communications with SignalR或许是个不错的选择. 这是一个大概四个小时的视频教学,分为五个部分.除了视频,还配有PPT和小测验.视频是英文的,配有英文字幕.通过这几个小时的学习,您将对SignalR的功能以及如何使用有一个初步的了

SignalR 目录

目录: 1.SignalR入门

SignalR系列教程:SignalR快速入门

---恢复内容开始--- 本篇是SignalR系列教程的第一篇,本篇内容介绍了如何创建SignalR应用,如何利用SignalR搭建简易的聊天室等,本篇内容参考自:http://www.asp.net/signalr/overview/older-versions/tutorial-getting-started-with-signalr,文中会有我对实例代码的一些理解. 首先我们创建ASP.NET空程序,并使用“程序包管理控制台”执行“Install-PackAge Microsoft.Asp

SignalR 2.1 简单入门项目(一)

概述 SignalR是通讯框架,前台Web页面与后台服务实现数据的交互.ASP.NET SignalR 是一个为 ASP.NET 开发人员的库,简化了将实时 web 功能添加到应用程序的过程.实时Web功能使服务端代码推送内容到链接可客服端并立即应用成为可能,而不需要服务端等待客户端去请求数据. SignalR可用于任何你想添加实时Web功能到ASP.NET应用程序的情形,聊天室是一个常用的例子,用户可以刷新Web页面来获得新的数据,或者页面使用一个长轮询来取回数据,这都是SignalR可以应用