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

时间 2019-11-11

原文原文链接

百度百科给它的定义

实现实时通讯。什么是实时通讯的Web呢？就是让客户端（Web页面）和服务器端能够互相通知消息及调用方法，固然这是实时操做的。javascript

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

二 Startup文件为SignalR的入口

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalR.Core.Startup))]
namespace SignalR.Core
{

    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }

    }
}

三一组SignalR的JS文件java

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

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,string userID)
        {
            var id = Context.ConnectionId;
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(string userID)
        {
            var id = Context.ConnectionId;
   
            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();
        }

    }
}

五核心JS功能代码片段浏览器

    <!--Reference the jQuery library. -->
    <script src="/Scripts/jquery-1.8.2.min.js"></script>

    <!--Reference the SignalR library. -->
    <script src="/Scripts/jquery.signalR-1.0.0.js"></script>
    <!--Reference the autogenerated SignalR hub 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>

OK，如今运行你的程序，就能够实现客户端与服务器端实时通讯了，利用这些特性，咱们是否是能够实现不少事情呀，让消息推送更可靠吧！服务器