怎么看rabbitmq的浏览器信息_从Web浏览器连接rabbitmq完成实时数据交互的初步实践...

Q: 什么是rabbitmq？

从Web浏览器连接rabbitmq服务需要基于插件WEB STOMP，它是一个简单的桥梁，可以直接或通过模拟HTML5 Websockets来暴露给STOMP协议。

首先需要STOMP的JS库，引入的方式：

// or

import StompJs from 'stompjs'

主要代码段：

// 引入stomp sock

import StompJs from 'stompjs'

// 初始化 ws 对象

let serverUrl = 127.0.0.1:15674 // rabbitmq服务的地址与端口号

let ws = new WebSocket(`ws://${serverUrl}/ws`)

// 获得Stomp client对象

let client = StompJs.Stomp.over(ws)

// 设置心跳

client.heartbeat.outgoing = 0

client.heartbeat.incoming = 0

// 定义连接成功回调函数

let onConnect = () => {

console.log('connected')

}

let onError = () => {

console.log('error')

}

// 定义客户端信息

let clientInfo = {

userName: 'xxx',

password: 'xxxx'

}

// 连接rabbitmq

client.connect(clientInfo.userName, clientInfo.password, onConnect, onError, '/) // 用户名，密码，成功回调，错误回调，主机

连接成功时，控制台会打印出如下信息：

Opening Web Socket...

stomp.js?f746:134 Web Socket Opened...

stomp.js?f746:134 >>> CONNECT

login:****

passcode:******

host:/

accept-version:1.1,1.0

heart-beat:10000,10000

<<< CONNECTED

server:RabbitMQ/3.6.6

session:****

heart-beat:10000,10000

version:1.1

connected to server RabbitMQ/3.6.6

stomp.js?f746:134 send PING every 10000ms

stomp.js?f746:134 check PONG every 10000ms

stomp.js?f746:134 >>> SUBSCRIBE

id:sub-0

destination:/exchange/amq.fanout

紧接着会出现如下蜜汁信息???

<<< PONG

>>> PING

<<< PONG

>>> PING

...

Ping和Pong是标准协议里的操作，也是websocket中的心跳(heart-beat)。通常客户端成功连接服务后，服务器会主动对客户端进行Ping操作，而客户端则通过Pong操作作为回应，表明自己仍然在线。

Q：如何获取服务端的反馈信息？

客户端需要通过**订阅(subscribe)的方式接收服务器发出的消息。服务端会遵循某一规则向队列中发送信息，被匹配到订阅了该队列的客户端会即时收到服务端发出的信息(string类型的数据)，未被匹配到的客户端则无法接收到该消息。

rabbitmq的几个基本概念

exchange: 交换机，决定了消息路由规则；

queue: 消息队列；

channel: 进行消息读写的通道；

bind: 绑定了Queue和Exchange，即为符合什么样路由规则的消息，将会放置入哪一个消息队列；

根据具体业务需求，选择不同的方式去订阅。例如exchange则是连接到一个交换机，这个交换机决定消息路由的具体规则，exchange可以分为以下几类：

完全根据key进行投递的叫做Direct交换机；

对key进行模式匹配后进行投递的叫做Topic交换机；

还有一种不需要key的，叫做Fanout交换机，它采取广播模式，一个消息进来时，投递到与该交换机绑定的所有队列;

以Fanout交换机为例，订阅部分的基本代码：

/**

* exchange：消息队列类型

* test.fanout：交换机名称

*/

client.subscribe('/exchange/test.fanout', (data) => {

console.log(`收到数据：${data.body}`)

// do something else...

})