码上快乐

相关内容   简体   繁体

Rabbitmq+sockjs+stomp.js前端的使用

本文转载自  查看原文  2021-01-22 14:07  306    rabbitmq
  1. rabbitmq-user1.html给队列user1发送消息，监听消费队列user2的消息
  2. rabbitmq-user2.html给队列user2发送消息，监听消费队列user1的消息

      这样rabbitmq-user1.html和rabbitmq-user1.html 实现了点对点的消息发送与接收

 

  • 前台html发送消息(rabbitmq-user1.html)
    1.  
      <!DOCTYPE html>
    2.  
      <html lang="en">
    3.  
      <head>
    4.  
      <meta charset="UTF-8">
    5.  
      <title>Title </title>
    6.  
      <script src="jquery-1.9.1.min.js"> </script>
    7.  
      <script src="sockjs.min.js"> </script>
    8.  
      <script src="stomp.js"> </script>
    9.  
      <script>
    10.  
      // 初始化 ws 对象
    11.  
      if (location.search == '?ws') {
    12.  
      console.log( '------------------');
    13.  
      var ws = new WebSocket( 'ws://192.168.135.xxx:15674/ws');
    14.  
      } else {
    15.  
      console.log( '******************');
    16.  
      var ws = new SockJS( 'http://192.168.135.xxx:15674/stomp');
    17.  
      }
    18.  
       
    19.  
      // 获得Stomp client对象
    20.  
      var client = Stomp.over(ws);
    21.  
      // SockJS does not support heart-beat: disable heart-beats
    22.  
      //heart-beating也就是频率，incoming是接收频率，outgoing是发送频率
    23.  
      client.heartbeat.outgoing = 0; //发送频率
    24.  
      client.heartbeat.incoming = 0; //接收频率
    25.  
      //关闭控制台调试数据：client.debug = null
    26.  
      client.debug = function(str) {
    27.  
      $( "#debug").append(str + "<br/>");
    28.  
      };;
    29.  
       
    30.  
      // 定义连接成功回调函数
    31.  
      var on_connect = function(x) {
    32.  
      //data.body是接收到的数据 (接收队列user2的数据)
    33.  
      client.subscribe( "/queue/user2", function(data) {
    34.  
      var msg = data.body;
    35.  
      console.log( "收到数据：");
    36.  
      console.log(data);
    37.  
      $( "#message").append(msg + "<br/>");
    38.  
      data.ack(); //如果后面带了参数 ack 就是指定要手动确认消息，没带就是自动确认
    39.  
      },{ ack: 'client'});
    40.  
      };
    41.  
       
    42.  
      // 定义错误时回调函数
    43.  
      var on_error = function() {
    44.  
      console.log( 'error');
    45.  
      };
    46.  
      // 连接RabbitMQ
    47.  
      client.connect( 'zcw', '123456', on_connect, on_error, '/');
    48.  
      console.log(on_connect);
    49.  
      $( function () {
    50.  
      //发送消息到队列user1
    51.  
      $( '#send').click( function () {
    52.  
      var content=$( '#sendContent').val();
    53.  
      console.log(content);
    54.  
      client.send( "/queue/user1", {}, content);
    55.  
      $( '#sendContent').val( '');
    56.  
      });
    57.  
      });
    58.  
      </script>
    59.  
      </head>
    60.  
      <body>
    61.  
      <div id="debug" style="display: none;">
    62.  
       
    63.  
      </div>
    64.  
      <!--显示接收到的消息-->
    65.  
      <div id="message">
    66.  
       
    67.  
      </div>
    68.  
      <div id="content">
    69.  
      <!--发送消息的内容-->
    70.  
      <textarea id="sendContent"> </textarea>
    71.  
      </div>
    72.  
      <div id="success">
    73.  
      <button id="send" >Send Mssages </button>
    74.  
      </div>
    75.  
       
    76.  
      </body>
    77.  
      </html>

     

  • 前台html消费消息(rabbitmq-user2.html)
    1.  
      <!DOCTYPE html>
    2.  
      <html lang="en">
    3.  
      <head>
    4.  
      <meta charset="UTF-8">
    5.  
      <title>Title </title>
    6.  
      <script src="jquery-1.9.1.min.js"> </script>
    7.  
      <script src="sockjs.min.js"> </script>
    8.  
      <script src="stomp.js"> </script>
    9.  
      <script>
    10.  
      // 初始化 ws 对象
    11.  
      if (location.search == '?ws') {
    12.  
      console.log( '------------------');
    13.  
      var ws = new WebSocket( 'ws://192.168.135.xxx:15674/ws');
    14.  
      } else {
    15.  
      console.log( '******************');
    16.  
      var ws = new SockJS( 'http://192.168.135.xxx:15674/stomp');
    17.  
      }
    18.  
       
    19.  
      // 获得Stomp client对象
    20.  
      var client = Stomp.over(ws);
    21.  
      // SockJS does not support heart-beat: disable heart-beats
    22.  
      //heart-beating也就是频率，incoming是接收频率，outgoing是发送频率
    23.  
      client.heartbeat.outgoing = 0; //发送频率
    24.  
      client.heartbeat.incoming = 0; //接收频率
    25.  
      //关闭控制台调试数据：client.debug = null
    26.  
      client.debug = function(str) {
    27.  
      $( "#debug").append(str + "<br/>");
    28.  
      };
    29.  
       
    30.  
      // 定义连接成功回调函数
    31.  
      var on_connect = function(x) {
    32.  
      //接收user1队列的数据
    33.  
      client.subscribe( "/queue/user1", function(data) {
    34.  
      var msg = data.body;
    35.  
      console.log( "收到数据：");
    36.  
      console.log(data);
    37.  
      $( "#message").append(msg + "<br/>");
    38.  
      data.ack(); //如果后面带了参数 ack 就是指定要手动确认消息，没带就是自动确认
    39.  
      },{ ack: 'client'});
    40.  
      };
    41.  
      //client.send("/queue/default", {}, "I thought I was in a transaction!");
    42.  
      // 定义错误时回调函数
    43.  
      var on_error = function() {
    44.  
      console.log( 'error');
    45.  
      };
    46.  
       
    47.  
      // 连接RabbitMQ
    48.  
      client.connect( 'zcw', '123456', on_connect, on_error, '/');
    49.  
      $( function () {
    50.  
      //发送消息到user2队列
    51.  
      $( '#send').click( function () {
    52.  
      var content=$( '#sendContent').val();
    53.  
      console.log(content);
    54.  
      client.send( "/queue/user2", {}, content);
    55.  
      $( '#sendContent').val( '');
    56.  
      });
    57.  
      });
    58.  
      </script>
    59.  
      </head>
    60.  
      <body>
    61.  
      <div id="debug" style="display: none;">
    62.  
       
    63.  
      </div>
    64.  
      <div id="message">
    65.  
       
    66.  
      </div>
    67.  
      <div id="content">
    68.  
      <textarea id="sendContent"> </textarea>
    69.  
      </div>
    70.  
      <div id="success">
    71.  
      <button id="send" >Send Mssages </button>
    72.  
      </div>
    73.  
       
    74.  
      </body>
    75.  
      </html>
  1. rabbitmq-user1.html给队列user1发送消息，监听消费队列user2的消息
  2. rabbitmq-user2.html给队列user2发送消息，监听消费队列user1的消息

      这样rabbitmq-user1.html和rabbitmq-user1.html 实现了点对点的消息发送与接收

  • 前台html发送消息(rabbitmq-user1.html)
    1.  
      <!DOCTYPE html>
    2.  
      <html lang="en">
    3.  
      <head>
    4.  
      <meta charset="UTF-8">
    5.  
      <title>Title </title>
    6.  
      <script src="jquery-1.9.1.min.js"> </script>
    7.  
      <script src="sockjs.min.js"> </script>
    8.  
      <script src="stomp.js"> </script>
    9.  
      <script>
    10.  
      // 初始化 ws 对象
    11.  
      if (location.search == '?ws') {
    12.  
      console.log( '------------------');
    13.  
      var ws = new WebSocket( 'ws://192.168.135.xxx:15674/ws');
    14.  
      } else {
    15.  
      console.log( '******************');
    16.  
      var ws = new SockJS( 'http://192.168.135.xxx:15674/stomp');
    17.  
      }
    18.  
       
    19.  
      // 获得Stomp client对象
    20.  
      var client = Stomp.over(ws);
    21.  
      // SockJS does not support heart-beat: disable heart-beats
    22.  
      //heart-beating也就是频率，incoming是接收频率，outgoing是发送频率
    23.  
      client.heartbeat.outgoing = 0; //发送频率
    24.  
      client.heartbeat.incoming = 0; //接收频率
    25.  
      //关闭控制台调试数据：client.debug = null
    26.  
      client.debug = function(str) {
    27.  
      $( "#debug").append(str + "<br/>");
    28.  
      };;
    29.  
       
    30.  
      // 定义连接成功回调函数
    31.  
      var on_connect = function(x) {
    32.  
      //data.body是接收到的数据 (接收队列user2的数据)
    33.  
      client.subscribe( "/queue/user2", function(data) {
    34.  
      var msg = data.body;
    35.  
      console.log( "收到数据：");
    36.  
      console.log(data);
    37.  
      $( "#message").append(msg + "<br/>");
    38.  
      data.ack(); //如果后面带了参数 ack 就是指定要手动确认消息，没带就是自动确认
    39.  
      },{ ack: 'client'});
    40.  
      };
    41.  
       
    42.  
      // 定义错误时回调函数
    43.  
      var on_error = function() {
    44.  
      console.log( 'error');
    45.  
      };
    46.  
      // 连接RabbitMQ
    47.  
      client.connect( 'zcw', '123456', on_connect, on_error, '/');
    48.  
      console.log(on_connect);
    49.  
      $( function () {
    50.  
      //发送消息到队列user1
    51.  
      $( '#send').click( function () {
    52.  
      var content=$( '#sendContent').val();
    53.  
      console.log(content);
    54.  
      client.send( "/queue/user1", {}, content);
    55.  
      $( '#sendContent').val( '');
    56.  
      });
    57.  
      });
    58.  
      </script>
    59.  
      </head>
    60.  
      <body>
    61.  
      <div id="debug" style="display: none;">
    62.  
       
    63.  
      </div>
    64.  
      <!--显示接收到的消息-->
    65.  
      <div id="message">
    66.  
       
    67.  
      </div>
    68.  
      <div id="content">
    69.  
      <!--发送消息的内容-->
    70.  
      <textarea id="sendContent"> </textarea>
    71.  
      </div>
    72.  
      <div id="success">
    73.  
      <button id="send" >Send Mssages </button>
    74.  
      </div>
    75.  
       
    76.  
      </body>
    77.  
      </html>

     

  • 前台html消费消息(rabbitmq-user2.html)
    1.  
      <!DOCTYPE html>
    2.  
      <html lang="en">
    3.  
      <head>
    4.  
      <meta charset="UTF-8">
    5.  
      <title>Title </title>
    6.  
      <script src="jquery-1.9.1.min.js"> </script>
    7.  
      <script src="sockjs.min.js"> </script>
    8.  
      <script src="stomp.js"> </script>
    9.  
      <script>
    10.  
      // 初始化 ws 对象
    11.  
      if (location.search == '?ws') {
    12.  
      console.log( '------------------');
    13.  
      var ws = new WebSocket( 'ws://192.168.135.xxx:15674/ws');
    14.  
      } else {
    15.  
      console.log( '******************');
    16.  
      var ws = new SockJS( 'http://192.168.135.xxx:15674/stomp');
    17.  
      }
    18.  
       
    19.  
      // 获得Stomp client对象
    20.  
      var client = Stomp.over(ws);
    21.  
      // SockJS does not support heart-beat: disable heart-beats
    22.  
      //heart-beating也就是频率，incoming是接收频率，outgoing是发送频率
    23.  
      client.heartbeat.outgoing = 0; //发送频率
    24.  
      client.heartbeat.incoming = 0; //接收频率
    25.  
      //关闭控制台调试数据：client.debug = null
    26.  
      client.debug = function(str) {
    27.  
      $( "#debug").append(str + "<br/>");
    28.  
      };
    29.  
       
    30.  
      // 定义连接成功回调函数
    31.  
      var on_connect = function(x) {
    32.  
      //接收user1队列的数据
    33.  
      client.subscribe( "/queue/user1", function(data) {
    34.  
      var msg = data.body;
    35.  
      console.log( "收到数据：");
    36.  
      console.log(data);
    37.  
      $( "#message").append(msg + "<br/>");
    38.  
      data.ack(); //如果后面带了参数 ack 就是指定要手动确认消息，没带就是自动确认
    39.  
      },{ ack: 'client'});
    40.  
      };
    41.  
      //client.send("/queue/default", {}, "I thought I was in a transaction!");
    42.  
      // 定义错误时回调函数
    43.  
      var on_error = function() {
    44.  
      console.log( 'error');
    45.  
      };
    46.  
       
    47.  
      // 连接RabbitMQ
    48.  
      client.connect( 'zcw', '123456', on_connect, on_error, '/');
    49.  
      $( function () {
    50.  
      //发送消息到user2队列
    51.  
      $( '#send').click( function () {
    52.  
      var content=$( '#sendContent').val();
    53.  
      console.log(content);
    54.  
      client.send( "/queue/user2", {}, content);
    55.  
      $( '#sendContent').val( '');
    56.  
      });
    57.  
      });
    58.  
      </script>
    59.  
      </head>
    60.  
      <body>
    61.  
      <div id="debug" style="display: none;">
    62.  
       
    63.  
      </div>
    64.  
      <div id="message">
    65.  
       
    66.  
      </div>
    67.  
      <div id="content">
    68.  
      <textarea id="sendContent"> </textarea>
    69.  
      </div>
    70.  
      <div id="success">
    71.  
      <button id="send" >Send Mssages </button>
    72.  
      </div>
    73.  
       
    74.  
      </body>
    75.  
      </html>


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 （超详细）SpringBoot+RabbitMQ+Stomp+JS实现前端消息推送 sockjs+stomp的websocket插件 Springboot + Websocket + Sockjs + Stomp + Vue + Iview 实现java后端日志显示在前端web页面上 前端vue使用stomp.js、sock.js完成websocket 浅析如何使用WebSocket、SockJS、STOMP实现消息实时通讯功能：websocket/SocketJS/Stomp是什么及三者的关系、stomp协议格式、如何开启stomp、如何处理客服端发送的stomp、如何发消息给客服端、如何在任何地方发消息、如何给目标或指定用户发消息 Rabbitmq Web Stomp Plugin 启用SSL springboot实现服务器端消息推送（websocket + sockjs + stomp） python使用stomp连接activemq 浅析如何使用Vue + Xterm.js + SpringBoot + Websocket / Stomp + JSch 实现一个 web terminal 网页版的终端工具 vue使用SockJS实现webSocket通信
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM