Asp.net Core中SignalR Core預覽版的一些新特性前瞻,附源碼(消息訂閱與發送二進制數據)

本文轉載自查看原文 2017-12-06 12:37 1659 ASP.NET Core

SignalR系列目錄(注意,是ASP.NET的目錄.不是Core的)

前言

一晃一個月又過去了,上個月有個比較大的項目要驗收上線.所以忙的腳不沾地.現在終於可以忙里偷閑,寫一篇關於SignalR Core的文章了.

先介紹一下SignalR吧,如下:

ASP.NET SignalR是ASP.NET開發人員的一個庫，它簡化了向Web應用程序添加即時通訊功能的過程。

它可以讓服務器在可用時立即向連接的客戶端推送內容，而不是讓服務器等待客戶端請求新數據。

當然,在新的ASP.NET Core中,它也被重新設計並加入到ASP.NET 全家桶中....

Core版本的SignalR基礎通訊的用法與原來並沒有多大的區別,大家可以自行參考前面的資料,或者參考園子里的相關資料.

今天我們主要來講講SignalR Core發布的預覽版2的一些讓人興奮的新特性.

准備工作

安裝.NET Core2.0+

引用預覽版的Microsoft.AspNetCore.SignalR 1.0.0-alpha2-final

需要了解ASP.NET Core的管道機制.

正文

1.消息訂閱(觀察者模式)

這里不對這個模式做過多的講解,具體內容請移步:百度百科

首先我們創建一個ASP.NET Core的空項目

然后添加相關引用Microsoft.AspNetCore.SignalR .

然后,添加我們的熟悉的SignalR Hub,如下:

public class StreamingHub : Hub
    {

        public void SendStreamInit()
        {
            //開啟客戶端訂閱
            Clients.All.InvokeAsync("streamStarted");
        }

        //被訂閱的消息
        public IObservable<string> StartStreaming()
        {
            return Observable.Create(
                async (IObserver<string> observer) =>
                {
                    for (int i = 0; i < 10; i++)
                    {
                        observer.OnNext($"發送內容......{i}");
                        await Task.Delay(1000);
                    }
                });
        }
    }

hub里面的內容,我先講解一下:

我們首先創建一個SendStreamInit的方法,來開啟所有的客戶端訂閱.

也就是調用客戶端的 streamStarted 方法.

然后客戶端的streamStarted 方法來訂閱我們的StartStreaming,

StartStreaming里面創建一個觀察者,來觀察一個序列,每一秒發送一個內容,循環10次

然后,我們在Startup中注冊我們添加的hub,如下:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseFileServer();
            
            //注冊hub
            app.UseSignalR(routes =>
            {
                routes.MapHub<StreamingHub>("streaming");
            });
        }

接下來,實現我們的客戶端JS,如下:

        //設置連接方式
        //var transport = signalR.TransportType.WebSockets;
        var transport = signalR.TransportType.LongPolling; 
        //創建連接
        var connection = new signalR.HubConnection(`http://${document.location.host}/streaming`, { transport: transport });
        //獲取按鈕
        var button = document.getElementById("startStreaming");
        //注冊訂閱方法
        function startStreaming(){
            connection.stream("StartStreaming").subscribe({
                next: onStreamReceived,
                err: function(err){
                    console.log(err);
                },
                complete: function(){
                    console.log("完成流傳輸");
                }
            });
        }
        //注冊開啟注冊的方法
        connection.on("streamStarted", function(){
            startStreaming();
        });

        //添加按鈕事件,調用初始化訂閱的方法
        button.addEventListener("click", event => {
            connection.invoke("sendStreamInit");
        });

        //展示訂閱得到的消息
        function onStreamReceived(data){
            console.log("收到消息: " + data);
            var liElement = document.createElement('li');
            liElement.innerHTML = '<strong>' + "收到消息" + '</strong>:&nbsp;&nbsp;' + data;
            document.getElementById('discussion').appendChild(liElement);
        }
        //開啟連接
        connection.start();

解釋都已經在注釋里面了,請仔細看注釋.

最后實現的效果如下:

這里的demo是直接開啟所有連接的客戶端的消息訂閱..你也可以針對單獨用戶來開啟訂閱.

2.發送二進制字節

這是一個重大的進步.到目前為止，我們只使用了JSON協議來發送數據。新的SignalR Core在數據協議方面有一個很大的進步.就是提升了發送二進制編碼數據的能力。

下面將介紹如何設置客戶端使用messsagepack的協議來傳遞二進制數據。

首先我們來了解一下messsagepack協議,大家可以搜一下他的官網,很簡單粗暴的一句話.

它類似JSON，
但是更快，更小。

使用的方式也很簡單.

后台代碼不需要任何改動.

前端需要多引用一個消息協議的JS文件

如: <script type="text/javascript" src="signalr-msgpackprotocol-1.0.0-alpha2-final.js"></script>

JS代碼修改如下:

//設置連接方式
var transport = signalR.TransportType.LongPolling;
//設置消息協議
var protocol = new signalRMsgPack.MessagePackHubProtocol();
//初始化連接
var connection = new signalR.HubConnection('http://localhost:58619//chat', { transport: transport, protocol: protocol });