- 创建对应通信的Hub类
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
namespace SignalRChat.Hubs
{
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
}
2. 注入相关的服务
//Startup.cs文件中添加
using SignalRChat.Hubs;
//在ConfigureServices方法中添加
services.AddSignalR();
//在Configure方法中添加
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapHub<ChatHub>("/chatHub");
});
-
跨域
Startup.cs文件中Configure方法中添加
app.UseCors(option => option.WithOrigins("http://localhost").AllowCredentials().AllowAnyMethod().AllowAnyHeader()); //配置跨域 -
获取客户端依赖的库
客户端需要用到的js文件可以通过如下方法获取(不要直接使用其他文档中给定的cdn地址，会有404的问题)
在“解决方案资源管理器”>中，右键单击项目，然后选择“添加”“客户端库”。
在“添加客户端库”对话框中，对于“提供程序”，选择“unpkg”。
对于“库”，输入 @microsoft/signalr@latest。
选择“选择特定文件”，展开“dist/browser”文件夹，然后选择 signalr.js 和 signalr.js。
将“目标位置”设置为 wwwroot/js/signalr/
选择“安装”
-
客户端测试代码
记得调整.withUrl中对应的url和端口
<!DOCTYPE html>
<html>
<head>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.0/signalr.js"></script> -->
<script src="signalr.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-2">User</div>
<div class="col-4"><input type="text" id="userInput" /></div>
</div>
<div class="row">
<div class="col-2">Message</div>
<div class="col-4"><input type="text" id="messageInput" /></div>
</div>
<div class="row"> </div>
<div class="row">
<div class="col-6">
<input type="button" id="sendButton" value="Send Message" />
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-6">
<ul id="messagesList"></ul>
</div>
</div>
<script>
const connection = new signalR.HubConnectionBuilder()
//.withUrl("/chathub")
.withUrl("http://127.0.0.1:5000/chatHub")
.configureLogging(signalR.LogLevel.Information)
.build();
async function start() {
try {
await connection.start();
console.log("SignalR Connected.");
} catch (err) {
console.log(err);
setTimeout(start, 5000);
}
};
connection.onclose(async () => {
await start();
});
connection.on("ReceiveMessage", function (user, message) {
var li = document.createElement("li");
document.getElementById("messagesList").appendChild(li);
// We can assign user-supplied strings to an element's textContent because it
// is not interpreted as markup. If you're assigning in any other way, you
// should be aware of possible script injection concerns.
li.textContent = `${user} says ${message}`;
});
document.getElementById("sendButton").addEventListener("click", function (event) {
connection.invoke("SendMessage", "t", "hh").catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});
// Start the connection.
start();
</script>
</body>
</html> -
注意
因为涉及到跨域，所以web的测试页面需要发布才能使用
同时要保证跨域的配置正确
app.UseCors(option => option
.SetIsOriginAllowed(f => true)
//.AllowAnyOrigin()
//.WithOrigins("http://localhost")
.AllowCredentials()
.AllowAnyMethod().AllowAnyHeader()); //配置跨域 ![Thrift开发 之 windows上安装[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)