首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3.2 socket.io即时通讯

vue3.2最新语法使用socket.io实现即时通讯详解

2023-06-20 11:15:01 作者：风中凌乱的男子

这篇文章主要为大家介绍了vue3.2最新语法使用socket.io实现即时通讯详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

socket.io

socket.io是即时通讯必需的插件，要和后端配合使用socket.io才可以，前端使用【socket.io-client】，旨在让你少走弯路～

先安装【socket.io-client】

yarn add socket.io-client -S

安装后再新建ts，以插件形式引入

在utils文件夹下新建socket.ts

代码如下

// 新建ts 以插件形式引入
import io from 'socket.io-client';
export default {
  install: (app: any, { connection, options }) => {
    const socket = io(connection, options);
    app.config.globalProperties.$socket = socket;
    app.provide('socket', socket);
  },
};

在main.ts引入socket.ts

import SocketIO from '/@/utils/socket';
// socket
// 配置
const socketOptions = {
  autoConnect: true, // 自动连接
  transports: ['websocket'], // 指定为websocket连接
  reconnect: true,
  reconnectionAttempts: 5, // 重连次数
};
app.use(SocketIO, {
  connection: 'wss://yyds.it98k.cn',
  options: socketOptions,
});

链接上socket 执行登录方法

一般链接上socket要执行一个登录方法，这个方法一般就调用一次，所以要选择在合适的位置，也就是在刚登陆后立马就要调用，vue2的时候在vuex里getInfo接口里执行登录操作，但是在vue3中this指向比较难搞，又是使用的pinia，就不太好弄了，故我们选择在App.vue里执行登录方法

App.vue代码如下

项目使用的【pinia】

<script setup lang="ts">
  /** 执行socketio登录 看不懂的加我v 1115009958 交流*/
  import { computed } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  const socket: any = inject('socket');
  const userStore = useUserStore();
  const getUserInfo = computed(() => {
    const { info } = userStore.$state;
    return info;
  });
  watch(getUserInfo, (newVal) => {
    socket.emit('login', {
      nickname: newVal.nickname,
      _id: newVal._id,
    });
  });
</script>

ps：watch监听是确保getUserInfo能读取到$state中的数据，再调用socket.emit('login'）方法

触发emit、on方法

如果要触发emit、on方法，在页面中这样做

<script setup lang="ts">
  /** 使用inject通信方法接收socket实例*/
  const socket: any = inject('socket');
  // 使用on监听事件
  socket.on('message', (res: any) => {
      console.log('接收到的数据 ', res);
  });
  // 使用emit发送事件
  socket.emit('sayTo',{ message:"test" });
</script>

以上就是vue3.2最新语法使用socket.io实现即时通讯详解的详细内容，更多关于vue3.2 socket.io即时通讯的资料请关注脚本之家其它相关文章！