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

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

OK，如今運行你的程序，就能夠實現客戶端與服務器端實時通訊了，利用這些特性，咱們是否是能夠實現不少事情呀，讓消息推送更可靠吧！