碼上歡樂
相關內容    簡體    繁體

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刪除。



猜您在找 【前端開發】websoket即時通信js庫SockJS和Stomp的使用教程 解決sockjs、stomp在uni-app端使用的坑 （超詳細）SpringBoot+RabbitMQ+Stomp+JS實現前端消息推送 WebSocket消息推送，SockJS, STOMP sockjs+stomp的websocket插件 Springboot + Websocket + Sockjs + Stomp + Vue + Iview 實現java后端日志顯示在前端web頁面上 前端vue使用stomp.js、sock.js完成websocket ActiveMQ、Stomp、SockJS入門級應用 springboot websocket的封裝js ，STOMP使用 前端必學技巧sockjs
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM