发现用SignalR实现通信非常简单,SignalR内部有两类

作者: 编程  发布:2019-11-03

  从上面的介绍可以看出,SignalR既然是为实时而生的,这样就决定了其使用场所。具体适用情景有如下几点:

一.前言:每次写总要说一点最近的感想

进入工作快半年了,昨天是最郁闷的一天,我怀疑我是不是得了"星期一综合征",每个星期一很没有状态。全身都有点酸痛,这个可能一个星期只有周末才打一次球有关吧。好吧还是说说正经的,厂里的牛哥昨天分配给我一个任务,大概的一个意思就是“用这个signalR发送一条消息给客户端,客户端进行反馈响应”。任务听起来似乎很简单,但是没接触过signalR这玩意,我也是挺郁闷了一大半天,虽然之前有了解到这项目中用到用redis存储signalR发送的消息,苦于没有时间去实践学习,突然想起那句话“机会永远是给有准备的人”,平时过于懒惰没有合理分配学习计划,只能临时抱佛脚,关键是还不知道从哪抱起。经过一天的探索,终于摸清了门道。

所以写了篇文章,让那些正在接触SignaIR的同学们,看了这个例子也能学会使用signalR。所谓的signalR入门教程当然肯定是能让你入门的。

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

巡更项目中,需要发送实时消息,以及需要任务开始提醒,于是便有机会接触到SignalR,在使用过程中,发现用SignalR实现通信非常简单,下面我思明将从三个方面分享一下:

 

二:什么是signalR

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

  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转换成对象。

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

客户端和服务端的具体交互情况如下图所示:(看不懂此图没关系,写完例子再看就会有新的体会)

9159.com 1

这段是抄的哦!,如果非要用一句话来说SignaIR是什么,其实就是微软自己封装好的实现即时通讯的一个类库。

SignalR内部有两类对象:

一、SignalR是什么

  • 聊天室,如在线客服系统,IM系统等
  • 股票价格实时更新
  • 消息的推送服务
  • 游戏中人物位置的实时推送 : 游戏参考

三:SignaIR入门简单的例子

这才是重点,以上的介绍大家肯定对Asp.net signalR有了一个初步的了解,接下我们开始实践操作了。

先来看一下最终要实现的效果图吧:

9159.com 2

1.新建一个MVC项目,我用的是Vs2015默认添加的是MVC5

2."引用" 右键点击 》管理Nuget程序包》搜索signalR,添加完signalR你可以在 Scripts 文件夹下看到:

9159.com 3

3.向项目中添加一个signalR集线器(V2)命名为ServerHub:

9159.com 4

4.在刚刚新建的ServerHub.cs 中写入 一下代码:

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

namespace SignaIREasyDemo
{
    public class ServerHub : Hub
    {
        public void SendMsg(string message)
        {
            //调用所有客户端的sendMessage方法
            Clients.All.sendMessage(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"),message);
        }
    }
}

5.如果你是vs2015 的话添加的mvc项目 不进行身份验证的那种吧,必须得添加一个Startup 类.      如果没有这个类,请添加,不然的话项目运行不起来的,具体代码如下:

using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRQuickStart.Startup))]

namespace SignalRQuickStart
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // 有关如何配置应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkID=316888
            // 配置集线器
            app.MapSignalR();
        }
    }
}

6.在Control 里新建一个Chat Action方法,在Chat视图里代码如下:

@{
    ViewBag.title = "SignaIR聊天窗口";
}
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="messageBox"></ul>
    </div>
@section scripts
{
   <script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>
   <script src="~/signalr/hubs"></script>
    <script>
        $(function () {
            //引用自动生成的集线器代理
            var chat = $.connection.serverHub;
             //定义服务器调用的客户端sendMessage来显示新消息
            chat.client.sendMessage = function (name, message)
            {
                //向页面添加消息
                $("#messageBox").append('<li><strong style="color:green">'+htmlEncode(name)+'</strong>:'+htmlEncode(message)+'</li>');
            }
            //设置焦点到输入框
            $('#message').focus();
            //开始连接服务器
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    //调用服务器端集线器的Send方法
                    chat.server.sendMsg($('#message').val());
                    //清空输入框信息并获取焦点
                    $("#message").val('').focus();
                })
            })
        });
        //为显示的消息进行html编码
        function htmlEncode(value)
        {
            var encodeValue = $('<div/>').text(value).html();
            return encodeValue;
        }
    </script>
}

好了,一个signalR简单的入门的例子就ok了,最终的效果图在上面也已经看到了。下面我们就简单的分析一下吧

从最终的效果图 我们可以看到,在任何一个web 页面中发送的消息所有的 页面都会接收到该消息。这种应用在IM系统非常广泛常见。

当然signalR并不局限于这种B/S模式的消息推送,在C/S 同样也能应用,目前我们公司xamarin android所用的就是这个signalR实现的PC之间、PC与移动端、移动端与移动端之间的交流,使用之后会发现的确挺方便的。

有人可能感觉很郁闷了,在视图中引入 这段js有什么作用?也并有写啊。

注意!,这是虚拟目录,也就是你在OWIN Startup中注册的地址



