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'

连接和订阅

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

 // 连接// 三个参数分别是header，连接成功的回调，失败的回调// header中的内容如果后端没有强调，可以直接为 {}client.connect(headers, connectCallback, errorCallback)// 订阅 两个参数分别是 主题 回调 返回一个订阅对象 包含了 订阅id 取消订阅的方法 unsubscribeclient.subscribe("/queue/test", callback)// 实例let client = nulllet subscription = nulllet 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/xxxxsubscription = 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赋值一个当前环境中可以使用的定时器即可