Web中应用RabittMQ MQTT,实现即时通讯案例

buhaisao321

已于 2024-04-28 19:11:49 修改

阅读量817

点赞数 9

文章标签：前端

于 2023-12-22 20:38:29 首次发布

本文链接：https://blog.csdn.net/buhaisao321/article/details/135160170

版权

安装mqtt.js

//在vue中我直接在index.html中引入的cdn,感兴趣的大佬可以直接npm i mqtt, 我下载的包有问题
//cdn地址
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>

直接上代码

// RabbitMq 服务器IP地址或域名地址
data(){
	return{
		host:'wss://www.***:443/mqtt/ws',//RabbitMq 服务器IP地址或域名地址
		topic:'text_2500_0',//订阅的主题id
		clientId:"myclientid_" + new Date().getTime(),//连接通道id,必须保证唯一性,不建议用随机数,如果同时有多个用户访问,则id可能相同
		reconnectTimeout:10000,//服务连接失败后重新尝试连接的时间间隔
		username:'admin',//用户名密码，确保该用户可以访问mqtt资源权限
		password:'123456',//用户名密码，确保该用户可以访问mqtt资源权限
		useTLS:true,//采用https加密则设置为true
		cleansession:true,//重新连接mqtt清除消息缓存
		mqtt:{},//用于存储mqtt对象
	}
},
mounted(){
	this.initMqtt()
},
methods:{
	//初始化mqtt
	initMqtt(){
	  this.mqtt = new Paho.MQTT.Client(host, clientId);
      this.mqtt.onConnectionLost = this.onConnectionLost();   // 监听连接断开事件
      this.mqtt.onMessageArrived = this.onMessageArrived();   // 监听消息到达事件
      let options = {
        timeout: 3,
        keepAliveInterval: 60,  // 心跳间隔，单位：秒
        mqttVersion: 4, // 版本号
        cleanSession: cleansession,  // 是否清除会话
        onSuccess: this.onConnect(),     // 连接成功回调
        onFailure: this.onFailure(),  	//连接失败回调
        useSSL: useTLS,  // 是否使用SSL
        userName: username,
        password: password
      };
      this.mqtt.connect(options);
	},
	//连接服务器失败
	onFailure(message) {
      setTimeout(this.initMqtt, this.reconnectTimeout);
    },
    // 连接服务器成功
    onConnect() {
      // 订阅某个主题
      this.mqtt.subscribe(this.topic, { qos: 0 });
      // 订阅第二个主题
      this.mqtt.subscribe(this.topic + "/第二个/" + this.clientId, { qos: 0 });
    },
    // 服务器返回消息
    onMessageArrived(message){
		let topic = message.destinationName; //返回的消息的主题  通过topic来判断是第几个主题返回的消息
     	let payload = message.payloadString; //返回的消息主体,根据需求处理
	},
	// 服务器连接失败
	onConnectionLost(response) {
      setTimeout(this.initMqtt, this.reconnectTimeout);//服务器重连
	}
}

RabittMQ的客户端id是唯一的,如果不唯一,可能出现的结果(你和你对象聊天,第三人可以看到!)

需要确定登录RabittMQ的账号有权限,负责会报错:

CONNECTION FAILURE - AMQJS0006E Bad Connack return code:5 Connection
Refused: not authorized.

注意订阅主题和发布主题是相同字段

创建队列时,尽量创建临时队列,不会造成队列消息堆积,负责(两人聊天,消息有延迟)

创建持久队列,在研发初期可以查看数据,但是不建议,会造成消息堆积

创建队列步骤
在这里插入图片描述
创建的队列如果不绑定虚拟机,会默认绑定amp.topic虚拟机

队列绑定虚拟机
在这里插入图片描述
四种类型
Direct（直连交换机）：根据消息的路由键精确匹配将消息发送到指定队列。当消息的路由键与绑定到交换机上的队列的绑定键（Binding Key）完全匹配时，消息会被路由到相应的队列。
Fanout（扇形交换机）：将消息广播到所有绑定到交换机的队列。无需匹配路由键，所有队列都会接收到相同的消息。
Topic（主题交换机）：根据通配符匹配将消息路由到队列。通配符使用特殊符号"#“（表示零个或多个词）和”*"（表示一个词）来匹配路由键，允许更灵活的路由。
Headers（头交换机）：根据消息的头部属性进行匹配路由，而不是使用路由键。在Headers交换机中，可以定义一组键值对的头部属性，并通过匹配这些属性将消息路由到队列。