zoukankan      html  css  js  c++  java
  • C# -Asp.Net.SignalR.Core之Hub

    前言

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

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

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

    因此,如果一直用Visual Studio 2013以下版本开发的话,估计他对SignalR也就没什么兴趣。

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

    引用SignalR

    闲话少叙,现在我们开始学习SignalR。

    首先,创建一个MVC项目,然后,我们打开Nuget搜索SignalR,如下图:

    成功引用后,我们查看引用,会发现程序引用了很多dll,比如Owin等等;这是因为SingalR的依赖项比较多,所以,我们也引用了比较多的DLL。

    接着,我们会发现一个问题,我们添加引用是SignalR,但实际引用进来的却是SignalR.Core,如下图:

    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(控制台)来查看我们的输出内容。

    如上图所示,我们的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 已经定义好了,现在我们在运行下网站。

    如上图所示,服务成功的向客户端发出了信息。

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

    到此Asp.Net.SignalR.Core就介绍完了。

    框架代码已经传到Github上了,欢迎大家下载。

    Github地址:https://github.com/kiba518/KibaSignalR

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

    注:此文章为原创,任何形式的转载都请联系作者获得授权并注明出处!
    若您觉得这篇文章还不错,请点击下方的推荐】,非常感谢!

     

  • 相关阅读:
    国产开源软件
    Tomcat系统架构
    移动端前端常见的触摸相关事件touch、tap、swipe
    spring配置文件详解
    Java获取文件中视频的时长
    java命令行导出、导入sql文件
    Java国密相关算法(bouncycastle)
    Java中将对象转换为Map的方法
    Virtual Box虚拟机下CentOS网络设置
    VirtualBox安装虚拟机全过程
  • 原文地址:https://www.cnblogs.com/kiba/p/10641531.html
Copyright © 2011-2022 走看看