<script src="~/signalr/hubs"></script>

其实在服务器端声明的所有Hub信息,最终都会生成JavaScript输出到客户端,其实谷歌浏览器中F12 ,在Sources你就可以看到写的源代码了:

9159.com 5

还是来看一下在这种B/S 模式中 signalR是如何运行的吧。首先程序开始的时候,Web页面就已经与signalR的服务建立连接。

$.connection.hub.start() 意思就是有signalR服务建立连接

.done 函数表示连接成功后为发送的按钮绑定一个单击事件

发送消息的方法:chat.server.sendMsg($('#message').val())

在ServerHub重写一个 OnConnected 方法来监控客户端的连接情况,的确程序运行的时候web页面就已经开始建立连接了,在调试的时候可以在输入中看到 "客户端连接成功!"

       //重写OnConnected 方法

      public override Task OnConnected()
        {
            System.Diagnostics.Trace.WriteLine("客户端连接成功!");
            return base.OnConnected();
        }

一个简单的如何使用signalR就是这么多,用法很广泛,用的人也挺多的,所以值得学习。下一步准备在Xamarin android 中也写一个聊天的例子。希望能完整一点吧。下载地址:

作者:张林

标题:MVC中使用SignaIR入门教程 原文地址:http://blog.csdn.net/kebi007/article/details/53167003

转载随意注明出处

  1. Http持久连接(Persisten Connection)对象:用来解决长时间连接的功能。还可以由客户端主动向服务器要求数据,而服务器端不需要实现太多细节,只需要处理PersistentConnection 内所提供的五个事件:OnConnected, OnReconnected, OnReceived, OnError 和 OnDisconnect 即可。
  2. Hub(集线器)对象:用来解决实时(realtime)信息交换的功能,服务端可以利用URL来注册一个或多个Hub,只要连接到这个Hub,就能与所有的客户端共享发送到服务器上的信息,同时服务端可以调用客户端的脚本。

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

 

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

SignalR内部有两类对象:

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

消息提醒也就是当客户有新消息来时,在客户端的右下角进行弹框提醒。要实现这个功能的思路是:

  1. Http持久连接(Persisten Connection)对象:用来解决长时间连接的功能。还可以由客户端主动向服务器要求数据,而服务器端不需要实现太多细节,只需要处理PersistentConnection 内所提供的五个事件:OnConnected, OnReconnected, OnReceived, OnError 和 OnDisconnect 即可。
  2. Hub(集线器)对象:用来解决实时(realtime)信息交换的功能,服务端可以利用URL来注册一个或多个Hub,只要连接到这个Hub,就能与所有的客户端共享发送到服务器上的信息,同时服务端可以调用客户端的脚本。

  signalR内部有两类对象:

  1. SignalR服务端推送消息到客户端的实现方式为调用客户端的receiveMessage方法来将消息附加到聊天记录内,所以我们可以在客户端的receiveMessage方法中实现弹框的逻辑。
  2. 找好了方法定义的位置后,自然是去找一个比较好的弹框效果JS类库了,这里使用的是iNotify库来实现的。该库的github地址为:,在线测试地址为:
  3. 你看QQ或者微信的消息提醒,消息提醒一般是在你不在聊天的当前Tab页面才会弹出,我们可以利用Html5 visibilitychange事件来实现,不过我这里是通过失焦点的方式,也就是focus事件。

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

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

JavaScript

二、为什么要用SignalR

 

 

// 接收消息 
        systemHub.client.receivePrivateMessage = function(fromUserId, userName, message) { 
       // 专题二中的代码 

      // 消息提醒的代码 
    if (active == false) { 
                var iN = new iNotify({ 
                    effect: 'flash', 
                    interval: 500, 
                    audio: { 
                        file: ['/Music/msg.mp3'] 
                    }, 
                    notification: { 
                        title: "通知!", 
                        body: '您有一条新消息' 
                    } 
                }); 

                iN.setTitle(true).player(); 
                iN.setFavicon(true).setTitle(true).notify(); 
            } 
        }; 
}    
  1. 聊天室,如在线客服系统,IM系统等
  2. 消息的实时推送服务
  3. 巡更人员位置的实时推送

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

 

三、怎么实现SignalR,下面主要介绍一下SignalR第一大功能,聊天。以下是一个简单的DEMO:

SignalR的服务端提供了两种实现方式,分别是PersistentConnection和Hub,这两种方式的侧重点不同:

1、新建一个asp.net web 应用程序

  PersistentConnection Hub/生成Proxy模式 Hub/非生成Proxy模式
服务端配置

app.Map("/messageConnection", map => 
           { 
               map.RunSignalR<MessageConnection>(); 
           });

app.Map("/messageHub", map => 
           { 
               map.RunSignalR(new Microsoft.AspNet.SignalR.HubConfiguration { EnableJavaScriptProxies = true }); 
           });

app.Map("/messageHub", map => 
            { 
                map.RunSignalR(new Microsoft.AspNet.SignalR.HubConfiguration { EnableJavaScriptProxies = true }); 
            });

