SignalR實現服務器與客戶端的實時通信 - lori－IT工程師數位筆記本

文章出處

百度百科給它的定義

實現實時通信。什么是實時通信的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

二 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文件

四實現具體業務的核心類文件，它需要集成Hub，需要使用特性HubName為SignalR起個名字，以便在客戶端去調用它

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>