簡介：

stomp.js：原生微信小程序中使用
stomp.js：官網(wǎng)
stomp.js：GitHub

本來使用websocket，后端同事使用了stomp協(xié)議，導(dǎo)致前端也需要對(duì)應(yīng)修改。

如何使用

1.yarn add stompjs
2.版本 “stompjs”: “^2.3.3”
3.在static/js中新建websocket.js，然后在需要使用的頁面引入監(jiān)聽代碼+發(fā)送代碼即可

代碼如下：

位置：項(xiàng)目/pages/static/js/websocket.js
1.websocket.js

import Stomp from 'stompjs'

let socketOpen = false
let socketMsgQueue = []

export default {
  client: null,
  init(url, header ,connectWS) {
    if (this.client) {
      return Promise.resolve(this.client)
    }

    return new Promise((resolve, reject) => {
      const ws = {
        send: this.sendMessage,
        onopen: null,
        onmessage: null,
      }

      uni.connectSocket({ url, header })

      uni.onSocketOpen(function (res) {
        console.log('WebSocket連接已打開！', res)

        socketOpen = true
        for (let i = 0; i < socketMsgQueue.length; i++) {
          ws.send(socketMsgQueue[i])
        }
        socketMsgQueue = []

        ws.onopen && ws.onopen()
      })

      uni.onSocketMessage(function (res) {
        // ios 缺少 0x00 導(dǎo)致解析失敗
        if (res && res.data) {
          let value = res.data;
          let code = value.charCodeAt(value.length - 1);
          if (code !== 0x00) {
            value += String.fromCharCode(0x00);
            res.data = value;
          }
        }
        ws.onmessage && ws.onmessage(res)
      })

      uni.onSocketError(function (res) {
        console.log('WebSocket 錯(cuò)誤！', res)
      })

      uni.onSocketClose((res) => {
        this.client = null
        socketOpen = false
        console.log('WebSocket 已關(guān)閉！', res)
        if(res.code !== 1000){
          setTimeout(()=>{
            connectWS()
          },3000)
        }
      })

      Stomp.setInterval = function (interval, f) {
        return setInterval(f, interval)
      }
      Stomp.clearInterval = function (id) {
        return clearInterval(id)
      }

      const client = (this.client = Stomp.over(ws))
      // 關(guān)閉連接
      client.close = () =>{
        uni.closeSocket()
      }
      client.connect(header, function () {
        console.log('stomp connected')
        resolve(client)
      })
    })
  },
  sendMessage(message) {
    if (socketOpen) {
      uni.sendSocketMessage({
        data: message,
      })
    } else {
      socketMsgQueue.push(message)
    }
  },
}

2.監(jiān)聽+發(fā)送+關(guān)閉代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-679608.html

//import WebSocket from "../../static/js/websocket"
import WebSocket from "@/static/js/websocket"
const app = getApp();
data： {
	objUid: '1',
	client: null,
	subscription: '',
	content: '發(fā)送的內(nèi)容'
},
onLoad(options) {
	// stomp協(xié)議請(qǐng)求 
	this.initWS()
},
onShow() {
    // 切換任務(wù)后臺(tái)，ws斷開后重連
    if(!WebSocket.client){
        this.initWS()
    }
},
// 離開頁面是關(guān)閉連接 
// 我的業(yè)務(wù)是仿微信這種，每次連接人不同，頻繁建立新連接，根據(jù)自己需要決定什么時(shí)候關(guān)閉連接
onUnload(){
    this.client && this.client.close()
    // 直接關(guān)閉websocket
	// this.client && this.client.close()
	// 不關(guān)閉websocket連接，但是斷開訂閱
	// this.subscription && this.subscription.unsubscribe(this.subscription.id)
},
initWS() {
	WebSocket.init(
		`${app.globalData.WSURL}/chat`,
		// 傳參
		{
			// login: 'admin',
			// passcode: 'admin',
		},
		// ws斷開回調(diào)
		() => {
			this.initWS()
		}
	).then((client) => {
		this.client = client
		// 訂閱
		this.subscription = client.subscribe(
			// 路徑
			`/response/${app.globalData.uid}/${this.objUid}`,
			// 接收到的數(shù)據(jù)
			(res) => {
				console.log(res)
			},
			// 消息不會(huì)被確認(rèn)接收，不確認(rèn)每次連接都會(huì)推送
			// { ack: 'client' } 
		)
	})
},
// 直接調(diào)用發(fā)送即可
send() {
	this.client.send(
		// 路徑
		`/child/${app.globalData.uid}/${this.objUid}`,
		// 自定義參數(shù) http://jmesnil.net/stomp-websocket/doc/
		{},//priority: 9 
		// 發(fā)送文本
		JSON.stringify({ 'content': this.content })
	);
},

到了這里，關(guān)于uniapp微信小程序使用stomp.js實(shí)現(xiàn)STOMP傳輸協(xié)議的實(shí)時(shí)聊天的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！