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

Q: 什么是rabbitmq?

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

Q: 如何连接rabbitmq服务?

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

首先需要STOMP的JS库,引入的方式:

<!-- include the client library -->
<script src=stomp.js"></script>

// or

<script>
import StompJs from 'stompjs'
</script>

主要代码段:

// 引入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...
    })
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,099评论 18 139
  • 来源 RabbitMQ是用Erlang实现的一个高并发高可靠AMQP消息队列服务器。支持消息的持久化、事务、拥塞控...
    jiangmo阅读 10,266评论 2 34
  • http://liuxing.info/2017/06/30/Spring%20AMQP%E4%B8%AD%E6%...
    sherlock_6981阅读 15,475评论 2 11
  • 借助于 RabbitMQ 的 Web STOMP 插件,实现浏览器与服务端的全双工通信。从本质上说,RabbitM...
    wangxiaoda阅读 23,533评论 4 17
  • 利用RabbitMQ集群横向扩展能力,均衡流量压力,让消息集群的秒级服务能力达到百万,Google曾做过此类实验;...
    有货技术阅读 3,389评论 0 1