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

简介:

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

如何使用

在static/js中新建stomp.js和websocket.js,然后在需要使用的页面引入监听代码+发送代码即可

代码如下:

位置:项目/pages/static/js/stomp.js
1.stomp.js

// Generated by CoffeeScript 1.7.1/*Stomp Over WebSocket http://www.jmesnil.net/stomp-websocket/doc/ | Apache License V2.0Copyright (C) 2010-2013 [Jeff Mesnil](http://jmesnil.net/)Copyright (C) 2012 [FuseSource, Inc.](http://fusesource.com)*/(function() {var Byte, Client, Frame, Stomp,__hasProp = {}.hasOwnProperty,__slice = [].slice;Byte = {LF: '\x0A',NULL: '\x00'};Frame = (function() {var unmarshallSingle;function Frame(command, headers, body) {this.command = command;this.headers = headers != null ? headers : {};this.body = body != null ? body : '';}Frame.prototype.toString = function() {var lines, name, skipContentLength, value, _ref;lines = [this.command];skipContentLength = this.headers['content-length'] === false ? true : false;if (skipContentLength) {delete this.headers['content-length'];}_ref = this.headers;for (name in _ref) {if (!__hasProp.call(_ref, name)) continue;value = _ref[name];lines.push("" + name + ":" + value);}if (this.body && !skipContentLength) {lines.push("content-length:" + (Frame.sizeOfUTF8(this.body)));}lines.push(Byte.LF + this.body);return lines.join(Byte.LF);};Frame.sizeOfUTF8 = function(s) {if (s) {return encodeURI(s).match(/%..|./g).length;} else {return 0;}};unmarshallSingle = function(data) {var body, chr, command, divider, headerLines, headers, i, idx, len, line, start, trim, _i, _j, _len, _ref, _ref1;divider = data.search(RegExp("" + Byte.LF + Byte.LF));headerLines = data.substring(0, divider).split(Byte.LF);command = headerLines.shift();headers = {};trim = function(str) {return str.replace(/^\s+|\s+$/g, '');};_ref = headerLines.reverse();for (_i = 0, _len = _ref.length; _i < _len; _i++) {line = _ref[_i];idx = line.indexOf(':');headers[trim(line.substring(0, idx))] = trim(line.substring(idx + 1));}body = '';start = divider + 2;if (headers['content-length']) {len = parseInt(headers['content-length']);body = ('' + data).substring(start, start + len);} else {chr = null;for (i = _j = start, _ref1 = data.length; start <= _ref1 ? _j < _ref1 : _j > _ref1; i = start <= _ref1 ? ++_j : --_j) {chr = data.charAt(i);if (chr === Byte.NULL) {break;}body += chr;}}return new Frame(command, headers, body);};Frame.unmarshall = function(datas) {var frame, frames, last_frame, r;frames = datas.split(RegExp("" + Byte.NULL + Byte.LF + "*"));r = {frames: [],partial: ''};r.frames = (function() {var _i, _len, _ref, _results;_ref = frames.slice(0, -1);_results = [];for (_i = 0, _len = _ref.length; _i < _len; _i++) {frame = _ref[_i];_results.push(unmarshallSingle(frame));}return _results;})();last_frame = frames.slice(-1)[0];if (last_frame === Byte.LF || (last_frame.search(RegExp("" + Byte.NULL + Byte.LF + "*$"))) !== -1) {r.frames.push(unmarshallSingle(last_frame));} else {r.partial = last_frame;}return r;};Frame.marshall = function(command, headers, body) {var frame;frame = new Frame(command, headers, body);return frame.toString() + Byte.NULL;};return Frame;})();Client = (function() {var now;function Client(ws) {this.ws = ws;this.ws.binaryType = "arraybuffer";this.counter = 0;this.connected = false;this.heartbeat = {outgoing: 10000,incoming: 10000};this.maxWebSocketFrameSize = 16 * 1024;this.subscriptions = {};this.partialData = '';}Client.prototype.debug = function(message) {var _ref;return typeof window !== "undefined" && window !== null ? (_ref = window.console) != null ? _ref.log(message) : void 0 : void 0;};now = function() {if (Date.now) {return Date.now();} else {return new Date().valueOf;}};Client.prototype._transmit = function(command, headers, body) {var out;out = Frame.marshall(command, headers, body);if (typeof this.debug === "function") {this.debug(">>> " + out);}while (true) {if (out.length > this.maxWebSocketFrameSize) {this.ws.send(out.substring(0, this.maxWebSocketFrameSize));out = out.substring(this.maxWebSocketFrameSize);if (typeof this.debug === "function") {this.debug("remaining = " + out.length);}} else {return this.ws.send(out);}}};Client.prototype._setupHeartbeat = function(headers) {var serverIncoming, serverOutgoing, ttl, v, _ref, _ref1;if ((_ref = headers.version) !== Stomp.VERSIONS.V1_1 && _ref !== Stomp.VERSIONS.V1_2) {return;}_ref1 = (function() {var _i, _len, _ref1, _results;_ref1 = headers['heart-beat'].split(",");_results = [];for (_i = 0, _len = _ref1.length; _i < _len; _i++) {v = _ref1[_i];_results.push(parseInt(v));}return _results;})(), serverOutgoing = _ref1[0], serverIncoming = _ref1[1];if (!(this.heartbeat.outgoing === 0 || serverIncoming === 0)) {ttl = Math.max(this.heartbeat.outgoing, serverIncoming);if (typeof this.debug === "function") {this.debug("send PING every " + ttl + "ms");}this.pinger = Stomp.setInterval(ttl, (function(_this) {return function() {_this.ws.send(Byte.LF);return typeof _this.debug === "function" ? _this.debug(">>> PING") : void 0;};})(this));}if (!(this.heartbeat.incoming === 0 || serverOutgoing === 0)) {ttl = Math.max(this.heartbeat.incoming, serverOutgoing);if (typeof this.debug === "function") {this.debug("check PONG every " + ttl + "ms");}return this.ponger = Stomp.setInterval(ttl, (function(_this) {return function() {var delta;delta = now() - _this.serverActivity;if (delta > ttl * 2) {if (typeof _this.debug === "function") {_this.debug("did not receive server activity for the last " + delta + "ms");}return _this.ws.close();}};})(this));}};Client.prototype._parseConnect = function() {var args, connectCallback, errorCallback, headers;args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];headers = {};switch (args.length) {case 2:headers = args[0], connectCallback = args[1];break;case 3:if (args[1] instanceof Function) {headers = args[0], connectCallback = args[1], errorCallback = args[2];} else {headers.login = args[0], headers.passcode = args[1], connectCallback = args[2];}break;case 4:headers.login = args[0], headers.passcode = args[1], connectCallback = args[2], errorCallback = args[3];break;default:headers.login = args[0], headers.passcode = args[1], connectCallback = args[2], errorCallback = args[3], headers.host = args[4];}return [headers, connectCallback, errorCallback];};Client.prototype.connect = function() {var args, errorCallback, headers, out;args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];out = this._parseConnect.apply(this, args);headers = out[0], this.connectCallback = out[1], errorCallback = out[2];if (typeof this.debug === "function") {this.debug("Opening Web Socket...");}this.ws.onmessage = (function(_this) {return function(evt) {var arr, c, client, data, frame, messageID, onreceive, subscription, unmarshalledData, _i, _len, _ref, _results;data = typeof ArrayBuffer !== 'undefined' && evt.data instanceof ArrayBuffer ? (arr = new Uint8Array(evt.data), typeof _this.debug === "function" ? _this.debug("--- got data length: " + arr.length) : void 0, ((function() {var _i, _len, _results;_results = [];for (_i = 0, _len = arr.length; _i < _len; _i++) {c = arr[_i];_results.push(String.fromCharCode(c));}return _results;})()).join('')) : evt.data;_this.serverActivity = now();if (data === Byte.LF) {if (typeof _this.debug === "function") {_this.debug("<<< PONG");}return;}if (typeof _this.debug === "function") {_this.debug("<<< " + data);}unmarshalledData = Frame.unmarshall(_this.partialData + data);_this.partialData = unmarshalledData.partial;_ref = unmarshalledData.frames;_results = [];for (_i = 0, _len = _ref.length; _i < _len; _i++) {frame = _ref[_i];switch (frame.command) {case "CONNECTED":if (typeof _this.debug === "function") {_this.debug("connected to server " + frame.headers.server);}_this.connected = true;_this._setupHeartbeat(frame.headers);_results.push(typeof _this.connectCallback === "function" ? _this.connectCallback(frame) : void 0);break;case "MESSAGE":subscription = frame.headers.subscription;onreceive = _this.subscriptions[subscription] || _this.onreceive;if (onreceive) {client = _this;messageID = frame.headers["message-id"];frame.ack = function(headers) {if (headers == null) {headers = {};}return client.ack(messageID, subscription, headers);};frame.nack = function(headers) {if (headers == null) {headers = {};}return client.nack(messageID, subscription, headers);};_results.push(onreceive(frame));} else {_results.push(typeof _this.debug === "function" ? _this.debug("Unhandled received MESSAGE: " + frame) : void 0);}break;case "RECEIPT":_results.push(typeof _this.onreceipt === "function" ? _this.onreceipt(frame) : void 0);break;case "ERROR":_results.push(typeof errorCallback === "function" ? errorCallback(frame) : void 0);break;default:_results.push(typeof _this.debug === "function" ? _this.debug("Unhandled frame: " + frame) : void 0);}}return _results;};})(this);this.ws.onclose = (function(_this) {return function() {var msg;msg = "Whoops! Lost connection to " + _this.ws.url;if (typeof _this.debug === "function") {_this.debug(msg);}_this._cleanUp();return typeof errorCallback === "function" ? errorCallback(msg) : void 0;};})(this);return this.ws.onopen = (function(_this) {return function() {if (typeof _this.debug === "function") {_this.debug('Web Socket Opened...');}headers["accept-version"] = Stomp.VERSIONS.supportedVersions();headers["heart-beat"] = [_this.heartbeat.outgoing, _this.heartbeat.incoming].join(',');return _this._transmit("CONNECT", headers);};})(this);};Client.prototype.disconnect = function(disconnectCallback, headers) {if (headers == null) {headers = {};}this._transmit("DISCONNECT", headers);this.ws.onclose = null;this.ws.close();this._cleanUp();return typeof disconnectCallback === "function" ? disconnectCallback() : void 0;};Client.prototype._cleanUp = function() {this.connected = false;if (this.pinger) {Stomp.clearInterval(this.pinger);}if (this.ponger) {return Stomp.clearInterval(this.ponger);}};Client.prototype.send = function(destination, headers, body) {if (headers == null) {headers = {};}if (body == null) {body = '';}headers.destination = destination;return this._transmit("SEND", headers, body);};Client.prototype.subscribe = function(destination, callback, headers) {var client;if (headers == null) {headers = {};}if (!headers.id) {headers.id = "sub-" + this.counter++;}headers.destination = destination;this.subscriptions[headers.id] = callback;this._transmit("SUBSCRIBE", headers);client = this;return {id: headers.id,unsubscribe: function() {return client.unsubscribe(headers.id);}};};Client.prototype.unsubscribe = function(id) {delete this.subscriptions[id];return this._transmit("UNSUBSCRIBE", {id: id});};Client.prototype.begin = function(transaction) {var client, txid;txid = transaction || "tx-" + this.counter++;this._transmit("BEGIN", {transaction: txid});client = this;return {id: txid,commit: function() {return client.commit(txid);},abort: function() {return client.abort(txid);}};};Client.prototype.commit = function(transaction) {return this._transmit("COMMIT", {transaction: transaction});};Client.prototype.abort = function(transaction) {return this._transmit("ABORT", {transaction: transaction});};Client.prototype.ack = function(messageID, subscription, headers) {if (headers == null) {headers = {};}headers["message-id"] = messageID;headers.subscription = subscription;return this._transmit("ACK", headers);};Client.prototype.nack = function(messageID, subscription, headers) {if (headers == null) {headers = {};}headers["message-id"] = messageID;headers.subscription = subscription;return this._transmit("NACK", headers);};return Client;})();Stomp = {VERSIONS: {V1_0: '1.0',V1_1: '1.1',V1_2: '1.2',supportedVersions: function() {return '1.1,1.0';}},client: function(url, protocols) {var klass, ws;if (protocols == null) {protocols = ['v10.stomp', 'v11.stomp'];}klass = Stomp.WebSocketClass || WebSocket;ws = new klass(url, protocols);return new Client(ws);},over: function(ws) {return new Client(ws);},Frame: Frame};if (typeof exports !== "undefined" && exports !== null) {exports.Stomp = Stomp;}if (typeof window !== "undefined" && window !== null) {Stomp.setInterval = function(interval, f) {return window.setInterval(f, interval);};Stomp.clearInterval = function(id) {return window.clearInterval(id);};window.Stomp = Stomp;} else if (!exports) {self.Stomp = Stomp;}}).call(this);

