關於SignalR 進行雙向多步對話

關於ASP.NET SignalR 解釋百度百科是這樣說的：

ASP.NET SignalR 是爲 ASP.NET 開發人員提供的一個庫，可以簡化開發人員將實時 Web 功能添加到應用程序的過程。實時 Web 功能是指這樣一種功能：當所連接的客戶端變得可用時服務器代碼可以立即向其推送內容，而不是讓服務器等待客戶端請求新的數據。

也可以參照微軟官方信息： https://dotnet.microsoft.com/apps/aspnet/signalr

我的理解是，客戶端以及服務器端進行的實時通訊操作，客戶端註冊在javascript函數中註冊一系列方法，服務器端會主動調用客戶端已註冊的方法。

比如說：現有三臺電腦：A、B、C。服務器調用客戶端方法之前，A,B,C必須存在已被註冊的方法，服務器才能進行一個調用的操作。

或者這樣去理解，服務器端在調用客服端的數據時，要對其進行一個處理，可以說是一個加工、轉發的過程吧？？？在信息處理完畢後，服務器端又將處理好的數據發送給客戶端進行一個渲染，這樣就不再對web頁面進行一個刷新，對用戶體驗度也是不錯的，對比ajax異步操作。以前在進行實時通訊是，要通過ajax輪詢操作，瀏覽器不斷地發送Http請求給服務器，如果頭部數據冗餘，還可能會出現意想不到的後果，對用戶的體驗度也不太友好，所以推出了 WebSockets，它是HTML5提供的新的API。SignalR使用WebSockets，以在Web網頁與服務器端間建立Socket連接。

當然你可以去基於ASP.NET MVC或者是WebApi去作SignalR。

創建SignalR項目

Startup類在運行項目時系統會找到這個文件，不然會報錯

代碼：

using Owin;
namespace SignalRDemo
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            //使用SignalR
            app.MapSignalR();
        }
    }
}

MsgHub類中代碼：

using Microsoft.AspNet.SignalR;

namespace SignalRDemo
{
    public class MsgHub : Hub
    {
        //在hub中編寫的方法，都是要被客戶端調用的方法
        public void SendMsg(string name,string txt)
        {
            //服務器主動調用客戶端的方法
            //Others：發送給其他人，All發送給所有人（包括自己）
            Clients.All.getMsg(name,txt);
        }
    }
}

Clients：就是客戶端的意思，ALL：所有用戶，getMsg是客服端以定義的方法
在瀏覽器中輸入以上地址去檢驗SignalR是否可以使用，如果存在即可是喲：

創建一個Html頁面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 這兩個引入的js文件順序要一致 -->
    <script src="Scripts/jquery-3.4.1.js"></script>
    <script src="Scripts/jquery.signalR-2.2.2.js"></script>
    <!-- 這個文件是測試你的hub是否可用，如果存在，即可用，首先你是找不到這個文件的，這是系統生成的 -->
    <script src="/signalr/hubs"></script>
    <script>
        $(function() {
            $("#btnlogin").click(function() {
                login();
            });
        });
        function login() {
            if ($("#txtName").val().length > 3) {
                
                sessionStorage.setItem("user",$("#txtName").val());
            }
            else {
                alert('登錄失敗');
                return;
            }
            serverClient();
        }

        function serverClient() {
            //1.註冊服務器連接
            var msgHub = $.connection.msgHub;
            //2.服務端調用客戶端方法前客戶端先要註冊方法 getMsg
            msgHub.client.getMsg = function (name,txt) {
                //服務器給客戶端發個內容，客戶端接收出來
                var htmltTemplate = `
                    <div>
                        <span>{{name}}</span>
                        <span>{{content}}</span>
                    </div>
                `
                //替換髮送的內容
                var html = $(htmltTemplate.replace('{{name}}', name)
                    .replace('{{content}}', txt));

                if (name === sessionStorage.getItem("user")) {
                    html.css({ "color": "red" });
                }
                //prepend 往前追加
                $("#msgList").prepend(html);
            }

            //3.啓動連接並綁定處理事件
            // done 連接成功
            // fail 連接失敗
            $.connection.hub.start()
                .done(function () {
                    $("#sendBtn").removeAttr("disabled").click(function () {
                        //客戶端發送 sendMsg小寫
                        msgHub.server.sendMsg(sessionStorage.getItem("user"), $("#txtMsg").val());
                    })
                }).fail(function () {

                })
        }
    </script>
</head>
<body>

    <div id="msgList">
        
    </div>
    <input type="text" id="txtName"/>
    <input type="text" id="txtMsg"/>
    <button id="btnlogin">登錄</button>
    <button id="sendBtn" disabled="disabled">發送信息</button>
</body>
</html>

效果圖如下：