關於SignalR 進行雙向多步對話

CR7Ronaldo發表於2020-07-26
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>

效果圖如下：

以上就是SignalR的小栗子。。。

相關文章