一步一步学习SignalR进行实时通信_4_Hub

原文: 一步一步学习SignalR进行实时通信_4_Hub

SignalR

• 一步一步学习SignalR进行实时通信_4_Hub
  • 前言
  • 创建Hub
  • 配置Hub
  • 创建Hubs服务
  • 详细代码
  • 代码解析
  • 效果展示
  • 结束语
  • 参考文献

前言

之前我们介绍了SignalR有2级抽象,前2篇文章我们讲的是较底层PersistentConnection，从这篇文章开始我们学习下较高一层的Hub。

创建Hub

创建Hub的方法和创建PersistentConnection非常类似

1. public class EchoHub:Hub
2. {
3. //这是Hub
4. }

1. public class EchoPersistentConnection:PersistentConnection
2. {
3. //这是PersistentConnection
4. }

配置Hub

学过了PersistentConnection,那么Hub更加不是难事

1. public void Configuration(IAppBuilder app)
2. {
3. // 映射 persistent connections 到/myconnection
4. app.MapSignalR<MyPersistentConnection>("/myconnection");
5. // 映射 hubs 默认为"/signalr"
6. app.MapSignalR();
7. //映射Hubs到"/realtime",同时还可以配置HubConfiguration,比如我们uxyao跨域,和上一讲用法是一致
8. app.MapSignalR("/realtime", new HubConfiguration());
9. }

创建Hubs服务

接下来我们进入正题,如何来创建基于Hub的实时通信服务,这里与PersistentConnection有一点差别,前面我们在服务器通过OnReceived()来接受客户端的服务并进行处理,在Hub中我们可以实现我们自己需要的方法来进行处理信息。
1. 新建一个Hub类取名为MyFirstHub

2. 默认会生成这样的代码,有一个默认的方法,应该能看得出来这个Hello()方法的功能是发送给有客户端信息,说的更直白一点是所有连接了此Hub的客户端即为Clients,服务器会发送请求调用客户端的hello()方法,类似于PersistentConnection的广播Broadcast()。

3. 创建一个客户端连接
* 我创建一个html页面名为Hub,引入jquery和signalr的js
* 在页面载入的时候连接Hub服务,并调用Hello,向所有客户端打招呼

详细代码

• startup映射

1. using Microsoft.Owin;
2. using Owin;
3. [assembly: OwinStartup(typeof(SignalR_3_Hubs.Startup))]
4. namespace SignalR_3_Hubs
5. {
6. public class Startup
7. {
8. public void Configuration(IAppBuilder app)
9. {
10. app.MapSignalR();
11. }
12. }
13. }

• MyFirstHub

1. using Microsoft.AspNet.SignalR;
2. namespace SignalR_3_Hubs.Models
3. {
4. public class MyFirstHub : Hub
5. {
6. public void Hello(string name)
7. {
8. Clients.All.hello(name);
9. }
10. }
11. }

• hub.html

2. xmlns="http://www.w3.org/1999/xhtml">
7. id="chat">
8. id ="sayHello">发送
9. src="Scripts/jquery-1.10.2.min.js">
10. src="Scripts/jquery.signalR-2.0.0.min.js">
11. src="/signalr/js">
12. type="text/javascript">
13. $(function () {
14. //创建一个hub服务
15. var hub = $.connection.myFirstHub;
16. $.connection.hub.start()
17. .done(function () {
18. alert("连接成功!");
19. })
20. .fail(function () {
21. alert("连接失败!");
22. });
23. hub.client.hello = function (name) {
24. $('#chat').append('
25. ' + name + ':Hi!
');
26. }
27. $("#sayHello").click(function () {
28. console.log(1);
29. hub.server.hello("Jack");
30. console.log(2);
31. });
32. });

代码解析

这3端代码非常简短也很简单,但是有一点特别要注意的是,我们用PersistentConnetcion在startup中配置SignalR映射时

startup中映射的代码为app.MapSignalR("/echo");

在html客户端js代码中我们是这样写的
var connection = $.connection("/echo");

若通过跨域其他客户端连接则为var connection = $.connection("127.0.0.1：8083/echo");(假设signalR部署在127.0.0.1：8083端口)

这在前面2章我都讲到过,Hub与PersistentConnection有所不同,Hub的默认服务是映射在/signalr/js或/signalr/hubs

因此如果我们默认hub映射代码为app.MapSignalR();
那么我们需要在html引入或者,否则服务将无法开启

我改为或者

这下应该明白了吧,前面的映射代表的是映射的根目录。同时你不用奇怪这个路径,这只是个虚拟路径,服务开启后生成的代理(在后面我会讲到代理和非代理的使用),可以看到下载下来的脚本资源文件

到此Hub的整个过程应该有些了解了

效果展示

1. 进入页面
   
2. 点击按钮触发
   

结束语

这里简单的介绍了下Hub,并通过与PersisentConnection进行了比较。下一节将具体的介绍Hub。

源码下载
本文发布至作业部落

参考文献

SignalR Programming in Microsoft ASP.NET pdf 下载

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！