SignalR簡版web聊天室（實現過程分析篇）

龐順龍發表於2019-05-11
SignalRWeb

接上一篇：基於asp.net+SignalR實現的簡版web聊天室（demo簡單演示篇）

簡單來說：SignalR的使用重點其實就是hub類方法觸發頁面js和頁面js呼叫hub類方法的互通。

1、新建專案

2、引入必須的js 

<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="signalr/hubs"></script>

3、使用nuget工具，向專案新增SignalR


4、新建hub類


5、講解群發公聊資訊實現過程

hub類新增sendAll方法 

//廣播資訊到所有clinet
public void SendAllServer(string name, string message)
{
    Clients.All.SendAllClient("<li>[" + name + "]：" + message + " - " + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "</li>");
}

頁面新增SignalR指令碼 

$(function () {

    var chat = $.connection.PascalCaseContosoChatHub;

    chat.client.sendAllClient = function (message) {
        $('#chatList').append(message);
    };
        
    $.connection.hub.start().done(function () {
        
        $('#sendmessage').click(function () {
            if ($('#message').val() == "") {
                alert("請輸入資訊後再傳送");
                return;
            }
            if ($("#hiddenToConnectionId").val() == "") {
                chat.server.sendAllServer($('#hiddenUserName').val(), $('#message').val());
            } else {
                chat.server.sendToSingle($("#hiddenToConnectionId").val(), $('#hiddenUserName').val(), $("#hiddenToUserName").val(), $('#message').val());
            }
            $('#message').val("").focus();
        });
    }).fail(function () {
        $('#chatList').append('<li><strong>' + encodedName
           + '</strong>：連線聊天伺服器失敗...</li>');
    });

});

說明：

var chat = $.connection.PascalCaseContosoChatHub; 是註冊頁面連結方法。

Clients.All.SendAllClient 方法會觸發所有頁面chat.client.sendAllClient方法，進行訊息追加。

也就是說：在cs類中使用Client.xxx.自定義方法名稱  與 頁面 js chat.client.sendAllClient 進行呼叫。

規則：camel 命名法，也就是說，cs類中是  SendAll方法，那麼js中就是chat.client.sendAll 進行呼叫。

這樣就實現了，cs類方法觸發所有client進行訊息的追加，也就是公聊。

6、私聊和其他方法說明 

//所有人
Clients.All.addContosoChatMessageToPage(name, message);

//觸發者
Clients.Caller.addContosoChatMessageToPage(name, message);

//所有人除了觸發者
Clients.Others.addContosoChatMessageToPage(name, message);

//根據ConnectionId，實現私聊的方式
Clients.Client(Context.ConnectionId).addContosoChatMessageToPage(name, message);

//所有人，除了指定的connectionId1，connectionId2
Clients.AllExcept(connectionId1, connectionId2).addContosoChatMessageToPage(name, message);

//一組可見，用於小組聊天
Clients.Group(groupName).addContosoChatMessageToPage(name, message);

//一組可見，用於小組聊天，除了指定的connectionId1，connectionId2
Clients.Group(groupName, connectionId1, connectionId2).addContosoChatMessageToPage(name, message);

//除了當前組其他可見
Clients.OthersInGroup(groupName).addContosoChatMessageToPage(name, message);

//指定userid可見
Clients.User(userid).addContosoChatMessageToPage(name, message);
 
//指定的ConnectionIds，注意，這裡是一組ConnectionIds，不是一個ConnectionId
Clients.Clients(ConnectionIds).broadcastMessage(name, message);

//指定的組，多個
Clients.Groups(GroupIds).broadcastMessage(name, message);

//根據使用者name
Clients.Client(username).broadcastMessage(name, message);

//一組使用者name可見
Clients.Users(new string[] { "myUser", "myUser2" }).broadcastMessage(name, message);

我上一篇文章demo演示中用到的有：

① 使用到了 Clients.Client，用於展示私聊資訊 


//傳送資訊給單一client的人 
public void SendToSingle(string toConnectionID, string fromName, string toName, string message)
{
    Clients.Client(toConnectionID).SendToSingleClient("<li class='green_li'>[" + fromName + "]對你說：" + message + " - " + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "</li>");
    Clients.Client(Context.ConnectionId).SendFromSingleClient("<li class='green_li'>你對[" + toName + "]說：" + message + " - " + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "</li>");
}

② 當前使用者加入聊天室，當前使用者不顯示xxx加入了聊天室，其他client顯示，用 Clients.AllExcept(connectionID) 


//新使用者加入系統訊息 
public void SystemNotice(string connectionID, string username, string type)
{
    if (type.Equals("1"))
    {
        Clients.AllExcept(connectionID).SystemNoticeClient("<li class='red_li'>系統訊息："
            + username + " 加入聊天室 - " + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "</li>");
    }
    else
    {
        Clients.AllExcept(connectionID).SystemNoticeClient("<li class='red_li'>系統訊息："
            + username + " 退出了聊天室 - " + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "</li>");
    }
}
其他的自行根據需求使用即可


7、client傳送聊天資訊流程分析

①、client傳送聊天資訊通過js到cs類方法

②、hub類進行不同分類處理

③、hub類方法接收到資訊後，通知對應的client進行資料接收

公聊就是Clients.All.SendAllClient，那麼所有連線中的client頁面都會被通知觸發


④、私聊簡單說明，其實私聊和公聊類似，只是在hub類方法通知的client是唯一的一個client而已


在頁面js中，被通知觸發方法



由龐順龍最後編輯於：4年前

內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。

相關文章