前后端分离下使用SignalR

原文地址

后端

新建Webapi项目

创建 ChatHub 类，继承于 Hub

public class ChatHub : Hub
{
    public async Task SendMessage(string user,string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

启用ChatHub，将ChartHub映射到路径 /chathub 下（需要前后端约定）

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    endpoints.MapHub("/chathub");
});

后端启用CORS

8080是前端的端口，前后端分离需要设置跨域，否则无法正常访问

//ConfigureServices
services.AddSignalR();

//Configure
app.UseCors(builder => {
    builder.WithOrigins("http://localhost:8080")
        .AllowAnyMethod()
        .AllowCredentials()
        .AllowAnyHeader();
});

通过刚才的代码，我们将 ChatHub 下的方法映射到路径 /chathub 下

前端

前端引入 @microsoft/signalr，使用 npm install进行安装

"dependencies": {
    "@microsoft/signalr": "3.1.2",
    "core-js": "^3.6.4",
    "element-ui": "^2.13.0",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.2",
    "vue-property-decorator": "^8.3.0",
    "vue-router": "^3.1.5",
    "vuex": "^3.1.2"
  },

具体Element-ui以及路由不再赘述，可以看之前的文章。

新建Chat.vue，设置路由，具体代码如下

 

前端显示如下

import * as signalR from '@microsoft/signalr';

将SignalR引入到当前页，定义hubConnection继承于signalR.HubConnection。

通过withUrl("https://localhost:44342/chatHub")将前端跟后端提供的接口绑定（后端启动端口是44342）。

this.hubConnection.on("ReceiveMessage",(name,message)=>{
    this.textarea1 = this.textarea1.concat( '\r\n' + name + '：' 
    + message);

前端监听 ReceiveMessage 方法，该方法需要和后端提供一样的签名，作用是将接收到的name和message属性打印到页面上。

定义Send方法，将在点击按钮的时候出发Click事件，将信息发送

send(){
        this.hubConnection.send("SendMessage",this.name,this.message);        
    }

具体效果如下

参考

配合使用 ASP.NET Core SignalR 和 TypeScript 以及 Webpack

NetCore + SignalR 实现日志消息推送