第一步：引入依赖

yarn add @aspnet/signalr --dev

第二步：新建signal.ts文件，复制如下代码，做对应更改

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

const socket = new signalR.HubConnectionBuilder()
  .withUrl('http://192.168.1.247:9001/chatHub', {})//使用你们后台给你的地址替换
  .build();

//  自动重连
async function start() {
  try {
    await socket.start();
    console.log('connected');
  } catch (err) {
    console.log(err);
    setTimeout(() => start(), 100);
  }
}

socket.onclose(async () => {
  await start();
});

export default {
  install: (Vue: any) => {
    Vue.prototype.$socket = socket;
  }
};

第三步：在main.ts中引入signlar

import Vue from 'vue';
import socket from '@/core/utils/signalSocket/signal';
Vue.use(socket);
//因为用的是ts，所以我们需要在shims-vue.d.ts中声明一下$socket
import Vue from 'vue';
declare module 'vue/types/vue' {
  interface Vue {
    $socket: any;
  }
}

第四步：就是在你需要的页面进行对应的发送接收处理，我们来看个例子

//在页面的mounted中,其中ReceiveMyMessage，ReceiveMyMessage，ConfirmReceive，ReceiveOnlineUser，Login都是后台定义的方法
mounted(){
   this.$socket
      .start()
      .then(() => {
        // 连接成功，用户上线，告知后台用户上线了
        this.$socket
          .invoke('Login', this.$store.state.user.Id)
          .catch((err: any) => {
            return console.error(err.toString());
          });
      })
      .catch((err: any) => {
        return console.error(err.toString());
      });
    //收到群消息
    this.$socket.on('ReceiveMessage', (obj: any) => {
      this.infoList.push(obj);
    });
    //收到呼叫我的消息
    this.$socket.on('ReceiveMyMessage', (obj: any) => {
      console.log('听说有人@我：' + JSON.stringify(obj));
      this.$notify({
        title: '消息提醒',
        message: obj.FromwhoName + '@你',
        duration: 15000
      });
    //这里告诉后台是谁艾特我
      this.$socket.invoke('ConfirmReceive', obj.Id).catch((err: any) => {
        return console.error(err.toString());
      });
    });
    //获取所有在线用户,
    this.$socket.on('ReceiveOnlineUser', (obj: any) => {
      this.onlineList = obj;
      obj.map((item: any) => {
        this.onlieId.push(item.key);
      });
    });
}

至此一个通过socket获取在线用户，用户发消息，接收消息，艾特我都OK了，当然现在vue-socket.io好像常用型，但可能我没用对感觉不好使