快捷導(dǎo)航

vue3.2最新語法使用socket.io實(shí)現(xiàn)即時(shí)通訊詳解

更新時(shí)間：2023年06月20日 11:17:03 作者：風(fēng)中凌亂的男子

這篇文章主要為大家介紹了vue3.2最新語法使用socket.io實(shí)現(xiàn)即時(shí)通訊詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

socket.io

socket.io是即時(shí)通訊必需的插件，要和后端配合使用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, // 自動(dòng)連接
  transports: ['websocket'], // 指定為websocket連接
  reconnect: true,
  reconnectionAttempts: 5, // 重連次數(shù)
};
app.use(SocketIO, {
  connection: 'wss://yyds.it98k.cn',
  options: socketOptions,
});

鏈接上socket 執(zhí)行登錄方法

一般鏈接上socket要執(zhí)行一個(gè)登錄方法，這個(gè)方法一般就調(diào)用一次，所以要選擇在合適的位置，也就是在剛登陸后立馬就要調(diào)用，vue2的時(shí)候在vuex里getInfo接口里執(zhí)行登錄操作，但是在vue3中this指向比較難搞，又是使用的pinia，就不太好弄了，故我們選擇在App.vue里執(zhí)行登錄方法

App.vue代碼如下

項(xiàng)目使用的【pinia】

<script setup lang="ts">
  /** 執(zhí)行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監(jiān)聽是確保getUserInfo能讀取到$state中的數(shù)據(jù)，再調(diào)用socket.emit('login'）方法

觸發(fā)emit、on方法

如果要觸發(fā)emit、on方法，在頁面中這樣做

<script setup lang="ts">
  /** 使用inject通信方法接收socket實(shí)例*/
  const socket: any = inject('socket');
  // 使用on監(jiān)聽事件
  socket.on('message', (res: any) => {
      console.log('接收到的數(shù)據(jù) ', res);
  });
  // 使用emit發(fā)送事件
  socket.emit('sayTo',{ message:"test" });
</script>

以上就是vue3.2最新語法使用socket.io實(shí)現(xiàn)即時(shí)通訊詳解的詳細(xì)內(nèi)容，更多關(guān)于vue3.2 socket.io即時(shí)通訊的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: