[关闭]
@dooy 2022-08-31T01:38:03.000000Z 字数 5369 阅读 84

Stomp RabbitMQ websocket 样例

JS

一、配置

配置RabbitMQ 参考 需要启用stomp 插件

https://www.rabbitmq.com/web-stomp.html

然后在 exchanges
建立一个 名为pen_test 类型为direct 的exchange

二、html Demo

  1. <!doctype html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <!-- 必须的 meta 标签 -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  8.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  9.       <script src="https://cdn.jsdelivr.net/npm/@stomp/stompjs@5.0.0/bundles/stomp.umd.min.js"></script>
  10.     <title>Stomp MQ DEMO</title>
  11.     <style>
  12.       .bd-placeholder-img {
  13.         font-size: 1.125rem;
  14.         text-anchor: middle;
  15.         -webkit-user-select: none;
  16.         -moz-user-select: none;
  17.         user-select: none;
  18.       }
  20.       @media (min-width: 768px) {
  21.         .bd-placeholder-img-lg {
  22.           font-size: 3.5rem;
  23.         }
  24.       }
  26.       .b-example-divider {
  27.       height: 3rem;
  28.       background-color: rgba(0, 0, 0, .1);
  29.       border: solid rgba(0, 0, 0, .15);
  30.       border-width: 1px 0;
  31.       box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
  32.     }
  34.     .form-control-dark {
  35.       color: #fff;
  36.       background-color: var(--bs-dark);
  37.       border-color: var(--bs-gray);
  38.     }
  39.     .form-control-dark:focus {
  40.       color: #fff;
  41.       background-color: var(--bs-dark);
  42.       border-color: #fff;
  43.       box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
  44.     }
  46.     .bi {
  47.       vertical-align: -.125em;
  48.       fill: currentColor;
  49.     }
  51.     .text-small {
  52.       font-size: 85%;
  53.     }
  55.     .dropdown-toggle {
  56.       outline: 0;
  57.     }
  58.     .progress{margin-top:5px;margin-bottom:5px;}
  59.     #cards { display:flex;flex:column}
  61.     #cards .card{ max-width:300px; margin:5px 5px 5px 0; }
  63.     </style>
  65.   </head>
  66.   <body>
  69. <main>
  72.   <div class="container">
  73.     <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
  74.       <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
  75.         <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
  76.         <span class="fs-4">Stomp MQ examples</span>
  77.       </a>
  79.       <ul class="nav nav-pills">
  80.         <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
  81.         <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
  82.         <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
  83.         <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
  84.         <li class="nav-item"><a href="#" class="nav-link">About</a></li>
  85.       </ul>
  86.     </header>
  87.   </div>
  90.   <div class="container">
  91.     <div class="input-group mb-3">
  92.       <input type="text" v-model="smsg" class="form-control" placeholder="请输入发送内容" aria-label="请输入发送内容" aria-describedby="button-addon2">
  93.       <button class="btn  btn-success" type="button" id="button-addon2" v-on:click="send()" v-bind:disabled="!mqConfig.isConnect">发送</button>
  94.     </div>
  95.   </div>
  96.  <div class="container" >
  97.     <div class="card" style="margin:10px 0;">
  98.         <div class="card-header">
  99.         队列名称 {{mqConfig.exchange}} <span v-if="log.length>0">收到<b v-text="log.length"></b>条信息</span>
  100.         </div>
  101.      <ul class="list-group list-group-flush" v-if="log.length>0">
  102.         <li class="list-group-item" v-for="v in log"><b v-text="v.t"></b> <span v-text="v.s"></span></li>
  104.       </ul>
  105.         <div class="card-body" v-else>
  106.             <h5 class="card-title">看状态</h5>
  107.             <p class="card-text" v-html="message">...</p>
  109.         </div>
  110.       </div>
  111.  </div>
  112.  <div class="b-example-divider"></div>
  113.  </main>
  114.  <script>
  115. var app = new Vue({
  116.     el: 'main',
  117.     data: {
  118.         message: '等待链接!',
  119.         smsg:'',
  120.         log:[],
  121.         mqConfig:{
  122.           exchange:'/exchange/pen_test/test' //exchange为pen_test 肉Routing Key 为test
  123.           ,isConnect:false
  124.         },
  125.       stompClient:null
  126.     },
  127.     created: function () {
  128.         this.hello();
  129.     },
  130.     mounted:function () {
  131.         this.start();
  132.     },
  133.     methods:{
  134.         start:function (){
  135.             console.log('开始>>');
  136.           const stompConfig = {
  137.             // Typically login, passcode and vhost
  138.             // Adjust these for your broker
  139.             connectHeaders: {
  140.               login: "MQ的user",
  141.               passcode: "*****",
  142.               key:'mytest'
  143.             },
  145.             // Broker URL, should start with ws:// or wss:// - adjust for your broker setup
  146.             brokerURL: "ws://ap.penly.cn:15674/ws",
  148.             // Keep it off for production, it can be quit verbose
  149.             // Skip this key to disable
  150.             debug:  (str)=> {
  151.               console.log('['+this.getFormatDate() +']STOMP: ' + str);
  152.             },
  154.             // If disconnected, it will retry after 200ms
  155.             reconnectDelay: 200,
  157.             // Subscriptions should be done inside onConnect as those need to reinstated when the broker reconnects
  158.             onConnect:  (frame)=> {
  159.               console.log('onConnect');
  160.               this.message='链接成功正在等待收集数据！' ;
  161.               // The return object has a method called `unsubscribe`
  162.               //const subscription = stompClient.subscribe('/exchange/pen/stroke', function (message) {
  163.               const subscription = this.stompClient.subscribe( this.mqConfig.exchange,  this.displayIncomingMessageNew );
  164.               this.mqConfig.isConnect=true;
  165.             },
  166.             onStompError :(f)=>{
  167.               console.log('error',f);
  168.               this.message='错误>>'+f.body;
  169.             },
  170.             onError:(f)=>{
  171.               console.log('error',f);
  172.             }
  174.           };
  175.           // Create an instance
  176.           this.stompClient= new StompJs.Client(stompConfig);
  177.           // You can set additional configuration here
  179.           // Attempt to connect
  180.           this.stompClient.activate();
  181.         },
  182.       displayIncomingMessageNew:function (message){
  183.           console.log('收到数据啊>>' , message);
  184.           //this.log.push({t:this.getFormatDate(),s:message.body });
  185.           //this.log.splice( {t:this.getFormatDate(),s:message.body });
  186.           this.log.splice(0,0,{t:this.getFormatDate(),s:message.body });
  187.           console.log('log length>>',this.log.length );
  188.       },
  189.         hello: function () {
  190.             console.log('hello from mixin!')
  191.         },
  192.         send:function ( ){
  193.           if(  ! this.mqConfig.isConnect  ) return;
  194.           if( !this.smsg) return ;
  195.           this.stompClient.publish({
  196.             destination: this.mqConfig.exchange,
  197.             body: this.smsg
  198.           });
  199.           this.smsg='';
  200.         },
  201.        getFormatDate:function() {
  202.           var date = new Date();
  203.           var month = date.getMonth() + 1;
  204.           var strDate = date.getDate();
  205.           var hours = date.getHours();
  206.           var minutes = date.getMinutes();
  207.           var seconds = date.getSeconds();
  208.           if (month >= 1 && month <= 9) {
  209.             month = "0" + month;
  210.           }
  211.           if (strDate >= 0 && strDate <= 9) {
  212.             strDate = "0" + strDate;
  213.           }
  214.           if (hours >= 0 && hours <= 9) {
  215.             hours = "0" + hours;
  216.           }
  217.           if (minutes >= 0 && minutes <= 9) {
  218.             minutes = "0" + minutes;
  219.           }
  220.           if (seconds >= 0 && seconds <= 9) {
  221.             seconds = "0" + seconds;
  222.           }
  223.           return date.getFullYear() + "-" + month + "-" + strDate
  224.                   + " " + date.getHours() + ":" + minutes + ":" + seconds;
  225.         }
  226.     }
  228. });
  229.  </script>
  231.   </body>
  232. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注