前端与rabbitmq通信

本篇如何讲述前端通过stomp.js实现向rabbitmq推送和订阅消息。

开发前准备

rabbitmq

在实现通信前,先需要开启rabbitmq的web stomp Plugin。这个在rabbitmq官网也有详细的说明点这里

在rabbitmq服务器上输入如下命令即可开启:
rabbitmq-plugins enable rabbitmq_web_stomp

开启该插件后,rabbitmq会开放15674端口,用于与前端进行通信。

我们也可以开启rabbitmq提供的示例进行测试
rabbitmq-plugins enable rabbitmq_web_stomp_examples

开启后,我们可以通过访问http://rabbitmq服务器地址:15670/ ,使用两个示例。

前端安装stomp

下载stomp.js

如果使用web框架则执行:npm install stompjs

前端实现

html 复制代码
<!DOCTYPE html>
<html><head>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="stomp.js"></script>
  <style>
      .box {
          width: 440px;
          float: left;
          margin: 0 20px 0 20px;
      }

      .box div, .box input {
          border: 1px solid;
          -moz-border-radius: 4px;
          border-radius: 4px;
          width: 100%;
          padding: 5px;
          margin: 3px 0 10px 0;
      }

      .box div {
          border-color: grey;
          height: 300px;
          overflow: auto;
      }

      div code {
          display: block;
      }

      #first div code {
          -moz-border-radius: 2px;
          border-radius: 2px;
          border: 1px solid #eee;
          margin-bottom: 5px;
      }

      #second div {
          font-size: 0.8em;
      }
  </style>
  <title>RabbitMQ Web STOMP Examples : Echo Server</title>
  <link href="main.css" rel="stylesheet" type="text/css"/>
</head><body lang="en">
    <h1><a href="index.html">RabbitMQ Web STOMP Examples</a> > Echo Server</h1>

    <div id="first" class="box">
      <h2>Received</h2>
      <div></div>
      <form><input autocomplete="off" value="Type here..."></input></form>
    </div>

    <div id="second" class="box">
      <h2>Logs</h2>
      <div></div>
    </div>

    <script>
        var has_had_focus = false;
        var pipe = function(el_name, send) {
            var div  = $(el_name + ' div');
            var inp  = $(el_name + ' input');
            var form = $(el_name + ' form');

            var print = function(m, p) {
                p = (p === undefined) ? '' : JSON.stringify(p);
                div.append($("<code>").text(m + ' ' + p));
                div.scrollTop(div.scrollTop() + 10000);
            };

            if (send) {
                form.submit(function() {
                    send(inp.val());
                    inp.val('');
                    return false;
                });
            }
            return print;
        };

      // Stomp.js boilerplate
      var client = Stomp.client('ws://192.168.16.117:15674/ws');
      client.debug = pipe('#second');
      var channelName = "/exchange/test.front.exchange";

      var print_first = pipe('#first', function(data) {
          client.send(channelName , {"content-type":"text/plain"}, data);
      });
      var on_connect = function(x) {
          id = client.subscribe(channelName , function(d) {
               print_first(d.body);
          });
      };
      var on_error =  function() {
        console.log('error');
      };
      client.connect('username', 'password', on_connect, on_error, '/');

      $('#first input').focus(function() {
          if (!has_had_focus) {
              has_had_focus = true;
              $(this).val("");
          }
      });
    </script>
</body></html>			 

其中我们讲讲channelName 的命名:
/exchange/test.front.exchange

/exchange: 代表是发送到rabbitmq的交换机中。

也可以使用其他的:

  • /queue: 代表是发送到队列中
  • /topic: 代表是发送到topic模式的交换机,交换机名称通常是"amq.topic";后面再指定的url则被认为是routeKey.
  • ...
    不可以乱写的。否则会报错。

/test.front.exchange: 则会被识别为交换机名称。如果后面再加入/xxx,则xxx则会被识别为routeKey。

client.connect('username', 'password', on_connect, on_error, '/');

connect有四个参数

  • rabbitmq登录用户名
  • 密码
  • 连接成功的回调
  • 失败的回调
  • 虚拟主机(Virtual host)

总结

我这里只是使用了一种方式,据我了解,还存在amqp、mqtt等消息协议通信。后面会继续补充。

本篇到这里结束,感谢阅读,点赞关注!拜拜、

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站