vue使用socket與服務(wù)端進(jìn)行通信的代碼詳解
更新時(shí)間：2023年09月24日 10:35:10 作者：謹(jǐn)言的鼠貓
這篇文章主要給大家介紹了vue如何使用socket與服務(wù)端進(jìn)行通信的相關(guān)資料,在Vue中我們可以將Websocket類封裝成一個Vue插件,以便全局使用,需要的朋友可以參考下
1、定義socket
var ws = new WebSocket('wss://地址');2、進(jìn)行連接，同時(shí)每5秒鐘發(fā)送心跳一次
ws.onopen = () => {
console.log('@open');
// params為與服務(wù)端定義好的參數(shù)
ws.send(JSON.stringify(params));
this.sendTimmer = setInterval(function () {
ws.send('Hi Server!');
}, 5000);
};3、獲取服務(wù)端發(fā)送來的信息，進(jìn)行處理
ws.onmessage = (event) => {
console.log('@message:', event);
try {
const data = JSON.parse(event.data);
if (data.end) {
//約定的單條消息傳遞結(jié)束
} else {
// 進(jìn)行數(shù)據(jù)處理
}
} catch (err) {
// 數(shù)據(jù)錯誤處理
ws.close();
console.error(err);
}
if (event.data == '[DONE]') {
// 消息傳遞結(jié)束
this.sendTimmer && clearInterval(this.sendTimmer);
ws.close();
}
};4、關(guān)閉socket
ws.onclose = (event) => {
console.log('@close:', event);
this.sendTimmer && clearInterval(this.sendTimmer);
ws.close();
};5、判斷socket發(fā)送錯誤
ws.onerror = (event) => {
console.error('error:', event);
// 進(jìn)行錯誤類型判斷，展示不同信息
ws.close();
};到此這篇關(guān)于vue使用socket與服務(wù)端進(jìn)行通信的代碼詳解的文章就介紹到這了,更多相關(guān)vue socket服務(wù)端通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-cli是什么及創(chuàng)建vue-cli項(xiàng)目的方法
vue-cli是 vue 官方提供的、快速生成 vue 工程化項(xiàng)目的工具，支持創(chuàng)建vue2和vue3的項(xiàng)目，本文給大家詳細(xì)講解vue-cli是什么及創(chuàng)建vue-cli項(xiàng)目的方法，感興趣的朋友跟隨小編一起看看吧2023-04-04
這篇文章主要給大家介紹了關(guān)于Vue前端生成UUID的相關(guān)資料,前端需要生成一個唯一標(biāo)識符作為ID時(shí),可以使用Vue UUID插件,比如生成訂單號、用戶ID等等,需要的朋友可以參考下2023-09-09
vue省市區(qū)三聯(lián)動下拉選擇組件的實(shí)現(xiàn)
本篇文章主要介紹了vue省市區(qū)三聯(lián)動下拉選擇組件的相關(guān)知識。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
在這篇文章中,我們將學(xué)習(xí)一下 Vue3 的全局組件注冊是如何實(shí)現(xiàn)的,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁欄效果，分頁欄設(shè)計(jì)的步驟與實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
vue自定義tap指令及tap事件的實(shí)現(xiàn)
Vue提供自定義實(shí)現(xiàn)指令的功能, 和組件類似,可以是全局指令和局部指令,這篇文章主要介紹了vue自定義tap指令及tap事件的實(shí)現(xiàn) ,需要的朋友可以參考下2018-09-09
使用vue-cli腳手架工具搭建vue-webpack項(xiàng)目
這篇文章主要介紹了使用vue-cli腳手架工具搭建vue-webpack項(xiàng)目，通過幾個默認(rèn)的步驟幫助你快速的構(gòu)建Vue.js項(xiàng)目。非常具有實(shí)用價(jià)值，需要的朋友可以參考下2019-01-01
vue 使用鼠標(biāo)滾動加載數(shù)據(jù)的例子
今天小編就為大家分享一篇vue 使用鼠標(biāo)滾動加載數(shù)據(jù)的例子，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue-preview動態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實(shí)現(xiàn)
這篇文章主要介紹了vue-preview動態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue-axios-post數(shù)據(jù)后端接不到問題解決
這篇文章主要介紹了Vue-axios-post數(shù)據(jù)后端接不到問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01