uniapp APP websocket使用

uniapp APP websocket使用

本文章只是小弟在開發程序中所做的需求，踩坑過順便寫個博客用來做下筆記，如果代碼有什么不足之處，希望大佬們指出，謝謝！
感覺能解決了問題的，動動小指頭點個贊~ O(∩_∩)O

** 1.此處說下我的需求：是通過websocket接受后端傳遞的資料，賦值到input輸入框，然后再進行一系列的操作，如果websocket鏈接失敗則彈窗提示，并且無限建立心跳鏈接，不允許斷開，廢話不多直接代碼截圖，本demo引入uview庫，需要demo在文章末尾會寫鏈接，**

websocket主要步驟：使用uniapp官網提供的API建立websocket鏈接，進入連接監聽，在失敗的監聽中設定定時器定時去發送連接，直到服務器連接成功，寫的程序中踩的坑莫名其妙，忘了如何描述，如果哪里寫得不好請指點，第一次寫，

1、以下是html 呼叫的示例，代碼洗掉了許多無關代碼，只需要看呼叫方法就行了，

<template>
	<view class="container">
		<!--  需求:通過websocket實時獲取資料，賦值到輸入框 ，如果websocket鏈接失敗則彈窗警告-->
		  <view class="content-left">
			     <!-- 掃描條碼 -->
				 <view class="textFontSize scan-container">
						<view class="mr-2 color-red font-w-b" style="font-size: 35rpx;">掃描條碼:</view>
						<view class="scanBox flex-1 mr-1">
								<input class="flex-1 pl-2" type="text" confirm-type="search" placeholder="請掃描載具條碼" v-model="scanCode"/>
						</view>
						<view class="scan-btn">
							<text class="iconfont icon-dagou"></text>
							<text class="ml-2">掃描提交</text>
						</view>
				 </view>
				 
		  </view>  
		   <!-- websocket連接失敗彈窗 -->
		   <u-mask :show="socketShow" >
		   		<view class="warp">
		   			<u-tag :text="webtext" mode="dark" class="warp-tag" type="error"/>
		   		</view>
		   	</u-mask>
	</view>
</template>
<script>

import { websocetObj } from '@/utils/websocet/websocet.js';

export default {
data() {
	return {
		     socketShow:false,
			webtext:'',
			
	  }
},
		methods: {
			//websocet函式回呼：回傳監聽的資料
			getWebsocetData(val){
				console.log(val,'函式回呼');
				this.scanCode = val;
			},
			//websocet函式拋錯： 回傳錯誤資訊 用于用戶提示
			getWebsocetError(err){
				this.socketShow = err.isShow;
			    this.webtext = err.messge;
				console.log('websocet函式拋錯',this.socketShow);
			},
			//websocet函式成功進入： 監聽連接狀態，在失敗的時候彈窗提示，具體需求看自身情況
			onErrorSucceed(val){
				this.socketShow = val.isShow;
				console.log('websocet函式成功進入',this.socketShow);
			}   
		},
		mounted() {
		},
		onLoad() {
	    // 在onload的時候呼叫，創建webscoet連接物件，引數分別為：url、獲取后端回傳資料、監聽websocket的鏈接失敗回傳的報錯、監聽鏈接狀態，回傳布林值
			websocetObj.sokcet('ws://192.168.xxxx',this.getWebsocetData,this.getWebsocetError,this.onErrorSucceed)
		
    },
    //離開頁面銷毀websocket
		beforeDestroy() {
			websocetObj.stop();
	   },
	}
</script>

2、以下是JS封裝的代碼

let isSocketClose=false;    // 是否關閉socket
let reconnectCount=5;    // 重連次數
let heartbeatInterval="";   // 心跳定時器
let socketTask = null;//websocket物件

let  againTimer = null;//斷線重連定時器

//此處變數用于斷線重連的呼叫傳參
let url = null; 
let onReFn = null;
let onSucFn = null;
let onErrFn = null;

/**
 * sockeUrl：websocet的地址
 * onReceive：訊息監聽的回呼
 * one rrorEvent：拋出錯誤的回呼，且彈窗連接失敗的提示框
 * one rrorSucceed：拋出成功回呼，主要用于隱藏連接失敗的提示框
 * */
