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

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

• 1. 先安装【socket.io-client】

yarn add socket.io-client -S

• 1. 安装后再新建ts，以插件形式引入
• 2.1 在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);
  },
};

• 1. 然后在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,
});

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

所有教程均是小编开发工作中遇到的问题，并且亲测有效的。如果对亲有帮助，送个礼物鼓励下小编吧，摸摸哒～