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

朴灿烈づ我的快乐病毒、 2021-11-01 11:26 279阅读 0赞

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

# 一步一步学习SignalR进行实时通信\_4\_Hub #

标签（空格分隔）： SignalR

--------------------

## 前言 ##

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

## 创建Hub ##

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

public class EchoHub:Hub
    {
        //这是Hub
    }

public class EchoPersistentConnection:PersistentConnection
    {
        //这是PersistentConnection
    }

## 配置Hub ##

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

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

## 创建Hubs服务 ##

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

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

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

## 详细代码 ##

*  startup映射

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

*  MyFirstHub

using Microsoft.AspNet.SignalR;
    namespace SignalR_3_Hubs.Models
    {
        public class MyFirstHub : Hub
        {
            public void Hello(string name) {
                Clients.All.hello(name);
            }
        }
    }

*  hub.html

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
    <ul id="chat"></ul>
    <button id ="sayHello">发送</button>
        <script src="Scripts/jquery-1.10.2.min.js"></script>
        <script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
        <script src="/signalr/js"></script>
        <script type="text/javascript"> $(function () { //创建一个hub服务 var hub = $.connection.myFirstHub; $.connection.hub.start() .done(function () { alert("连接成功!"); }) .fail(function () { alert("连接失败!"); }); hub.client.hello = function (name) { $('#chat').append('<li><strong>' + name + '</strong>:Hi!</li>'); } $("#sayHello").click(function () { console.log(1); hub.server.hello("Jack"); console.log(2); }); }); </script>
    </body>
    </html>

## 代码解析 ##

这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引入`<script src="/signalr/js"></script>`或者`<script src="/signalr/hubs"></script>`,否则服务将无法开启  
> ![52325393.jpg][]  
> 我改为`<script src="/signalr/></script>`那么就报了404错误并提示你是否引用正确。  
> 如果我将映射改为app.MapSignalR("/realtime");  
> 那么引入的代码就应该是`<script src="/realtime/signalr/js"></script>`或者`<script src="/realtime/signalr/hubs"></script>`

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

## 效果展示 ##

1.  进入页面  
    ![95264042.jpg][]
2.  点击按钮触发  
    ![36005172.jpg][]

## 结束语 ##

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

[源码下载][Link 1]  
本文发布至[作业部落][Link 2]

## 参考文献 ##

[SignalR Programming in Microsoft ASP.NET pdf 下载][SignalR Programming in Microsoft ASP.NET pdf]

转载于:https://www.cnblogs.com/owenzh/p/11163130.html

[11050266.jpg]: http://img-storage.qiniudn.com/15-8-27/11050266.jpg
[76836682.jpg]: http://img-storage.qiniudn.com/15-8-27/76836682.jpg
[52325393.jpg]: http://img-storage.qiniudn.com/15-8-28/52325393.jpg
[66669213.jpg]: http://img-storage.qiniudn.com/15-8-28/66669213.jpg
[95264042.jpg]: http://img-storage.qiniudn.com/15-8-28/95264042.jpg
[36005172.jpg]: http://img-storage.qiniudn.com/15-8-28/36005172.jpg
[Link 1]: http://files.cnblogs.com/files/Jack-Blog/SignalR_3_Hubs.rar
[Link 2]: https://www.zybuluo.com/a604572782/note/158478
[SignalR Programming in Microsoft ASP.NET pdf]: http://pan.baidu.com/s/1qcfx0