const sokcet= (sockeUrl = 'ws://192.168.xxx' ,onReceive,onErrorEvent,onErrorSucceed)=> {
	           url = sockeUrl;
			   onReFn= onReceive;
			   onErrFn= one rrorEvent;
			   onSucFn= one rrorSucceed;
			   isSocketClose=false; 
	          //判斷是否有websocet物件，有的話清空
	           if(socketTask){
				   socketTask.close();
				   socketTask = null;
				   clearInterval(heartbeatInterval);
			   }
	
			   //WebSocket的地址
				// 【非常重要】必須確保你的服務器是成功的,如果是手機測驗千萬別使用ws://127.0.0.1:9099【特別容易犯的錯誤】
				let url = sockeUrl
				// 連接
			socketTask = uni.connectSocket({
					url: url,
					success(data) {
								console.log("websocket連接成功");
								clearInterval(againTimer)//斷線重連定時器
							},
					fail: (err) => {
						console.log("報錯",err);
					}
				});
				
				// 連接打開
				socketTask.onOpen((res)=>{
					console.log('WebSocket打開');
					clearInterval(againTimer)//斷線重連定時器
					 onErrorSucceed({isShow:false}) // 用于提示框的隱藏
					heartbeatInterval && clearInterval(heartbeatInterval);
					// 10秒發送一次心跳
					heartbeatInterval = setInterval(() => {
						sendMsg('心跳ing')
					}, 1000*10)
				})
				 // 監聽連接失敗
				socketTask.onError((err)=>{
					console.log('WebSocket連接打開失敗，請檢查',err);
					//停止發送心跳
					clearInterval(heartbeatInterval)
					//如果不是人為關閉的話，進行重連
					if (!isSocketClose) { 
						reconnect(url,onErrorEvent)
					}
				})
			 
				// // 監聽連接關閉 -
				socketTask.onClose((e) => {
							console.log('WebSocket連接關閉！');
							clearInterval(heartbeatInterval)
							if (!isSocketClose) {
								reconnect(url,onErrorEvent)
							}
					})

				// 監聽收到資訊
				socketTask.onMessage((res) => {
						uni.hideLoading()
						console.log(res,'res監聽收到資訊')
						let serverData = res.data
						//與后端規定好回傳值分別代表什么，寫業務邏輯
						  serverData && onReceive(serverData);
				});
				
			
}

	const reconnect = (url,onErrorEvent)=>{
				 console.log('進入斷線重連',isSocketClose);
				     clearInterval(againTimer)//斷線重連定時器
				     clearInterval(heartbeatInterval);
					 socketTask.close(); // 確保已經關閉后再重新打開
					 socketTask = null;
					onErrorEvent({isShow:true,messge:'掃描頭服務正在連接...'})
					// 連接  重新呼叫創建websocet方法
			againTimer	= setInterval(()=>{
					 sokcet(url,onReFn,onErrFn,onSucFn)
					 console.log('在重新連接中...');
				 },1000*5)
					
										
		}	

  const sendMsg = (msg)=>{   //向后端發送命令
                msg = JSON.stringify(msg)
                try{
                    //通過 WebSocket 連接發送資料
                    socketTask.send({
                        data: msg
                    });
                }catch(e){
                    socketTask.close({
						success(res) {
							console.log("關閉成功", res)
						},
						fail(err) {
							console.log("關閉失敗", err)
						}
					})

                }
            }
// 關閉websocket【必須在實體銷毀之前關閉,否則會是underfined錯誤】beforeDestroy() {websocetObj.stop();}
			
const stop = ()=>{
	clearInterval(heartbeatInterval);
	clearInterval(againTimer)//斷線重連定時器
	socketTask.close(); // 確保已經關閉后再重新打開
	socketTask = null;

}
 export const websocetObj = {
 	sokcet,
 	stop,
	sendMsg
 };
 

本文章的demo案例鏈接(里面包含了uniapp在線預覽pdf的操作，只查看websocket就行了)：https://gitee.com/ZhouLoveBrother/uniapp-websocket-pdf，
關于uniapp app 在線預覽pdf文章：https://blog.csdn.net/ZhouLoverBrother/article/details/111148025