前后端分离下使用SignalR

Posted 2021-03-05 imstrive

原文地址

后端

新建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>("/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，设置路由，具体代码如下

<template>
  <div class="hello">
    <!-- <img alt="Vue logo" src="../assets/logo.png">     -->
    <el-input type="textarea" :rows="10" v-model="textarea1" style="width:45%">
    </el-input>
    <div>
        <el-input v-model="name" placeholder="姓名" style="width:200px"></el-input>
        <el-input v-model="message" placeholder="信息" style="width:200px"></el-input>
            <el-button type="primary" @click="send">发送</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from ‘vue-property-decorator‘;
import * as signalR from ‘@microsoft/signalr‘;

@Component
export default class Chat extends Vue {
  @Prop() private msg!: string;
    // var divMessage: htmlDivElement = document.querySelector(".hello");
    private textarea1 = ‘1231‘;
    private name= ‘‘;
    private message= ‘‘;
    private hubConnection: signalR.HubConnection  = new signalR.HubConnectionBuilder()
                        .withUrl("https://localhost:44342/chatHub")
                        .withAutomaticReconnect()
                        //.configureLogging(signalR.LogLevel.Information)
                        .build();

    mounted() {
        this.start();

        this.hubConnection.on("ReceiveMessage",(name,message)=>{
            this.textarea1 = this.textarea1.concat( ‘
‘ + name + ‘：‘ 
            + message);

        });
    }

    start(): void {
        this.hubConnection.start()
            .then(a=>{
                if(this.hubConnection.connectionId){                    //this.hubConnection.invoke("SendMessage",this.name,this.message).catch(err=>console.log(err.toString()));
                }
            });

    }  

    send(){
        this.hubConnection.send("SendMessage",this.name,this.message);        
    }
}
</script>

 

前端显示如下

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( ‘
‘ + name + ‘：‘ 
    + message);

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

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

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

具体效果如下

参考

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

NetCore + SignalR 实现日志消息推送