位置:项目/pages/static/js/websocket.js
2.websocket.js

const Stomp = require('./stomp.js').Stomp;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,}wx.connectSocket({ url, header })wx.onSocketOpen(function (res) {console.log('WebSocket连接已打开!', res)socketOpen = truefor (let i = 0; i < socketMsgQueue.length; i++) {ws.send(socketMsgQueue[i])}socketMsgQueue = []ws.onopen && ws.onopen()})wx.onSocketMessage(function (res) {ws.onmessage && ws.onmessage(res)})wx.onSocketError(function (res) {console.log('WebSocket 错误!', res)})wx.onSocketClose((res) => {this.client.disconnect()this.client = nullsocketOpen = falseconsole.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() {wx.closeSocket()},sendMessage(message) {if (socketOpen) {wx.sendSocketMessage({data: message,})} else {socketMsgQueue.push(message)}},closeSocket() {console.log('closeSocket')},
}

3.监听+发送代码

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.setData({client: client})// 订阅client.subscribe(// 路径`/response/${app.globalData.uid}/${this.data.objUid}`,// 接收到的数据(res) => {console.log(res)},// 消息不会被确认接收,不确认每次连接都会推送// { ack: 'client' } )})
},
// 直接调用发送即可
send() {this.data.client.send(// 路径`/child/${app.globalData.uid}/${this.data.objUid}`,// 自定义参数 http://jmesnil.net/stomp-websocket/doc/{},//priority: 9 // 发送文本JSON.stringify({ 'content': this.data.content }));
},

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

腾讯云-对象存储服务(COS)的使用总结

简介 对象存储&#xff08;Cloud Object Storage&#xff0c;COS&#xff09;是腾讯云提供的一种存储海量文件的分布式存储服务&#xff0c;具有高扩展性、低成本、可靠安全等优点。通过控制台、API、SDK 和工具等多样化方式&#xff0c;用户可简单、快速地接入 COS&#xff0…

论文笔记:从不平衡数据流中学习的综述: 分类、挑战、实证研究和可重复的实验框架

0 摘要 论文&#xff1a;A survey on learning from imbalanced data streams: taxonomy, challenges, empirical study, and reproducible experimental framework 发表&#xff1a;2023年发表在Machine Learning上。 源代码&#xff1a;https://github.com/canoalberto/imba…

Python Qt(七)Listview

源代码&#xff1a; # -*- coding: utf-8 -*-# Form implementation generated from reading ui file qt_listview.ui # # Created by: PyQt5 UI code generator 5.15.9 # # WARNING: Any manual changes made to this file will be lost when pyuic5 is # run again. Do not…

Docker之私有仓库 RegistryHarbor

目录 一、Docker私有仓库&#xff08;Registry&#xff09; 1.1 Registry的介绍 二、搭建本地私有仓库 2.1首先下载 registry 镜像 2.2在 daemon.json 文件中添加私有镜像仓库地址 2.3运行 registry 容器 2.4Docker容器的重启策略 2.5为镜像打标签 2.6上传到私有仓库 2…

jvm的内存区域

JVM 内存分为线程私有区和线程共享区&#xff0c;其中方法区和堆是线程共享区&#xff0c;虚拟机栈、本地方法栈和程序计数器是线程隔离的数据区。 1&#xff09;程序计数器 程序计数器&#xff08;Program Counter Register&#xff09;也被称为 PC 寄存器&#xff0c;是一块…

基于Echarts的大数据可视化模板:大数据医疗服务平台

目录 引言大数据在医疗领域的应用ECharts在医疗服务中的作用医疗大数据的应用方向临床决策支持药物研发与安全性监测健康管理与预防流行病监测与公共卫生基因组学与个性化医疗医疗保险与费用管理Echarts与大数据可视化Echarts库以及其在大数据可视化领域的应用优势开发过程和所…

只考一门数据结构,计算机学硕复录比1:1的山东双非学校考情分析

青岛理工大学 考研难度&#xff08;☆&#xff09; 内容&#xff1a;23考情概况&#xff08;拟录取和复试分析&#xff09;、院校概况、23专业目录、23复试详情、各专业考情分析、各科目考情分析。 正文1420字&#xff0c;预计阅读&#xff1a;3分钟 2023考情概况 青岛理工…

redis缓存雪崩、穿透、击穿解决方案

redis缓存雪崩、穿透、击穿解决方案 背景缓存雪崩缓存击穿缓存穿透总结背景 关于缓存异常,我们常见的有三个问题:缓存雪崩、缓存击穿、缓存穿透。这三个问题一旦发生,会导致大量请求直接落到数据库层面。如果请求的并发量很大,会影响数据库的运行,严重的会导致数据库宕机…

openGauss学习笔记-54 openGauss 高级特性-MOT

文章目录 openGauss学习笔记-54 openGauss 高级特性-MOT54.1 MOT特性及价值54.2 MOT关键技术54.3 MOT应用场景54.4 不支持的数据类型54.5 使用MOT54.6 将磁盘表转换为MOT openGauss学习笔记-54 openGauss 高级特性-MOT openGauss引入了MOT&#xff08;Memory-Optimized Table&…

如何高效地设计测试用例并评审

编写出好的测试用例是每一个测试工程师的职责&#xff0c;但在实际工作中大家写的测试用例往往需要不断地修改才能使用&#xff0c;这不仅浪费了时间&#xff0c;还容易让测试工程师产生自我否定的情绪&#xff0c;甚至在团队中产生各种矛盾。 那如何高效地设计测试用例呢&…

可直接运营的餐饮外卖点餐自提单多门店小程序开发演示

适合鲜花店、蛋糕店、奶茶店、餐饮店、便利店等门店商家的小程序。 小程序系统支持外卖和自提两种模式&#xff0c;帮助商家打造自己的私域流量池&#xff0c;减少对美团和饿了么的依赖&#xff0c;提升用户点餐、就餐体验。 支持会员签到获取积分的功能&#xff0c;积分可用…

jwt安全问题

文章目录 jwt安全问题jwt简介jwt组成headerpayloadsignature 潜在漏洞空加密算法web346 密钥爆破web348 敏感信息泄露web349 **修改算法RS256为HS256**web350 jwt安全问题 jwt简介 JWT的全称是Json Web Token&#xff0c;遵循JSON格式&#xff0c;跨域认证解决方案&#xff0…

【93】PCI Expansion ROM

1、Expansion ROM PCIe、PCI设备可以提供Expansion ROM&#xff0c;Expansion ROM中存在设备初始化或者system boot的code。SystemBIOS在POST&#xff08;Power-on Self Test&#xff09;阶段&#xff0c;会枚举PCI设备&#xff0c;并判断有设备是否支持Expansion ROM&#xff…

Python爬虫武汉市二手房价格数据采集分析:Linear Regression、XGBoost和LightGBM|代码分享...

全文链接&#xff1a;http://tecdat.cn/?p31958 分析师&#xff1a;Yan Liu 我国有大量的资金都流入了房地产行业&#xff0c;同时与其他行业有着千丝万缕的联系&#xff0c;可以说房地产行业对推动我国深化改革、经济发展、工业化和城市化具有不可磨灭的作用&#xff08;点击…

WebSocket详解以及应用

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;websocket、网络、长连接、前端☀️每日 一言&#xff1a;任何一个你不喜欢而又离不开的地方&#xff0c;任何一种你不喜欢而又无法摆脱的生活&#xff0c;都是监狱&#xff01; 一、前言 我们在…

基于Spring Gateway路由判断器实现各种灰度发布场景

文章目录 1、灰度发布实现1.1 按随机用户的流量百分比实现灰度1.2 按人群划分实现的灰度1.2.1 通过Header信息实现灰度1.2.2 通过Query信息实现灰度1.2.3 通过RemoteAdd判断来源IP实现灰度 2、路由判断器2.1. After2.2. Before2.3. Between2.4. Cookie2.5. Header2.6. Host2.7.…

GEE/PIE遥感大数据处理与典型案例丨数据整合Reduce、云端数据可视化、数据导入导出及资产管理、机器学习算法等

目录 ​专题一&#xff1a;初识GEE和PIE遥感云平台 专题二&#xff1a;GEE和PIE影像大数据处理基础 专题三&#xff1a;数据整合Reduce 专题四&#xff1a;云端数据可视化 专题五&#xff1a;数据导入导出及资产管理 专题六&#xff1a;机器学习算法 专题七&#xff1a;…

2023-8-30 Dijkstra 求最短路(一)

题目链接&#xff1a;Dijkstra求最短路 I #include <iostream> #include <cstring> #include <algorithm>using namespace std;const int N 510;int n, m; int g[N][N]; int dist[N]; bool st[N];int dijkstra() {memset(dist, 0x3f, sizeof dist);dist[1…

Leetcode每日一题:1448. 统计二叉树中好节点的数目

原题 给你一棵根为 root 的二叉树&#xff0c;请你返回二叉树中好节点的数目。 「好节点」X 定义为&#xff1a;从根到该节点 X 所经过的节点中&#xff0c;没有任何节点的值大于 X 的值。 示例 1&#xff1a; 输入&#xff1a;root [3,1,4,3,null,1,5] 输出&#xff1a;4 解…

C语言网络编程:实现自己的高性能网络框架

一般生产环境中最耗时的其实是业务逻辑处理。所以&#xff0c;是不是可以将处理业务逻辑的代码给拆出来丢到线程池中去执行。 比如像下面这样&#xff1a; ​我们事先创建好一堆worker线程&#xff0c;主线程accepter拿到一个连接上来的套接字&#xff0c;就从线程池中取出一个…