引入js文件 jquery-1.6.4.min.js 
jquery.signalR-2.2.0.min.js
jquery-1.6.4.min.js 
jquery.signalR-2.2.0.min.js 
/messageHub/js 
上述js文件是动态生成,其中messageHub的为服务端定义的路径
jquery-1.6.4.min.js 
jquery.signalR-2.2.0.min.js
创建连接 var connection = $.connection("/message"); var connection = $.connection; var connection = $.hubConnection();
开启连接

connection.start() 
                .done(function () { 
                    connected = true; 
                }) 
                .fail(function () { 
                    alert("连接失败"); 
                });

connection.hub.start() 
                .done(function () { 
                    connected = true; 
                }) 
                .fail(function () { 
                    alert("连接失败"); 
                });

connection.start() 
                .done(function () { 
                    connected = true; 
                }) 
                .fail(function () { 
                    alert("连接失败"); 
                });

代理对象 var proxy = connection.MessageService; 
MessageService是Hub的名称
var proxy = connection.createHubProxy("MessageService"); 
MessageService是Hub的名称
定义客户端方法

proxy.client.hello = function (message) { 
                      console.log(message);   

}

proxy.on("hello", function (message) {        

                  console.log(message);

});

接收消息

connection.received(function (message) { 
                alert(message); 
            });



通过服务器调用客户端方法实现


通过服务器调用客户端方法实现
发送消息 connection.send(message); 通过调用服务端方法实现 
proxy.server.hello(message);
通过调用服务端方法实现 
proxy.invoke("hello", message);
设置QueryString 在创建connection时指定 
var connection = $.connection("/messageConnection", { username: "qs" + username });

connection.hub.qs = { username: "qs" + username };

connection.qs = { username: "qs" + username };
设置Cookie document.cookie = "username=" + username; document.cookie = "username=" + username; document.cookie = "username=" + username;
设置State proxy.state.ClientType = "HubAutoProxy"; proxy.state.ClientType = "HubNonAutoProxy";

9159.com 6

示例代码下载

2、选择模板MVC,同时更改无身份验证

 

9159.com 7

 

3、选择新建的项目,右击-->选择管理NuGet程序包-->搜索 signalr--> 安装Microsoft ASP.NET SignalR 

docs.microsoft t

9159.com 8

容易碰到的问题:

4、新建启动程序 Startup.cs 

 

9159.com 9

1.预定义的类型“Microsoft.CSharp.RuntimeBinder.Binder”未定义或未导入:[

在类中添加代码:

](:

app.MapSignalR();

Install-Package microsoft.owin.cors 

9159.com 10

Update-Package Owin -Reinstall

5、新建SignalR集线器类ChatHub.cs

 

9159.com 11

3.关于SignalR连接数量问题的记录:

6、在集线器类ChatHub.cs中添加如下代码

 

 

    public class ChatHub : Hub
    {
        /// <summary>
        /// 供客户端调用的服务器端代码
        /// </summary>
        /// <param name="message"></param>
        public void Send(string message)
        {
            var name = Guid.NewGuid().ToString().ToUpper();
            // 调用所有客户端的sendMessage方法
            Clients.All.sendMessage(name, message);
        }

        /// <summary>
        /// 客户端连接的时候调用
        /// </summary>
        /// <returns></returns>
        public override Task OnConnected()
        {
            Trace.WriteLine("客户端连接成功");
            return base.OnConnected();
        }
    }

9159.com,7、修改Index.cshtml页面代码

@{
    ViewBag.Title = "聊天窗口";
}

<h2>Chat</h2>

<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>

@section scripts
{
    <!--引用SignalR库. -->
    <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
    <!--引用自动生成的SignalR 集线器(Hub)脚本.在运行的时候在浏览器的Source下可看到 -->
    <script src="~/signalr/hubs"></script>

    <script>
        $(function () {
            // 1、引用自动生成的集线器代理 必须用小写字母开头
            var chat = $.connection.chatHub;

            // 2、开始连接服务器 done函数表明建立连接成功后为发送按钮注册了一个click事件
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // 调用服务器端集线器的Send方法 也要小写开头
                    chat.server.send($('#message').val());
                    // 清空输入框信息并获取焦点
                    $('#message').val('').focus();
                });
            });

            // 3、定义服务器端调用的客户端sendMessage来显示新消息
            chat.client.sendMessage = function (name, message) {
                // 向页面添加消息
                $('#discussion').append('<li><strong>' + htmlEncode(name)
                    + '</strong>: ' + htmlEncode(message) + '</li>');
            };

            // 设置焦点到输入框
            $('#message').focus();
        });

        // 为显示的消息进行Html编码
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

8、直接运行程序,打开多个网页,都可以收到相同的消息。。如下:

9159.com 12

 

 综上所述,SignalR使用起来很方便,而且配置很简单,功能也很强大。码字不容易,转载请注明出处

借鉴微博:

[Asp.net 开发系列之SignalR篇]专题一:Asp.net SignalR快速入门

本文由9159.com发布于编程,转载请注明出处:发现用SignalR实现通信非常简单,SignalR内部有两类

关键词:

上一篇:没有了
下一篇:没有了