Asp.Net Core + SignalR 实现实时通信

最新推荐文章于 2024-05-07 15:34:03 发布

Dhoopu

最新推荐文章于 2024-05-07 15:34:03 发布

阅读量5.4k

点赞数 1

本文链接：https://blog.csdn.net/dupeng0811/article/details/89877239

版权

一、搭建项目

1、创建一个ASP.NET Core MVC 项目

image

2、nuget 下载和安装 MicroSoft.AspNetCore.SignalR

image

vs提示版本冲突

image

这时我们选择低版本即可

image

二、SignalR配置

1、在model中创建一个类MyHub 代码如下

image

public class MyHub:Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user+"["+DateTime.Now.ToLongTimeString()+"]", message);
}
public async Task SendMessageToUser(string user, string message)
{
await Clients.Client(Context.ConnectionId).SendAsync("ReceiveMessage", user + ":" + DateTime.Now.ToLongTimeString()+"]", message);
}
}

</pre>

View Code

2、在Startup中注入SignalR并在Configure中配置路由

image

3、右键项目名=>添加=>添加客户端库

image

image

配置完毕。

三、编码实现

1、修改Views/Home中的Index.cshtml如下

image

</pre>

View Code

2、在js文件见创建一个js文件 chat.js

image

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
connection.on("ReceiveMessage", function (user, message) {
var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
var encodedMsg = user + " says " + msg;
var li = document.createElement("li");
li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);
});
connection.start().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;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});

</pre>

View Code

3、Ctrl+F5 运行出两个网页

image

好书推荐、视频分享，与您一起进步

关注