socket.io是即时通讯必须的插件，要和后端共同利用socket.io才可以，前端利用【socket.io-client】，旨在让你少走弯路～
yarn add socket.io-client -S
- 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); },};
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要实行一个登录方法，这个方法一样平常就调用一次，以是要选择在符合的位置，也就是在刚登岸后立马就要调用，vue2的时间在vuex里getInfo接口里实行登录利用，但是在vue3中this指向比力难搞，又是利用的pinia，就不太好弄了，故我们选择在App.vue里实行登录方法
<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'）方法
<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> |
