docker 安装的mq配置Stomp websokcek 插件

进入到rabbitMQ内部

docker exec -it 41ddc6d666f1 /bin/sh

进行开启stomp 插件

rabbitmq-plugins enable rabbitmq_web_stomp rabbitmq_web_stomp_examples

把修改后的容器，再次打包成镜像

docker commit 41ddc6d666f1 rabbitmq:stomp

停止原来的mq服务

docker stop 41ddc6d666f1

从新使用新打包的镜像创建并运行容器

docker run -di --name=rabbitmq -e RABBITMQ_DEFAULT_USER=admin -e RABBITMQ_DEFAULT_PASS=admin -p 5617:5617 -p 5672:5672 -p 4369:43691:15671 -p 15672:15672 -p 25672:25672 -p 15670:15670 -p 15674:15674 rabbitmq:stomp

安装完成之后会在rabbitMQ可视化界面看到如下信息

设置mq 开机自启

docker update --restart=always 49ff36b2b95a

前端实时提醒demo

安装stompjs

npm install stompjs

单页面引入 stomjs

import Stomp from "stompjs";export const MQTT_SERVICE = 'ws://192.168.0.17:15674/ws' // mqtt服务地址export const MQTT_USERNAME = 'username' // 连接用户名export const MQTT_PASSWORD = 'passward' //  连接密码export const Virtual_host = 'bx' //  侦听器端口

实时通信测试demo-随机消费

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
import Stomp from "stompjs";
export const MQTT_SERVICE = "ws://192.168.77.130:15674/ws"; // mqtt服务地址
export const MQTT_USERNAME = "admin"; // 连接用户名
export const MQTT_PASSWORD = "admin"; //  连接密码
export const Virtual_host = "/"; //  侦听器端口
export default {name: "HelloWorld",data() {return {msg: "Welcome to Your Vue.js App",client: Stomp.client(MQTT_SERVICE),};},created() {this.mqtthuoquMsg();},methods: {// 消息队列获取mqtthuoquMsg() {//初始化连接const headers = {login: MQTT_USERNAME,passcode: MQTT_PASSWORD,};//进行连接this.client.connect(headers.login,headers.passcode,this.onConnected,this.onFailed,Virtual_host);},onConnected: function () {//订阅频道const topic = localStorage.getItem("personId");this.client.subscribe("message", this.responseCallback, this.onFailed);},onFailed: function (frame) {console.log("MQ Failed: " + frame);this.$message.error("连接失败");},// 回传消息responseCallback: function (frame) {console.log("MQ msg=>" + frame.body);this.msg=frame.body//接收消息处理},// 断开相应的连接close: function () {this.client.disconnect(function () {console.log("已退出账号");});},},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {font-weight: normal;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

前端实现效果

rabbitMQ（docker版本） 安装Stomp插件--前端消息实时提醒（消费者随机提醒，单一消费者） demo相关推荐

1. StompJS+SpeechSynthesis实现前端消息实时语音播报

   前言 前端消息的实时推送我相信很多人不陌生,我们可以想到利用WebSocket,服务端主动向客户端推送数据,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输.其 ...

2. 基于RabbitMQ 的 Web MQTT插件进行前端消息实时推送

   目录 RabbitMQ What is AMQP, MQTT, STOMP ? How to use RabbitMQ with MQTT ? 1. Docker 安装RabbitMQ 2. MQTT ...

3. docker containerd.io、docker-ce、docker-ce-cli的区别（docker版本安装docker安装方法）（Docker CE和Docker EE，docker.io）

   文章目录 20230207 docker两种版本以及apt安装方法 docker社区版 docker-ce docker-ce-cli containerd.io(docker 官方维护) docke ...

4. (转)elasticsearch6.0版本安装head插件

   1.1 前言 不知道是我电脑问题还是最近的开源软件都比较**,mysql和elasticsearch新版本变动都比较大. elasticsearch6.0貌似已经不支持命令行安装head插件了,反正我 ...

5. Discuz!教程之Discuz!X2.5版本安装一些插件显示500错误，或页面打不开的问题修复

   尽管目前discuz已经升级到X3.4版本了,但是X2.5版本还有很多站长在使用.目前使用X2.5版本的站长面临的一个很头疼的问题就是好多插件不支持了,或者安装插件直接显示500错误, 具体表现为:安 ...

6. 指定python 版本安装相关插件

   2019独角兽企业重金招聘Python工程师标准>>> 1.  linux系统 在linux安装了多版本python时(例如python2.6和2.7),pip安装的包不一定是用户想 ...

7. swoft安装--docker版本安装

   swoft安装 下载swoft镜像 docker pull swoft/swoft docker安装swoft docker run -itd --name=swoft \ -p 18306:1830 ...

8. CloudTorrent 磁链下载 docker版本安装 nginx配置

   东西不多说支持磁链以及普通下载,而且可以在线播放; 首先安装docker 不多说 下面说下docker的运行参数 --name是名称尽量简单易懂/-d后台运行/-p 设置端口映射 / -v设置路径/- ...

9. Eclipse 【3.4】 版本安装【插件】时的【dropins】 目录

   可以直接将 plugin 放到 dropins 目录下,即可自动完成安装. dropins 目录支持下列形式的结构. 1. eclipse/ dropins/ org.eclipse.core.too ...

最新文章

1. 2019蓝桥杯省赛---java---A---8(修改数组)
2. php curl post 超时设置,在PHP中设置curl的超时参数(timeout)
3. Mybaties配置一对多关系sql实例
4. 牛客网C++面经 容器和算法
5. C++实现大数据乘法
6. webpack+es6+node+react初实践及总结
7. 用计算机字符写名字,NSIS：把计算机名转换为大写或小写字符
8. 关于python的闭包与装饰器的实验
9. JavaSE基础-01-对象
10. 三班倒有害健康，建议六班倒
11. 基于双二阶广义积分器（DSOGI）的软件锁相环需求的根源及s域仿真
12. 谷歌浏览器帮助用户在安装前识别不受信任的扩展
13. [破解] nasca drm file -ver1.00
14. 项目中出现npm WARN locking errno: -4048, npm WARN locking code: ‘EPERM‘, npm WARN locking syscall:
15. FreeMarker生成word文档
16. 刨根究底字符编码之二——关键术语解释(下)
17. 多人联机——Photon插件的是使用
18. 数据库系统概论练习3
19. 裁员狂潮席卷硅谷：Meta史上最大规模裁员将至，英特尔被曝裁掉数千人
20. 1000！末尾 有几个0

热门文章

1. MySQL 的instr函数
2. Adobe Illustrator CS6 直装版下载
3. 机器学习 | 朴素贝叶斯法知识总结
4. Oracle clusterware组成概述
5. 近两个月的自律小总结杂记-送给最光荣的劳动人民
6. 数字源表如何测试半导体分立器件电性能？
7. Python中国知网（cnki）爬虫及数据可视化分析设计
8. 每天一道大厂SQL题【Day02】电商场景TopK统计
9. 如何办理医疗器械经营许可证？
10. Unity3D模型制作规范(转载)