美文网首页
前端实现聊天室功能,使用signalr

前端实现聊天室功能,使用signalr

作者: 风慕李 | 来源:发表于2020-04-07 15:36 被阅读0次

第一步:引入依赖

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好像常用型,但可能我没用对感觉不好使

相关文章

网友评论

      本文标题:前端实现聊天室功能,使用signalr

      本文链接:https://www.haomeiwen.com/subject/thlnphtx.html