在vue中如何使用signalR接收后台数据

① 通过npm安装SignalR：

npm install --save @aspnet/signalr

②在界面中引入包：

const signalR = require("@aspnet/signalr");

或者

import * as signalR from "@aspnet/signalr"

③在created中创建连接并注册方法（参数需要和后端约定好）

this.signal = new signalR.HubConnectionBuilder()
    .withUrl('http://128.138.3.137:54087/myHub', {}) // 地址为服务器地址
    .withAutomaticReconnect() 
    .build()
    
    // 定义后端调用的方法
    this.signal.on("ReceiveMsg", this.receiveData);

④连接测试

this.signal.start().then(() => {
    console.log('连接成功');
 }).catch(()=>{
    console.log('连接失败');
 })

⑤定义接收的方法

receiveData(msgInfo){
     this.data = msgInfo;
 },

后端发送信息后，前端无需操作就可实现数据的实时接收
完整代码：

<template>
   <div id="msgPanel">
        <p>{{data}}</p>
	 </div>
</template>
<script>
export default {
  data() {
    //这里存放数据
    return {
		signal: null,
		data: "",
    };
  },
  //方法集合
  methods: {
  	// 接收数据
    receiveData(msgInfo){
        this.data = msgInfo;
    },
  };
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
	 this.signal = new signalR.HubConnectionBuilder()
	//服务器地址
    .withUrl('http://128.138.3.137:54087/myHub', {})
    .withAutomaticReconnect() 
    .build()
    // 定义后端调用的方法
    this.signal.on("ReceiveMsg", this.receiveData);
     this.signal.start().then(() => {
            console.log('连接');
        }).catch(()=>{
            console.log('连接失败');
        })
  },
</script>

这是最简单的接收方法，项目中使用的话还是需要封装一下