C# -Asp.Net.SignalR.Core之Hub

程序员文章站 2022-06-10 09:04:19

前言程序员的进步是需要环境的，良好的团队环境，良好的开发环境，会让人进步的更加快速。所以，我认为，如果一个程序员，在2019年还在用Visual Studio 2005开发，那么，他，大概率，不会想了解Linq是个什么东西，因为他根本用不到。就如同我，一直在纯Windows环境下开发，所以就对 ......

前言

程序员的进步是需要环境的，良好的团队环境，良好的开发环境，会让人进步的更加快速。

所以，我认为，如果一个程序员，在2019年还在用visual studio 2005开发，那么，他，大概率，不会想了解linq是个什么东西，因为他根本用不到。

就如同我，一直在纯windows环境下开发，所以就对core并不是很感兴趣。

因此，如果一直用visual studio 2013以下版本开发的话，估计他对signalr也就没什么兴趣。

因为我们都有个坏习惯，用不到的就不喜欢去学习。

引用signalr

闲话少叙，现在我们开始学习signalr。

首先，创建一个mvc项目，然后，我们打开nuget搜索signalr，如下图：

C# -Asp.Net.SignalR.Core之Hub

成功引用后，我们查看引用，会发现程序引用了很多dll，比如owin等等；这是因为singalr的依赖项比较多，所以，我们也引用了比较多的dll。

接着，我们会发现一个问题，我们添加引用是signalr，但实际引用进来的却是signalr.core，如下图：

C# -Asp.Net.SignalR.Core之Hub

signalr.core和signalr有什么区别呢？

我们上网查询一下，发现，他们的差异大致上就是下面这句话。

【asp.net core signalr 不支持自动重新连接。如果客户端已断开连接，则用户必须显式启动新连接才能重新连接。在 asp.net signalr 中，如果连接断开，signalr 会尝试重新连接到服务器。】

差异参考asp.net signalr 和 asp.net core signalr 之间的差异

startup

signalr引入完成了，现在我们需要配置和使用它了。

如何配置呢？很简单。添加startup文件，修改代码如下：

public class startup
{
    public void configuration(iappbuilder app)
    {
        app.mapsignalr(); 
    }
}

startup文件包含的功能很多，这里暂时不去详解了，我们暂时只要知道，startup文件会在网站启动时跟着一起运行就可以了。

因为网站运行时会调用startup的configuration方法，所以，我们在这里打开signalr的映射——app.mapsignalr()，即网站初始化，我们就开启了signalr的映射。

hub

signalr简单的来说，是用于一个网页即时通讯的工具，既然是即时通讯，那么肯定就是双工——双向的。

现在我们先来看下，【网页——>服务器】这个方向的通讯。

网页向服务器发送信息

首先，我们在服务器建立一个hub，用来接收网页的消息。

//这里命名尽量用小写，因为前台只认小写
[hubname("kibahub")]
public class kibahub : hub
{  
    // 这里函数命名虽然是大写，但前台js调用要用小写字母开头
    public void send(string message)
    {
        var id = context.connectionid;   
    }
}

代码很简单，我们建立了一个类，并集成hub，然后编写了一个send方法，供页面调用。

还可以看到，我们在类上面加了一个特性，用来显示的声明这个hub在网页端的名称。

接下来，我们编写网页代码，在网页中，使用javascript来调用这个hub的send方法，代码如下：

<head>
    <script src="~/scripts/jquery-3.3.1.min.js"></script>@*优先signalr引用*@
    <script src="~/scripts/jquery.signalr-2.4.0.js"></script>
    <script src="~/signalr/hubs"></script>@*这个是临时生成的文件，里面保存的是我们在服务器定义的hub生成的javascript代码*@
</head>
<body>
            <script type='text/javascript'> 
                //引用自动生成的代理，kibahub是hubname注解属性 
                var kibahub = $.connection.kibahub;
                console.log("kibahub get");
                //开始连接
                $.connection.hub.start().done(function () {
                    console.log("hub start done");
                    //客户端发送信息到服务器
                    kibahub.server.send('kiba');
                    console.log("send done");
                }); 
            </script> 
   
</body>
</html>

从代码中可以看到，我们首先引用了三个js文件。

第一个没啥可说的，就是jq的文件。

第二jquery.signalr-2.4.0.js文件，是我们在引用signalr时，一起引入进来的，在scripts文件夹下，我们也直接引入即可。

第三signalr/hubs个文件大家应该很奇怪，我们项目里根本没有这个文件夹，也没有这个文件，而且这个hubs文件居然还没有后缀名。

事实上这个文件夹和文件的确是不存在的，因为，它们是在我们运行网站时，才会生成的临时文件。目前先不去管他是什么，我们只要知道，需要这个引用就可以了。

接下来，我们看下javascript代码。

在js代码里，我们通过$.connection.kibahub这样一句话就获取到了服务器的kibahub类的实例了，然后，我们只要调用它的send方法就可以了。

但是在调用之前，我们需要先连接一下服务器。所以就有了这么一句话 $.connection.hub.start()。

到此，网页向服务器发送数据已经编写完成了，下面我们运行网站，在浏览器中按下f12进入调试模式，然后选择console（控制台）来查看我们的输出内容。

C# -Asp.Net.SignalR.Core之Hub

如上图所示，我们的signalr成功的向服务器发出了信息。

服务器向网页发送信息

网页请求已经发送成功了，现在我们开始编写服务器向网页发送信息。

首先，我们在kibahub类的send方法里稍作修改，代码如下。

public void send(string message)
{
    var id = context.connectionid; 
    ihubcontext context = globalhost.connectionmanager.gethubcontext<kibahub>();
    context.clients.client(id).getmessage("518"); 
}

可以看到，我们在send方法中获取了当前连接的唯一标识connectionid，然后我们利用这个connectionid找到他对应的client客户端。

在通过client客户端调用网页中javascript定义的函数getmessage，并向他发送信息518。

这样服务端的代码就编写完成了。

但我们会发现，我们好像并没有在网页端用javascript定义过函数getmessage呀。

别着急，我们现在就去网页定义这个方法。

 <script type='text/javascript'> 
     var kibahub = $.connection.kibahub; 
     $.connection.hub.start().done(function () {
         console.log("hub start done"); 
         kibahub.server.send('kiba');
         console.log("send done");
     });
     kibahub.client.getmessage = function (message) {
         console.log("getmessage:" + message);
     };
 </script>

如上述代码所示。我们可以看到getmessage 已经定义好了，现在我们在运行下网站。

C# -Asp.Net.SignalR.Core之Hub