ASP.NET Core SignalR实现一个聊天室（群聊，和单一聊天）

1.原料：

假设插件都已经备好。

2.代码处理：

后端：（cs）

    public class ChatHub: Hub
    {
        public Task SendMessage(string user, string message, string group)
        {
            Groups.AddToGroupAsync(Context.ConnectionId, group);
            return Clients.Group(group).SendAsync("ReceiveMessage", user, message);
        }
    }

startup.cs：         

            app.UseSignalR(routes =>
            {
                routes.MapHub<ChatHub>("/WeChatNow");
            });

思路：将一个人，两个人，一群分配在不同的组中，即可实现独自聊，一对一，群聊功能。

前端：

chat.js

"use strict";

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

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

connection.on("ReceiveMessage", function (user, message,group) {
    var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    var encodedMsg = user + " 说：" + msg;
    var li = document.createElement("li");
    li.textContent = encodedMsg;
    document.getElementById("messagesList").appendChild(li);
});

connection.start().then(function(){
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("user").innerText;
    var message = document.getElementById("messageInput").value;
    var group = document.getElementById("group").innerText;
    connection.invoke("SendMessage", user, message, group).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

3.dom元素数据可以从数据库中提取，使得不同人进入不同的组。思路：用户表-组表-关系表。

 

中间的一些代码来自于借鉴。加粗内容，才是真正的关键。