uniapp使用WebSocket uniapp使用WebSocket Uniapp整合WebSocket uniapp使用 websocket

前言

代码中的示例只在 H5、APP环境下成功运行，小程序环境下如果无效，需要使用预编译 - 条件性的编译，适配 小程序环境

// #ifdef MP-WEIXIN
// #endif

Uni-app 支持多种预编译指令，包括但不限于：

• #ifdef H5：针对 Web H5页面。
• #ifdef APP-PLUS：针对原生应用（Android 和 iOS）。
• #ifdef MP-WEIXIN：针对微信小程序。
• #ifdef MP-ALIPAY：针对支付宝小程序。
• #ifdef MP-Baidu：针对百度小程序。
• #ifdef MP-Toutiao：针对字节跳动小程序。
• #ifdef MP-QQ：针对 QQ 小程序。
• #ifdef MP-Kuaishou：针对快手小程序。
• #ifdef MP-JD：针对京东小程序。

1、Socket.js

// config.js 文件位于 uniapp根目录全局文件，如果没有，则固定将socket地址手动写死
import config from '@/config'const socketUrl = config.baseSocketUrl// 重试最大次数, 避免出现网络错误停留在页面 出现无限socket重连导致 浏览器卡死
const retryMaxTimes = 10let retryTimes = 1class WebSocketClass {constructor() {this.lockReconnect = false; // 是否开始重连this.wsUrl = ""; // ws 地址// this.globalCallback = this.globalCallback(); // 回调方法this.userClose = false; // 是否主动关闭this.createWebSocket(socketUrl);}createWebSocket(url) {// #ifdef H5if (typeof(WebSocket) === 'undefined') {this.writeToScreen("您的浏览器不支持WebSocket，无法获取数据");return false}// #endif// #ifdef APP-PLUSif (typeof(uni.connectSocket) === 'undefined') {this.writeToScreen("您的浏览器不支持WebSocket，无法获取数据");return false}// #endifthis.wsUrl = url;try {// 创建一个this.ws对象【发送、接收、关闭socket都由这个对象操作】// #ifdef H5this.ws = new WebSocket(this.wsUrl);// 更改消息数据格式为 arraybufferthis.ws.binaryType = 'arraybuffer';this.initEventHandle();// #endif// #ifdef APP-PLUSthis.ws = uni.connectSocket({url: this.wsUrl,success(data) {console.log("websocket连接成功");// 更改消息数据格式为 arraybufferthis.ws.binaryType = 'arraybuffer';this.initEventHandle();},});// #endif} catch (e) {this.reconnect(url);}}// 初始化initEventHandle() {var _this = this_this.ws.binaryType = 'arraybuffer';console.info(_this)/*** 监听WebSocket连接打开成功*/// #ifdef H5_this.ws.onopen = (event) => {console.log("WebSocket连接打开");};// #endif// #ifdef APP-PLUS_this.ws.onOpen(res => {console.log('WebSocket连接打开');});// #endif/*** 连接关闭后的回调函数*/// #ifdef H5_this.ws.onclose = (event) => {if (!_this.userClose) {_this.reconnect(_this.wsUrl); //重连}};// #endif// #ifdef APP-PLUS_this.ws.onClose(() => {if (!_this.userClose) {_this.reconnect(_this.wsUrl); //重连}});// #endif/*** 报错时的回调函数*/// #ifdef H5_this.ws.onerror = (event) => {if (!_this.userClose) {_this.reconnect(_this.wsUrl); //重连}};// #endif// #ifdef APP-PLUS_this.ws.onError(() => {if (!_this.userClose) {_this.reconnect(_this.wsUrl); //重连}});// #endif/*** 收到服务器数据后的回调函数*/// #ifdef H5_this.ws.onmessage = (event) => {if (_this.isJSON(event.data)) {const jsonobject = JSON.parse(event.data)_this.globalCallback(jsonobject)} else {_this.globalCallback(event.data)}};// #endif// #ifdef APP-PLUS_this.ws.onMessage(event => {if (_this.isJSON(event.data)) {const jsonobject = JSON.parse(event.data)_this.globalCallback(jsonobject)} else {_this.globalCallback(event.data)}});// #endif}// 关闭ws连接回调reconnect(url) {if (this.lockReconnect) return;this.ws.close();this.lockReconnect = true; // 关闭重连，没连接上会一直重连，设置延迟避免请求过多if (retryTimes < retryMaxTimes) {retryTimes = retryTimes + 1console.info('WebSocket当前重试次数', retryTimes)setTimeout(() => {this.createWebSocket(url);this.lockReconnect = false;}, 1000);}else{console.info('WebSocket当前已经重试最大次数，依旧无法连接，不在重试，请检查网络是否正常')}}// 发送信息方法webSocketSendMsg(msg) {this.ws.send(JSON.stringify(msg));}// 获取ws返回的数据方法getWebSocketMsg(callback) {this.globalCallback = callback}globalCallback(data) {return new Promise((resolve, reject) => {resolve(data); // 成功时调用resolve});}// 关闭ws方法closeSocket() {if (this.ws) {this.userClose = true;this.ws.close({success(res) {console.log("关闭成功", res)},fail(err) {console.log("关闭失败", err)}});}}writeToScreen(massage) {console.log(massage);}isJSON(str) {if (typeof str == 'string') {try {var obj = JSON.parse(str);if (typeof obj == 'object' && obj) {return true;} else {return false;}} catch (e) {// console.log('error：'+str+'!!!'+e);return false;}}// console.log('It is not a string!')}
}
export default WebSocketClass;

2、main.js引入

import WS from "@/utils/socket.js"
const ws = new WS()Vue.prototype.$ws = wsconst app = new Vue({...App
})

3、组件中调用

	export default {data() {return {}},mounted() {const _t = this// 发送消息_t.$ws.webSocketSendMsg({'msg': 'hello'})// 监听服务端发送的消息_t.$ws.getWebSocketMsg((res) => {console.info('接收消息', res)})}}