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>