vue中使用stomp.js

简介

STOMP即Simple (or Streaming) Text Orientated Messaging Protocol，简单(流)文本定向消息协议，它提供了一个可互操作的连接格式，允许STOMP客户端与任意STOMP消息代理（Broker）进行交互。STOMP协议由于设计简单，易于开发客户端，因此在多种语言和多种平台上得到广泛地应用。

安装使用：

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赋值一个当前环境中可以使用的定时器即可

发送信息

client.send()