史上最全面的SignalR系列教程-二、SignalR 實現推送功能-永久鏈接類實現方式

時間 2019-11-05

標籤史上全面 signalr 系列教程實現推送功能永久鏈接方式简体版

原文原文鏈接

一、概述

經過上篇史上最全面的SignalR系列教程-一、認識SignalR文章的介紹，咱們對SignalR技術已經有了一個全面的瞭解。本篇開始就經過SignalR的典型應用的實現方式作介紹，例子雖然簡單，但麻雀雖小五臟俱全。能夠以此爲基礎，擴展到實際應用中。html

SignalR 的實現機制與.NET WCF 或 Remoting 是類似的，都是使用遠程代理來實現。在具體使用上，有兩種不一樣通訊模型：PersistentConnection 和 Hubs，其中 PersistentConnection 是實現了長時間的 Javascript 輪詢（相似於 Comet），Hub 是用來解決實時信息交換問題，它是利用 Javascript 動態載入執行方法實現的。SignalR 將整個鏈接，信息交換過程封裝得很是漂亮，客戶端與服務器端所有使用 JSON 來交換數據。前端

對於這兩種方式的討論，感興趣的朋友能夠移步：https://stackoverflow.com/questions/9280484/signalr-why-choose-hub-vs-persistent-connectionhtml5

本篇主要介紹使用SignalR的永久鏈接類(Persistent Connections)的實現方式來實現消息推送（廣播）功能，分別以Asp.NET MVC與控制檯程序作實例演示。對於Hubs這種集線器的實現方式在下篇文章介紹。jquery

二、SignalR的永久鏈接類Mvc實現

在ASP.NET MVC下實現SignalR的永久鏈接類很是的簡單，只需簡單4步就能夠實現一個簡單的羣聊功能。git

2.一、建立ASP.NET Mvc項目

2.二、安裝Nuget包

建立好項目後，要使用SignalR，須要先安裝SignalR包，能夠經過程序包管理控制檯輸入包安裝命令進行安裝。github

Install-Package Microsoft.AspNet.SignalR

也可使用界面方式，以下圖所示。web

2.三、增長SignalR服務

規劃適當的SignalR服務文件存放的文件夾，如咱們放在Connections文件夾中，在此文件夾右鍵選擇新建項，咱們選擇SignalR Persistent Connection Class永久鏈接類項。服務器

肯定後，VS會自動給咱們生成對應代碼，以下：微信

using System.Threading.Tasks;
using Microsoft.AspNet.SignalR;
 
namespace SignalRTestProj_1.Connections
{
    public class ChatConnection : PersistentConnection
    {
        protected override Task OnConnected(IRequest request, string connectionId)
        {
            return Connection.Send(connectionId, "Welcome!");
        }
 
        protected override Task OnReceived(IRequest request, string connectionId, string data)
        {
            return Connection.Broadcast(data);
        }
    }
}

咱們對代碼作適當修改，讓業務更人性化，以下所示：websocket

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;


namespace SignalRTestProj_1.Connections
{
    using Microsoft.AspNet.SignalR;

    public class ChatConnection : PersistentConnection
    {
        private static int _connections = 0;

        protected override Task OnConnected(IRequest request, string connectionId)
        {
            Interlocked.Increment(ref _connections);
            //廣播消息
            Connection.Broadcast("新的鏈接加入，鏈接ID：" + connectionId + ",已有鏈接數：" + _connections);
            return Connection.Send(connectionId, "雙向鏈接成功，鏈接ID：" + connectionId);
        }

        /// <summary>
        /// 鏈接斷開 
        /// </summary>
        protected override Task OnDisconnected(IRequest request, string connectionId, bool stopCalled)
        {
            Interlocked.Decrement(ref _connections);
            return Connection.Broadcast(connectionId + "退出鏈接，已有鏈接數：" + _connections);
        }

        protected override Task OnReceived(IRequest request, string connectionId, string data)
        {
            var message = connectionId + "發送內容>>" + data;
            return Connection.Broadcast(message);
        }
    }
}

2.四、啓動路由註冊

要使Signal啓做用，咱們必須啓動路由註冊，要讓客戶端能找到，咱們使用Owin。以下圖所示，咱們添加一個Owin Start啓動類。

using Microsoft.Owin;
using Owin;
using SignalRTestProj_1.Connections;

[assembly: OwinStartup(typeof(SignalRTestProj_1.App_Start.ChartStartup))]

namespace SignalRTestProj_1.App_Start
{
    public class ChartStartup
    {
        public void Configuration(IAppBuilder app)
        {
            // 有關如何配置應用程序的詳細信息，請訪問 https://go.microsoft.com/fwlink/?LinkID=316888
            // 配置上文實現的ChatConnections
            app.MapSignalR<ChatConnection>("/Connections/ChatConnection");
        }
    }
}

至此，咱們服務端就算搭建起來了，如今咱們增長一個頁面來實現調用。

2.五、前端界面處理

前端js實現消息廣播，並實時記錄

<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>SignalR永久鏈接類 Demo</title>
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script>
    </head>
    <body>
        <div>
            <h1>SignalR永久鏈接類 Demo</h1>
            <div>
                <input type="text" id="msgContext" placeholder="請輸入消息內容...." />
                <button id="sendMessage" class="btn-primary">Send</button>            
                <ul id="messages"></ul>
            </div>
            <script>
                var connection = $.connection("/Connections/ChatConnection");
                connection.logging = true;
                //客戶端接收消息
                connection.received(function (data) {
                    $('#messages').append('<li>' + data + '</li>');
                });
                //鏈接錯誤處理
                connection.error(function (err) {
                    alert('與服務器鏈接報錯:'+ err.message);
                });
                //鏈接成功
                connection.start().done(function () {
                    $('#sendMessage').click(function () {
                        var val = $('#msgContext').val();
                        //向服務器端發送消息
                        connection.send(val);
                    });
                });
            </script>
        </div>
    </body>
</html>

OK，全面完成，F5運行看效果吧。

2.六、效果展現

三、控制檯作SignalR服務端實現

除了Web實時應用以外，咱們還能夠用其餘應用程序實現實時交互，如控制檯。
只須要Install-Package Microsoft.AspNet.SignalR.Client命令，示例代碼以下：

using Microsoft.AspNet.SignalR.Client;
using static System.Console;

namespace ClientWithSignalRDemo
{
    class Program
    {
        static void Main(string[] args)
        {
            var connection = new Connection("http://localhost:65309/Connections/ChatConnection");

            connection.Received += WriteLine;
            connection.Start().Wait();

            string line;
            while ((line = ReadLine()) != null)
            {
                connection.Send(line).Wait();
            }
        }
    }
}