在vue2/3中使用stomp

在vue2/3中使用stomp

参考文档

http://jmesnil.net/stomp-websocket/doc/

前置工作

文档中提供了两种使用方法， 一种是基于常规web socket的连接方法，另一种是基于自定义web socket的方法，请参看参考文档中以下两节：
In a Web browser with regular Web Socket
In the Web browser with a custom WebSocket
本文将会使用前者。

1. 在项目中通过 npm i stompjs 下载stompjs包
2. 在需要使用stomp进行通信的vue页面中引入 import Stomp from 'stompjs'

连接和订阅

1. 确定连接的url 改url由后端给予，大致长：‘ws://xxx.xxx.com:8080/xxx/xxx’ 后面可能还会带有要传的内容，如token等，请自行拼接该字符串
2. 通过该url进行连接，这一步将会使浏览器和服务器之间产生ws连接
   stompjs提供了以下方法进行连接：

 // 连接
 // 三个参数分别是header，连接成功的回调，失败的回调
 // header中的内容如果后端没有强调，可以直接为 {}
 client.connect(headers, connectCallback, errorCallback)
 // 订阅 两个参数分别是 主题 回调 返回一个订阅对象 包含了 订阅id 取消订阅的方法 unsubscribe
 client.subscribe("/queue/test", callback)
 // 实例
 let client = null
 let subscription = null
 let url = 'xxx.xxx.xxx:xxx/xxx/xxx?xxx=xxx'
 function initWs(){
	client = Stomp.client(url) // 创建stomp对象
	client.connect(
		{}, 
		(res)=>{ // 连接成功，此时可以在network中看到建立了ws连接
			// 在这里进行订阅 主题由后端提供
			const topic = '/xxxx/xxxx/xxxx
			subscription = client.subscribe(topic,(resp)=>{ // 这里的resp是stomp返回的message
				// ...
			})
		}, 
		(err)=>{ // 连接失败
			console.log(err)
		})
 }
 function stopSubscribe(){ // 取消订阅
	subscription.unsubscribe()
 }
 function closeConnect(){ // 关闭stomp连接
	client.disconnect()
 }
 

心跳

目前npm i stompjs 中的stomp.js设置了默认的心跳，默认值为10秒发一次

client.heartbeat.outgoing = 20000 // 20秒发一次
client.heartbeat.incoming = 0 // 客户端不接受心跳

这里插一句题外话，stomp中实现定时器用的是 window.setInterval
当在没有window对象的环境中使用时，会报错,比如微信小程序…此时需要对stomp.js文件进行修改，参看stomp.js中 Stomp.setInterval = function(){...} 部分,为stomp.setinterval和clearinterval赋值一个当前环境中可以使用的定时器即可

发送信息

参看参考文档中 Send messages 一节
提供了 client.send() 方法