uniapp微信小程序使用stomp.js实现STOMP传输协议的实时聊天

news2025/1/18 3:27:31
简介:

原生微信小程序中使用
本来使用websocket,后端同事使用了stomp协议,导致前端也需要对应修改。
在这里插入图片描述

如何使用

1.yarn add stompjs
2.版本 “stompjs”: “^2.3.3”
3.在static/js中新建stomp.js和websocket.js,然后在需要使用的页面引入监听代码+发送代码即可

代码如下:

位置:项目/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,
        close: this.closeSocket,
      }

      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) {
        ws.onmessage && ws.onmessage(res)
      })

      uni.onSocketError(function (res) {
        console.log('WebSocket 错误!', res)
      })

      uni.onSocketClose((res) => {
        this.client.disconnect()
        this.client = null
        socketOpen = false
        console.log('WebSocket 已关闭!', res)
        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))
      client.connect(header, function () {
        console.log('stomp connected')
        resolve(client)
      })
    })
  },
  disconnect() {
    uni.closeSocket()
  },
  sendMessage(message) {
    if (socketOpen) {
      uni.sendSocketMessage({
        data: message,
      })
    } else {
      socketMsgQueue.push(message)
    }
  },
  closeSocket() {
    console.log('closeSocket')
  },
}

3.监听+发送代码

