SignalR实现服务器与客户端的实时通信

缺乏、安全感 2021-09-10 08:40 451阅读 0赞

# [SignalR实现服务器与客户端的实时通信][SignalR] #

## 百度百科给它的定义 ##

实现实时通信。什么是实时通信的Web呢？就是让客户端（Web页面）和服务器端可以互相通知消息及调用方法，当然这是实时操作的。

WebSockets是HTML5提供的新的API，可以在Web网页与服务器端间建立Socket连接，当WebSockets可用时（即浏览器支持Html5）SignalR使用WebSockets，当不支持时SignalR将使用其它技术来保证达到相同效果。

SignalR当然也提供了非常简单易用的高阶API，使服务器端可以单个或批量调用客户端上的JavaScript函数，并且非常 方便地进行连接管理，例如客户端连接到服务器端，或断开连接，客户端分组，以及客户端授权，使用SignalR都非常容易实现。

## 它的作用 ##

SignalR 将与客户端进行实时通信带给了ASP .NET 。当然这样既好用，而且也有足够的扩展性。以前用户需要刷新页面或使用Ajax轮询才能实现的实时显示数据，现在只要使用SignalR，就可以简单实现了。最重要的是您无需重新建立项目，使用现有ASP .NET项目即可无缝使用SignalR。

## 它最强吸引我的地方 ##

应该说，首次听到signalR给我最大的振奋就是它与服务器的实时通信，要知道，以往的十几年里，客户端要想实时与服务器通信，那只有通过长轮询，当AJAX出现之后，这种长轮旬变得漂亮一些，但也终规是轮询，即服务器永远是被动的，客户端你真的很累，呵呵！

## 实例代码 ##

下面我将以一个非常简单的例子说一个signalR的威力，主要功能是，一个网页，有个登陆，登陆成功后，由服务器去通信客户端，并回调客户端的方法，登出后，同时这样的流程，看一下核心代码：

一 首先引用相关DLL

![Image 1][]

二  Startup文件为SignalR的入口

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

三 一组SignalR的JS文件

![Image 1][]

四 实现具体业务的核心类文件，它需要集成Hub，需要使用特性HubName为SignalR起个名字，以便在客户端去调用它

![复制代码][copycode.gif]

using Microsoft.AspNet.SignalR;
    using Microsoft.AspNet.SignalR.Hubs;
    using SignalR.Core.Model;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Web;
    
    namespace SignalR.Core
    {
    
        [HubName("UrlHub")]
        public class UrlValid : Hub
        {
            static List<CurrentUser> ConnectedUsers = new List<CurrentUser>();
            public void Connect(string url)
            {
                var id = Context.ConnectionId;
                var userID = (HttpContext.Current.Session == null ? "" : HttpContext.Current.Session["UserID"] ?? "").ToString();
                if (ConnectedUsers.Count(x => x.ConnectionId == id) == 0)
                {
                    ConnectedUsers.Add(new CurrentUser
                    {
                        ConnectionId = id,
                        UserID = userID,
                    });
                    Clients.Caller.onConnected(id, userID, url);
                    //Clients.AllExcept(id).onNewUserConnected(id, userID);
    
                    Clients.Client(id).onNewUserConnected(id, userID);
                }
                else
                {
    
                    Clients.Caller.onConnected(id, userID, url);
                    Clients.Client(id).onExistUserConnected(id, userID);
                    // Clients.AllExcept(id).onExistUserConnected(id, userID);
                }
            }
    
            /// <summary>
            /// 登出
            /// </summary>
            public void Exit()
            {
                var id = Context.ConnectionId;
                var userID = (HttpContext.Current.Session == null ? "" : HttpContext.Current.Session["UserID"] ?? "").ToString();
    
                OnDisconnected();
                Clients.Caller.onConnected(id, userID, "");
                Clients.Client(id).onExit(id, userID);
            }
    
            /// <summary>
            /// 断开
            /// </summary>
            /// <returns></returns>
            public override System.Threading.Tasks.Task OnDisconnected()
            {
                var item = ConnectedUsers.FirstOrDefault(x => x.ConnectionId == Context.ConnectionId);
                if (item != null)
                {
                    ConnectedUsers.Remove(item);
    
                    var id = Context.ConnectionId;
                    Clients.All.onUserDisconnected(id, item.UserID);
    
                }
                return base.OnDisconnected();
            }
    
        }
    }

![复制代码][copycode.gif]

五 核心JS功能代码片断

![复制代码][copycode.gif]

<script src="/Scripts/jquery-1.8.2.min.js"></script>
    
        
        <script src="/Scripts/jquery.signalR-1.0.0.js"></script>
        
        <script src="/signalr/hubs"></script>
    
        <script type="text/javascript">
            $(function () {
                // Declare a proxy to reference the hub
                var chatHub = $.connection.UrlHub;
                registerClientMethods(chatHub);
                // Start Hub
                $.connection.hub.start().done(function () {
                    registerEvents(chatHub);
                });
    
            });
    
            //注册客户端事件
            function registerEvents(chatHub) {
                $("#btn").click(function () {
                    var url = "dasfjasldfj";
                    chatHub.server.connect(url);
                });
    
                $("#logOut").click(function () {
                    chatHub.server.exit();
                });
    
            }
    
            //注册客户端方法
            function registerClientMethods(chatHub) {
    
                chatHub.client.onConnected = function (id, userID, url) {
                    console.log("与服务器建立了链接" + url);
                }
    
                chatHub.client.onUserDisconnected = function (id, userID) {
                    console.log("与服务器取消了链接");
                }
    
                chatHub.client.onNewUserConnected = function (id, userID) {
                    alert("新用户完成为合法");
                }
    
                chatHub.client.onExistUserConnected = function (id, userID) {
                    alert("用户" + userID + "不能重复登陆");
                }
    
                chatHub.client.onExit = function (id, userID) {
    
                    alert("用户" + userID + "成功退出！");
                }
    
            }
    
        </script>

![复制代码][copycode.gif]

OK，现在运行你的程序，就可以实现客户端与服务器端实时通信了，利用这些特性，我们是不是可以实现很多事情呀，让消息推送更可靠吧！

[SignalR]: http://www.cnblogs.com/lori/p/3442341.html
[Image 1]: 
[copycode.gif]: /images/20210726/0a48993ceb914c8a96f0bc5c662a5fe5.png