vue3.2最新語法使用socket.io實(shí)現(xiàn)即時(shí)通訊詳解
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方法，在頁(yè)面中這樣做
<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)文章！
相關(guān)文章
詳解vue數(shù)據(jù)響應(yīng)式原理之?dāng)?shù)組
這篇文章主要為大家詳細(xì)介紹了vue數(shù)據(jù)響應(yīng)式原理之?dāng)?shù)組，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
談?wù)勔騐ue.js引發(fā)關(guān)于getter和setter的思考
最近因?yàn)楣镜男马?xiàng)目決定使用Vue.js來做，但在使用的過程中發(fā)現(xiàn)了一個(gè)有趣的事情，因?yàn)榘l(fā)現(xiàn)的這個(gè)事情展開了一些對(duì)于getter和setter的思考，具體是什么下面通過這篇文章來一起看看吧，有需要的朋友們可以參考學(xué)習(xí)。2016-12-12
vue依賴包報(bào)錯(cuò)問題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴包報(bào)錯(cuò)問題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
使用vue-antDesign menu頁(yè)面方式(添加面包屑跳轉(zhuǎn))
這篇文章主要介紹了使用vue-antDesign menu頁(yè)面方式(添加面包屑跳轉(zhuǎn)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue-cli3單頁(yè)構(gòu)建大型項(xiàng)目方案
這篇文章主要介紹了vue-cli3單頁(yè)構(gòu)建大型項(xiàng)目方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
使用Vue實(shí)現(xiàn)帶拖動(dòng)和播放功能的時(shí)間軸
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)帶拖動(dòng)和播放功能的時(shí)間軸,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
這篇文章介紹了Vue中的event對(duì)象，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
這篇文章主要給大家介紹了關(guān)于vue3前端獲取文件的絕對(duì)路徑問題解決的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue?全部生命周期組件梳理整理，在創(chuàng)建組件之前使用；在實(shí)例初始化之后,進(jìn)行數(shù)據(jù)偵聽和事件，偵聽器的配置之前同步調(diào)用2022-06-06
vue.js實(shí)現(xiàn)開關(guān)(switch)組件實(shí)例代碼
這篇文章介紹了vue.js實(shí)現(xiàn)開關(guān)(switch)組件的實(shí)例代碼，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06