//import WebSocket from "../../static/js/websocket"
import WebSocket from "@/static/js/websocket"
const app = getApp();
data: {
	objUid: '1',
	client: null,
	content: '发送的内容'
},
onLoad(options) {
	// stomp协议请求 
	this.initWS()
},
initWS() {
	WebSocket.init(
		`${app.globalData.WSURL}/chat`,
		// 传参
		{
			// login: 'admin',
			// passcode: 'admin',
		},
		// ws断开回调
		() => {
			this.initWS()
		}
	).then((client) => {
		this.client = client
		// 订阅
		client.subscribe(
			// 路径
			`/response/${app.globalData.uid}/${this.objUid}`,
			// 接收到的数据
			(res) => {
				console.log(res)
			},
			// 消息不会被确认接收,不确认每次连接都会推送
			// { ack: 'client' } 
		)
	})
},
// 直接调用发送即可
send() {
	this.client.send(
		// 路径
		`/child/${app.globalData.uid}/${this.objUid}`,
		// 自定义参数 http://jmesnil.net/stomp-websocket/doc/
		{},//priority: 9 
		// 发送文本
		JSON.stringify({ 'content': this.content })
	);
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/944052.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一文讲透超宽带(UWB)前世今生

►►►UWB大火与巨头入局 传闻已久的蔚来手机可能即将要发布了。据工信部官网显示&#xff1a;申请单位为蔚来移动科技有限公司、型号为N2301的手机已正式完成入网。相关认证信息显示&#xff0c;N2301支持UWB&#xff0c;可以被用作蔚来汽车的数字钥匙。 图 1 蔚来手机概念图 …

第十四课 定语从句

文章目录 前言 所有定语从句的连接词是没有意思的一、定语从句的定义和结构二、关系代词引导的定语从句1、whowho谓语&#xff08;宾语&#xff09;状语who系动词表语状语who助动词及物动词的过去分词 2、whomwhom主语及物动词&#xff08;状语&#xff09;whom主语谓语to及物动…

2023京东咖啡机行业数据分析(京东数据分析平台)

如今咖啡的渗透率越来越高&#xff0c;养成咖啡饮用习惯的消费者越来越多&#xff0c;尤其是一二线城市。同时&#xff0c;随着人们收入水平的提高&#xff0c;精致生活理念使人们对咖啡的态度从提神需求逐渐转变为社交需求&#xff0c;国内咖啡机市场的发展空间也逐步增大。 …

Oracle 本地客户端连接远程 Oracle 服务端并使用 c# 连接测试

这里写自定义目录标题 前言Oracle 客户端安装先决条件下载 Oracle 客户端Oracle 客户端环境变量配置 PL/SQLPL/SQL 下载PL/SQL 配置 配置远程连接tnsnames.ora 文件配置 使用 PL/SQL 连接远程数据库使用 C# 远程访问 Oracle 数据库结语 前言 最近有一个需要使用本地的 Oracle …

java内存分区

按照垃圾收集&#xff0c;将 Java 堆划分为**新生代 &#xff08;Young Generation&#xff09;和老年代&#xff08;Old Generation&#xff09;**两个区域&#xff0c; 新生代存放存活时间短的对象&#xff0c;而每次回收后存活的少量对象&#xff0c;将会逐步晋升到老年代中…

idea 创建mybatis xml文件时找不到

1、File >Settings 如图 &#xff1a; 2、添加模板&#xff1a;如下图 3、添加xml模板 如下图&#xff1a; 模板内容&#xff1a; <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//E…

微信小程序使用stomp.js实现STOMP传输协议的实时聊天

简介&#xff1a; uniapp开发的小程序中使用 本来使用websocket&#xff0c;后端同事使用了stomp协议&#xff0c;导致前端也需要对应修改。 如何使用 在static/js中新建stomp.js和websocket.js&#xff0c;然后在需要使用的页面引入监听代码发送代码即可 代码如下&#x…

燃气管网监测系统,提升城市燃气安全防控能力

燃气是我们日常生活中不可或缺的能源&#xff0c;但其具有易燃易爆特性&#xff0c;燃气安全使用、泄漏监测尤为重要。当前全国燃气安全事故仍呈现多发频发态势&#xff0c;从公共安全的视角来看&#xff0c;燃气已成为城市安全的重大隐忧&#xff01;因此&#xff0c;建立一个…

Linux 终端命令行 产品介绍

Linux命令手册内置570多个Linux 命令&#xff0c;内容包含 Linux 命令手册。 【软件功能】&#xff1a; 文件传输 bye、ftp、ftpcount、ftpshut、ftpwho、ncftp、tftp、uucico、uucp、uupick、uuto、scp备份压缩 ar、bunzip2、bzip2、bzip2recover、compress、cpio、dump、gun…

计算机毕设 基于深度学习的植物识别算法 - cnn opencv python

文章目录 0 前言1 课题背景2 具体实现3 数据收集和处理3 MobileNetV2网络4 损失函数softmax 交叉熵4.1 softmax函数4.2 交叉熵损失函数 5 优化器SGD6 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&a…

跨境电商面临的法律与合规问题

跨境电商在全球范围内取得了飞速的发展&#xff0c;但这一领域也伴随着复杂的法律与合规问题&#xff0c;涉及国际法律、知识产权、税务、隐私等多个方面。在跨境电商中&#xff0c;合法合规的经营不仅有助于企业长期发展&#xff0c;还能增强消费者信任&#xff0c;提升市场竞…

使用docker、docker-compose部署微服务

使用docker、docker-compose部署微服务 一、使用docker部署1、准备2、上传jar包3、编写dockerfile文件3、构建镜像和容器 二、使用docker-compose部署1、准备服务的jar包和dockerfile文件2、编写docker-compose.yml文件3、docker-compose常用命令&#xff08;1&#xff09;、前…

地下水质分析积分球

我国的河流水资源相当丰富&#xff0c;河川径流总量历年来位居世界第三&#xff0c;年均达到了27000亿m。但经济快速发展的同时对河流水资源产生了一定的负面影响&#xff0c;河流水质污染和富营养化的现象偶有发生&#xff0c;在对我国七大水系216条河流503个主要断面进行监测…

冠达管理:什么是k线怎样看k线图?

K线图是一种股票商场常用的价格图表&#xff0c;它显现了一段时刻内股票开盘价、收盘价、最高价和最低价等信息。K线起源于日本&#xff0c;在上世纪90年代被引进到全球股市中。跟着股市的开展&#xff0c;K线图已经成为股票商场数据剖析中常用的工具&#xff0c;因此了解K线图…

一文速学-让神经网络不再神秘,一天速学神经网络基础-前向传播(三)

前言 思索了很久到底要不要出深度学习内容&#xff0c;毕竟在数学建模专栏里边的机器学习内容还有一大半算法没有更新&#xff0c;很多坑都没有填满&#xff0c;而且现在深度学习的文章和学习课程都十分的多&#xff0c;我考虑了很久决定还是得出神经网络系列文章&#xff0c;…

C语言这么没用??

今日话题&#xff0c;C语言真的这么不堪吗&#xff1f;最近我兄弟向我倾诉&#xff0c;他在几天前受到老板的责骂&#xff0c;原因是他只懂C语言编程&#xff0c;无法达到老板的期望。其实不是C语言不堪&#xff0c;而是嵌入式领域复杂性多种多样&#xff0c;需要灵活的解决方案…

idea查找maven所有依赖

文章目录 idea自带的依赖结构图idea安装maven helper插件 idea自带的依赖结构图 缺点是只有依赖&#xff0c;没有版本 idea安装maven helper插件 settings–>plugins–>搜索maven helper并安装 安装后打开pom.xml文件会有依赖解析 勾选conflict就是有冲突的依赖选中…

ACE_Proactor

服务端代码&#xff1a; #include "stdafx.h" #include <iostream> #include "ace/Message_Queue.h" #include "ace/Asynch_IO.h" #include "ace/OS.h" #include "ace/Proactor.h" #include "ace/Asynch_Accept…

knife4j 整合 springboot

官方文档&#xff1a;https://doc.xiaominfo.com/knife4j 版本兼容说明&#xff1a;https://doc.xiaominfo.com/docs/quick-start/start-knife4j-version 升级说明&#xff1a;https://doc.xiaominfo.com/docs/upgrading/upgrading-to-v4版本兼容惯关系&#xff1a; springboot…

【微信小程序】小程序隐私保护指引设置

首先了解官方提供demo&#xff1a; demo1: 演示使用 wx.getPrivacySetting 和 <button open-type"agreePrivacyAuthorization"> 在首页处理隐私弹窗逻辑 https://developers.weixin.qq.com/s/gi71sGm67hK0 demo2: 演示使用 wx.onNeedPrivacyAuthorization 和…