从Web浏览器连接rabbitmq完成实时数据交互的初步实践

Q: 什么是rabbitmq？

rabbitmq是基于AMQP消息队列协议的基础上完成的企业消息系统。

Q: 如何连接rabbitmq服务？

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

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

// or

主要代码段：

// 引入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可以分为以下几类：

1. 完全根据key进行投递的叫做Direct交换机；
2. 对key进行模式匹配后进行投递的叫做Topic交换机；
3. 还有一种不需要key的，叫做Fanout交换机，它采取广播模式，一个消息进来时，投递到与该交换机绑定的所有队列;

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

/**
* exchange：消息队列类型
* test.fanout：交换机名称
*/
client.subscribe('/exchange/test.fanout', (data) => {
        console.log(`收到数据：${data.body}`)
        // do something else...
    })