uniapp 使用Stomp搭建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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue 3中使用stomp-websocket,你可以按照以下步骤进行操作: 1. 首先,你需要安装stompjs和sockjs-client依赖。在你的Vue项目根目录下,打开终端并运行以下命令: ```shell npm install stompjs sockjs-client --save ``` 2. 在你需要使用stomp-websocket的组件中,引入stompjs和sockjs-client库。你可以在Vue组件的`<script>`标签中添加以下代码: ```javascript import { Stomp } from 'stompjs'; import SockJS from 'sockjs-client'; ``` 3. 接下来,你可以在组件的方法中创建和管理stomp客户端连接。例如,在`created`钩子函数中,可以添加以下代码: ```javascript created() { const socket = new SockJS('http://localhost:8080/your-websocket-endpoint'); // 替换为你的WebSocket端点URL this.stompClient = Stomp.over(socket); this.stompClient.connect({}, this.onConnect, this.onError); }, methods: { onConnect() { // 连接成功后的处理逻辑 }, onError(error) { // 连接失败后的处理逻辑 } } ``` 4. 在`onConnect`方法中,你可以订阅并接收消息。例如: ```javascript onConnect() { this.stompClient.subscribe('/your-destination', (message) => { // 处理收到的消息 console.log(message.body); }); } ``` 这里的`/your-destination`是你想要订阅的目标地址。 5. 最后,当你不再需要连接时,记得在适当的时候断开连接: ```javascript beforeDestroy() { this.stompClient.disconnect(); } ``` 这样,你就可以在Vue 3中使用stomp-websocket了。请注意,上述代码中的URL和订阅目标地址需要根据你的实际情况进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值