欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.NET用SignalR建立浏览器和服务器的持久连接详解

程序员文章站 2022-06-03 15:07:44
前言 浏览器访问网页通过的是 http 协议,浏览器发送一个请求,服务器返回一个结果。服务器是被动接收请求,如果想反过来,服务器主动发送信息给浏览器咋办呢? 有很多解决...

前言

浏览器访问网页通过的是 http 协议,浏览器发送一个请求,服务器返回一个结果。服务器是被动接收请求,如果想反过来,服务器主动发送信息给浏览器咋办呢?

有很多解决方法,比如轮循(浏览器定时去向服务器询问是否有新数据)、websocket(html 5)……

而 signalr 就是把这些技术综合在一起,它自动识别当前浏览器支持哪些方式,然后选择最优的方式。我们开发时不必去关注这些细节,signalr 会帮我们实现,而且 signalr 是微软开发的,好用是一贯风格。

环境

.net 4.5 及以上,低了不行。

如果 visual studio 版本太低,没有 signalr,则按下面的步骤添加:

visual studio 的菜单“工具 -> 库程序包管理器 -> 管理解决方案的 nuget 程序包(打开解决方案之后才有)”,在弹出对话框中搜索“signalr”。

我用的 visual studio 2013 是不需要手工添加 signalr 的,本身就自带。

实战

打开 visual studio(我的版本是 2013),建立一个 asp.net 项目。

第一步、添加一个“signalr 永久连接类”

如下图:

ASP.NET用SignalR建立浏览器和服务器的持久连接详解

添加后,我们可以发现 visual studio 还自动为我们添加了一些引用,还有 scripts 文件夹(里面包含 jquery.signalr-2.0.0.js)。这个类初始的代码如下:

public class myconnection1 : persistentconnection
{
 protected override task onconnected(irequest request, string connectionid)
 {
 return connection.send(connectionid, "welcome!");
 }

 protected override task onreceived(irequest request, string connectionid, string data)
 {
 return connection.broadcast(data);
 }
}

第二步、添加“owin startup 类”

ASP.NET用SignalR建立浏览器和服务器的持久连接详解

然后添加点代码:

public class startup1
{
 public void configuration(iappbuilder app)
 {
 // 有关如何配置应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?linkid=316888
 app.mapsignalr<myconnection1>("/mypath"); // mypath 是我们随便写的。
 }
}

myconnection1 就是第一步创建的类名。

第三步、添加一个“web 窗体 ”

<textarea id="info" cols="60" rows="10"></textarea>
<script src="scripts/jquery-1.10.2.min.js"></script>
<script src="scripts/jquery.signalr-2.0.0.min.js"></script>
<script type="text/javascript">
<!--
 var conn = $.connection("/mypath");

 conn.start().done(function (data) {
  $("#info").append("连接成功,connectionid 为: " + data.id + "\r\n");
 });

 conn.received(function (data) {
  $("#info").append("收到数据: " + data + "\r\n");
 });
//-->
</script>

运行效果如下:

ASP.NET用SignalR建立浏览器和服务器的持久连接详解

扩展一下

myconnection1:

方法 onconnected:创建了连接时。

方法 onreceived:收到了客户端提交的数据时,参数 data 就是它所收到的数据。

方法 ondisconnected:断开了连接时。上面没有用它。

方法 onreconnected:重新连接了时。上面没有用它。

……
myconnection1 的 connection 属性:

方法 send:向浏览器发送数据,第一个参数为 connectionid(字符串类型),第二个参数为要发送的数据。

方法 broadcast:向所有浏览器(准确地说应该是所有连接)发送数据。

js:

  1. var conn = $.connection("/mypath"); 创建连接对象。
  2. conn.start().done() start() 是开始连接,done() 连接成功后要执行的代码。
  3. conn.received() 是收到服务器发送来的数据要执行的。
  4. conn.send() 是向服务器发送数据。上面没有用它。

下面看一个更全点的代码:

上面不是说有些方法没有用到没,下面的例子更全一点:

myconnection1:

protected override task onconnected(irequest request, string connectionid)
{
 return connection.send(connectionid, "welcome!");
}

protected override task onreceived(irequest request, string connectionid, string data)
{
 connection.send(connectionid, "我收到了:" + data);
 return connection.broadcast("全体注意:我收到了客户端的数据。");
}

web 窗体的代码:

<textarea id="info" cols="60" rows="10"></textarea>
要发送到服务器的消息:<input type="text" id="msg" size="20" />
<input type="button" value="发送消息" onclick="javascript: conn.send($('#msg').val());" />
<script src="scripts/jquery-1.10.2.min.js"></script>
<script src="scripts/jquery.signalr-2.0.0.min.js"></script>
<script type="text/javascript">
<!--
 var conn = $.connection("/mypath");

 conn.start().done(function (data) {
  $("#info").append("连接成功,connectionid 为: " + data.id + "\r\n");
 });

 conn.received(function (data) {
  $("#info").append("收到数据: " + data + "\r\n");
 });
//-->
</script>

到目前为止,大家可能都提不起兴趣,服务器主动发送数据在哪里???

我们现在做一个定时程序,服务器定时向浏览器发送数据。

新建 global.asax(全局应用程序类)(并不是说这些代码只能在 global.asax 中运行,我们只是为了测试定时执行,才放在这里的)。

添加如下代码:

protected void application_start(object sender, eventargs e)
{
 timer timer = new timer(5000);
 timer.elapsed += timer_elapsed;
 timer.start();
}

void timer_elapsed(object sender, elapsedeventargs e)
{
 var context = globalhost.connectionmanager.getconnectioncontext<myconnection1>();
 context.connection.broadcast("我在 " + datetime.now.tostring() + " 主动向浏览器发送数据。");
}

效果如下:

ASP.NET用SignalR建立浏览器和服务器的持久连接详解

以上代码,我们用的是 context.connection.broadcast,如果是针对某一连接发送,则用 send 方法,这就需要 connectionid,不过要选择哪个 connectionid 都是业务层面的事,不是问题。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。