在vue中如何使用signalR对接数据

 ① 通过npm安装SignalR：

npm install --save @microsoft/signalr

②在界面中引入包：

import * as signalR from '@microsoft/signalr'

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

export default {
  data() {
    return {
      connection: "",
      user: userInfo.value.nickName,
      message: "",
      msgList: []
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      // 创建SignalR连接
      this.connection = new signalR.HubConnectionBuilder()
        .withUrl("http://localhost:8777/msghub", {})
        .configureLogging(signalR.LogLevel.Error)
        .build();

      // 启动SignalR
      this.connection.start();
    }
  }
};

 ④发送消息封装

sendMsg() {
      this.connection.invoke("SendChat", this.user, this.message);
      console.log(this.msgList);
    }

⑤定义接收的方法

this.connection.on("ReceiveMessage", data => {
        this.msgList.push(data);
        console.log(this.msgList);
      });

完整代码：

 <div v-for="(v, k) in msgList" :key="k" class="text item">{{ v.user + ":" + v.message }}</div>

<script >
import useUserStore from '@/store/modules/user'
import * as signalR from '@microsoft/signalr'

const userInfo = computed(() => {
  return useUserStore().userInfo
})


export default {
  data() {
    return {
      connection: "",
      user: userInfo.value.nickName,
      message: "",
      msgList: []
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.connection = new signalR.HubConnectionBuilder()
        .withUrl("http://chatvue.aerwen.net/msghub", {})
        .configureLogging(signalR.LogLevel.Error)
        .build();
      this.connection.on("ReceiveMessage", data => {
        this.msgList.push(data);
        console.log(this.msgList);
      });
      this.connection.start();
    },
    sendMsg() {
      this.connection.invoke("SendChat", this.user, this.message);
      console.log(this.msgList);
    }
  }
};
</script>