SignalR群组聊天异常：双方打开页面后需发消息才显示对话

问题根源 #

你当前的代码逻辑是只有用户点击发送按钮时，才调用JoinRoom接口加入群组。这就导致：新打开聊天页面的用户，在自己主动发送第一条消息之前，根本没有加入目标房间，自然收不到房间内其他用户发送的消息。只有当自己发消息时执行了JoinRoom，才会被拉进群组，之后才能收到消息。

解决步骤 #

1. 前端代码调整

将JoinRoom的调用时机从「发送按钮点击时」提前到「SignalR连接建立成功后」，确保页面加载完成就加入指定房间：

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//Disable the send button until connection is established.
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
    // 连接成功后立即加入房间
    var roomId = document.getElementById("RoomId").value;
    connection.invoke("JoinRoom", roomId).catch(function (err) {
        return console.error(err.toString());
    });
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    var roomId = document.getElementById("RoomId").value;
    // 移除这里的JoinRoom调用，避免重复加入
    connection.invoke("SendMessage", user, message, roomId).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

2. 后端Hub优化（可选但推荐）

为了避免重复加入群组导致的无效调用，可以在JoinRoom方法中先检查当前连接是否已经在目标群组里：

public async Task JoinRoom(string RoomId)
{
    // 检查当前连接是否已在群组中
    var isInGroup = await Groups.IsUserInGroupAsync(Context.ConnectionId, RoomId);
    if (!isInGroup)
    {
        await Groups.AddToGroupAsync(Context.ConnectionId, RoomId);
    }
}

public async Task SendMessage(string user, string message, string RoomId)
{
    await Clients.Group(RoomId).SendAsync("ReceiveMessage", user, message);
}

验证逻辑 #

调整后，任意用户打开聊天页面，SignalR连接建立后会自动加入指定房间，此时无论哪一方发送消息，房间内所有已加入的连接都会立即收到消息，无需等待自己发第一条消息。

内容的提问来源于stack exchange，提问作者Lighto Gamer