vue3 websocket連接 發送數據

先建一個websocket.js放在項目中,內容如下:

var websock = null;
let rec; //斷線重連后,延遲5秒重新創建WebSocket連接  rec用來存儲延遲請求的代碼
let isConnect = false; //連接標識 避免重復連接
let checkMsg = "heartbeat"; //心跳發送/返回的信息 服務器和客戶端收到的信息內容如果如下 就識別為心跳信息 不要做業務處理
let globalSendCallback=()=>{};
let globalGetCallback=()=>{};let createWebSocket = () => {try {initWebSocket(); //初始化websocket連接} catch (e) {console.log("嘗試創建連接失敗");reConnect(); //如果無法連接上webSocket 那么重新連接!可能會因為服務器重新部署,或者短暫斷網等導致無法創建連接}
};//定義重連函數
let reConnect = () => {console.log("嘗試重新連接");if (isConnect) return; //如果已經連上就不在重連了rec && clearTimeout(rec);rec = setTimeout(function () { // 延遲5秒重連  避免過多次過頻繁請求重連createWebSocket();}, 5000);
};
//設置關閉連接
let closeWebSocket = () => {websock.close();
};
//心跳設置
var heartCheck = {timeout: 20000, //每段時間發送一次心跳包 這里設置為20stimeoutObj: null, //延時發送消息對象(啟動心跳新建這個對象,收到消息后重置對象)start: function () {this.timeoutObj = setTimeout(function () {if (isConnect) websock.send(checkMsg);}, this.timeout);},reset: function () {clearTimeout(this.timeoutObj);this.start();}
};// 初始化websocket
function initWebSocket() {// ws地址 -->這里是你的請求路徑var ws = "ws://10.30.2.31:8087/websocket/";websock = new WebSocket(ws)websock.onmessage = function (e) {websocketonmessage(e)}websock.onclose = function (e) {websocketclose(e)}websock.onopen = function () {websocketOpen()heartCheck.start();console.log("連接狀態:", websock.readyState);}// 連接發生錯誤的回調方法websock.onerror = function () {console.log('WebSocket連接發生錯誤')isConnect = false; //連接斷開修改標識reConnect(); //連接錯誤 需要重連}
}// 實際調用的方法
function sendSock(agentData, callback) {console.log(globalSendCallback)globalSendCallback = callbackif (websock.readyState === websock.OPEN) {// 若是ws開啟狀態websocketsend(agentData)} else if (websock.readyState === websock.CONNECTING) {// 若是 正在開啟狀態,則等待1s后重新調用setTimeout(function () {sendSock(agentData, callback)}, 1000)} else {// 若未開啟 ,則等待1s后重新調用setTimeout(function () {sendSock(agentData, callback)}, 1000)}
}function getSock(callback) {console.log(globalGetCallback)globalGetCallback = callback
}
// 數據接收
function websocketonmessage(e) {console.log(e)let O_o = JSON.parse(decodeUnicode(e.data))// console.log(O_o)if (!O_o) {// if (O_o != '連接成功') {heartCheck.reset();} else {// if (O_o.msg == "open success") {//     sessionStorage.setItem("wid", O_o.wid);// } else {//      console.log(globalGetCallback)globalGetCallback(O_o);//注釋記得解開// }}// globalCallback(JSON.parse(e.data))function decodeUnicode(str) {str = str.replace(/\\/g, "%");//轉換中文str = unescape(str);//將其他受影響的轉換回原來str = str.replace(/%/g, "\\");//對網址的鏈接進行處理str = str.replace(/\\/g, "");return str;}
}// 數據發送
function websocketsend(agentData) {console.log(JSON.stringify(agentData))websock.send(JSON.stringify(agentData))
}// 關閉
function websocketclose(e) {console.log(e)isConnect = false; //斷開后修改標識   console.log('連接關閉 (' + e.code + ')')// 顯示確認對話框//  const confirmation = window.confirm('WebSocket連接已關閉,是否重新連接?');//  if (confirmation) {//      // 用戶點擊了確認按鈕,執行重新連接操作//      createWebSocket();//  }// openAlert({ content: value, title:'提示', status: 'error' })// 從本地存儲中獲取日志數據,如果沒有則默認為空數組// const logs = localStorage.getItem('logs');// const currentTime = new Date().toLocaleString();// const newLog = `${currentTime} `+'連接關閉 (' + e.code + ')';// logs.value.unshift(newLog); // 將新的日志消息添加到數組最前面// localStorage.setItem('logs', JSON.stringify(logs.value)); // 保存到本地
}// 創建 websocket 連接
function websocketOpen(e) {console.log('連接成功')}initWebSocket()// 將方法暴露出去
export {sendSock,getSock,createWebSocket,closeWebSocket
}

2,在組件中引用

// WebSocket封裝方法
import * as socketApi from '@/directives/webSocket'socketApi.sendSock({ cmd: "startReport" }); //發送指令,指令是跟后端人員協定的
let getConfigResult = (data)=>{// let res = '{"type": "MatData","log": "","id": "1234452312312","value": "22222222"}'console.log(data);let res = JSON.parse(data);}
socketApi.getSock(getConfigResult); //接收后端推送過來的數據

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/165331.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/165331.shtml
英文地址,請注明出處:http://en.pswp.cn/news/165331.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

MySQL與Redis如何保證數據的一致性

文章目錄 MySQL與Redis如何保證數據的一致性?不好的方案1. 先寫 MySQL,再寫 Redis2. 先寫 Redis,再寫 MySQL3. 先刪除 Redis,再寫 MySQL 好的方案4. 先刪除 Redis,再寫 MySQL,再刪除 Redis5. 先寫 MySQL&am…

C# 數據庫封裝

最近有些地方用到c#,研究了一下,也有數據庫方面的操作,那就繼續封裝,自己用起來好用一點。 數據庫連接 using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Text; using Sys…

Leetcode算法系列| 1. 兩數之和(四種解法)

目錄 1.題目2.題解解法一:暴力枚舉解法二:哈希表解法解法三:雙指針(有序狀態)解法四:二分查找(有序狀態) 1.題目 給定一個整數數組 nums 和一個整數目標值 target,請你在該數組中找出 和為目標值 target 的那 兩個 整數…

『RabbitMQ』入門指南(安裝,配置,應用)

前言 RabbitMQ 是在 AMQP(Advanced Message Queuing Protocol) 協議標準基礎上完整的,可復用的企業消息系統。它遵循 Mozilla Public License 開源協議,采用 Erlang 實現的工業級的消息隊列(MQ)服務器,建立在 Erlang …

產品經理提問常用的ChatGPT通用提示詞模板

如何評估產品市場的潛力和可行性? 如何定義和明確產品的目標用戶和需求? 如何進行競品分析和比較,制定產品的差異化策略? 如何設計產品的功能和特性,滿足用戶需求? 如何制定產品的定價策略和銷售計劃&a…

qml View3D使用介紹

在Qt Quick 3D中,View3D 是一個用于展示 3D 內容的 QML 類型。View3D 允許你將 3D 場景集成到 Qt Quick 2D 用戶界面中,這意味著你可以在傳統的 2D UI 元素(如按鈕、文本和圖像)與 3D 圖形之間無縫地進行整合。 View3D 提供了一個視口,用于渲染 3D 場景。它可以包括多個 …

HTTPS攻擊怎么防御?

HTTPS 簡介 超文本傳輸安全協議( HTTPS )是一種通過計算機網絡進行安全通信的傳輸協議。HTTPS 經由 HTTP 進行通信,但利用 SSL/TLS 來加密數據包。 HTTPS 開發的主要目的,是提供對網站服務器的身份認證,保護交換數據的…

批量將本地N個英文Html文檔進行中文翻譯-操作篇

Unity3D特效百例案例項目實戰源碼Android-Unity實戰問題匯總游戲腳本-輔助自動化Android控件全解手冊再戰Android系列Scratch編程案例軟考全系列Unity3D學習專欄藍橋系列ChatGPT和AIGC 👉關于作者 專注于Android/Unity和各種游戲開發技巧,以及各種資源分…

QtCreator9.02不支持JDK11解決

最終效果 使用Android Studio 下載Android SDK Platform 31與Sources for Android 31 下載Android SDK Build Tools 31.0.0 下載NDK 25.1 ,23.1 ,21.3 重要: 下載Android SDK Command-Line Tools ,選擇10.0或者9.0其中一個版本 其它版本不支持JDK11 ,本例選擇10.0 下載CMak…

如何進行MySQL的主從復制(MySQL5.7)

背景:在一些Web服務器開發中,系統用戶在進行數據訪問時,基本都是直接操作數據庫MySQL進行訪問,而這種情況下,若只有一臺MySQL服務器,可能會存在如下問題 數據的讀和寫的所有壓力都會由一臺數據庫獨…

淺析jdk8所包含的主要特性

至今Java 8仍然是許多開發者首選的JDK版本,Java 8的生態系統非常成熟,許多庫和框架都已經適配了Java 8。遷移到新的Java版本可能需要重新評估和調整現有的依賴關系,這對于一些大型項目可能是一個挑戰。那么Java 8有哪些特性讓多數開發者鐘愛呢…

西米支付:如何設計和構建游戲支付系統?

如何設計和構建游戲支付系統? 目前,游戲開發中最常見的支付方式包括微信支付、支付寶支付和蘋果支付等。今天,我將與大家分享游戲支付系統的架構和設計。 游戲支付的主要業務流程是指游戲玩家在游戲中購買虛擬物品或服務所進行的支付過程。一…

ElasticSearch 7 SQL 詳解

平時使用Elasticsearch的時候,會在Kibana中使用Query DSL來查詢數據.每次要用到Query DSL時都基本忘光了,需要重新在回顧一遍,最近發現Elasticsearch已經支持SQL查詢了(6.3版本以后),整理了下一些用法. 簡介 Elasticsearch SQL是一個X-Pack組件,它允許針對Elasticsearch實時執…

ESP32之避障

ESP32之避障 圖片 程序 int Led27;//定義LED 接口 int buttonpin4; //定義光遮斷傳感器接口 int val;//定義數字變量val void setup() { pinMode(Led,OUTPUT);//定義LED 為輸出接口 pinMode(buttonpin,INPUT);//定義避障傳感器為輸出接口 } void loop() {Serial.begin(9600);…

保姆級 Keras 實現 YOLO v3 一

保姆級 Keras 實現 YOLO v3 一 一. YOLO v3 總覽二. 特征提取網絡特征提取網絡代碼實現 三. 特征融合特征融合代碼實現 四. 網絡輸出模型輸出代碼實現 五. 網絡模型代碼實現六. 代碼下載 如果要給 YOLO 目標檢測算法一個評價的話, 就是快和準, 現在已經到了 v8, 但是我為什么還…

如何開啟MySQL的慢查詢日志

說明:如果需要查看某一條SQL查詢速度慢,并對慢的SQL進行優化,那么開啟MySQL慢查詢日志是一定要做的事情,本文介紹如何開啟MySQL的慢查詢日志; 查看MySQL慢查詢是否開啟 首先,輸入下面的命令,查…

為什么 x86 操作系統從 0x7c00 處開始

0x00:x86 架構 BIOS 引導加載程序中的"0x7C00"之謎 你知道 x86 操作系統中的"0x7C00"這個神奇數字嗎 ? "0x7C00" 是BIOS加載MBR(主引導記錄,磁盤中的第一個扇區)的內存地址。操作系統或引導加載…

2-Linux學習環境搭建

1 Linux學習環境搭建 1.1 虛擬化介紹 # win 機器----》裝一個虛擬化軟件----》虛擬化出linux操作系統# kvm vmware openstack docker k8s # kvm vmware 虛擬化軟件 -運行在linux上,做虛擬化的軟件 -vmware運行在win,linux,商業軟件…

AMEYA360:瑞薩面向高端工業傳感器系統推出高精度模擬前端的32位RX MCU

全球半導體解決方案供應商瑞薩電子(TSE:6723)宣布面向高端工業傳感器系統推出一款全新RX產品——RX23E-B,擴展32位微控制器(MCU)產品線。新產品作為廣受歡迎的RX產品家族的一員,具有高精度模擬前…

hadoop2.x linux集群部署

hadoop2.x 集群部署 下載hadoop需要提前準備好jdk1.8 和rsync 和ssl集群信息解壓安裝配置環境變量配置site配置文件(/hadoop/etc/hadoop目錄下)core-site.xmlhdfs-site.xmlyarn-site.xmlmapred-site.xmlhadoop-env.sh要追加java_home!配置節點slaves 配置免密ssh訪問沒有ssh-co…