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, "&").replace(/</g, "<").replace(/>/g, ">");
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元素数据可以从数据库中提取,使得不同人进入不同的组。思路:用户表-组表-关系表。
中间的一些代码来自于借鉴。加粗内容,才是真正的关键。