uniapp 使用Stomp搭建WebSocket

uniapp中使用Stomp WebSocket实战

最新推荐文章于 2025-06-18 19:57:26 发布

原创最新推荐文章于 2025-06-18 19:57:26 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #javascript #node.js

在uniapp开发中，使用Stomp和WebSocket时遇到H5与手机端兼容问题，详细介绍了如何解决H5运行正常但手机端报错的状况，提供了避免使用SockJS的解决方案，并分享了多个参考资料链接，帮助开发者实现uniapp的WebSocket通信。

在使用 Stomp 的过程中遇到了好多坑，H5可以正常运行，但是手机上就报错了
首先使用H5的写法Stomp + SockJS

//原生window的WebSocket
import {WebSocketPolyfill} from '@/common/js/websocket-polyfill.js'   
//npm下载的插件
import SockJS from "sockjs-client"
import Stomp from 'stompjs'

let global = {}
global.WebSocket = window.WebSocket = WebSocketPolyfill;
const websocket = new SockJS(`${config.url_config}/tiwang-websocket/ws?Blade-Auth=bearer ${this.token}`,
	null, {
		timeout: 15000
	});
const stompClient = this.stompClient = Stomp.over(websocket);
stompClient.debug = null; //不打印日记
// console.log('stompClient ===>', stompClient)
stompClient.heartbeat.outgoing = 5000; // 若使用STOMP 1.1 版本，默认开启了心跳检测机制（默认值都是10000ms）
stompClient.heartbeat.incoming = 5000; // 客户端从服务端接收心跳包
return
stompClient.connect({},
	(res) => {
		this.sub = stompClient.subscribe(`/topic/public/${this.code}`, (e) => {
			let data = JSON.parse(e.body)
			// console.log('data  ==>', data )
		})

	},
	(error) => {
		console.error('error', error)
	}
);

按照这样写在编辑器上可以运行，但是在手机上调试SockJS引入会报错，所以uniapp上不能使用SockJS

//原生uniapp的WebSocket
import {WebSocket} from '@/common/js/websocket-uni.js';
//下面的参考文件里可以找到
import {Stomp} from '@/common/js/stomp.js'

// #ifdef APP-PLUS
Stomp.setInterval = function(interval, f) {
	return setInterval(f, interval);
};
Stomp.clearInterval = function(id) {
	return clearInterval(id);
};
// #endif
// #ifdef H5
let global = {}
global.WebSocket = window.WebSocket = uni.webSocketBackup;
// #endif
let socket = new WebSocket(`${config.ws}/tiwang-websocket/ws2?Blade-Auth=bearer ${this.token}`)
var socketTask = Stomp.over(socket)
console.log('socketTask ==>',socketTask)
// socketTask.debug = null; //不打印日记
socketTask.connect({}, (res) => {
	console.log('res ===>', res)
	this.sub = socketTask.subscribe(`/topic/public/${this.code}`, e => {
		let data = JSON.parse(e.body)
		if (data.status >= 11 && data.status <= 15) {
			// console.log('订阅 ==>', data.data)
			this.sockObj = {...this.sockObj, ...data.data}
		}
	});
});
this.socketTask = socketTask

这样就可以调试

结束连接

beforeDestroy() {
	console.log('订阅关闭------------')
	console.log('this.sub ===>', this.sub)
	// 取消订阅
	this.sub.unsubscribe();
	//关闭连接
	setTimeout(() => {
		this.socketTask.disconnect()
	}, 1000)
}

参考文件
https://www.cnblogs.com/goloving/p/10746378.html
https://blog.youkuaiyun.com/weixin_42353996/article/details/112233431
https://www.jianshu.com/p/6d5f3933fb8b
https://blog.youkuaiyun.com/gw5205566/article/details/104757249
https://www.cnblogs.com/goloving/p/14734630.html
https://www.jianshu.com/p/9f11a606960d