天天看點

關于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項目

關于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是否可以使用,如果存在即可是喲:

        
關于SignalR 進行雙向多步對話
關于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 進行雙向多步對話

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

繼續閱讀