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

Rabbitmq+sockjs+stomp.js前端的使用
- 转自：https://blog.csdn.net/u010533511/article/details/90768579
- rabbitmq的安装：https://blog.csdn.net/u010533511/article/details/90752530
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. }
  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. };;
  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. };
  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;">
  63. </div>
  64. 
  65. <div id="message">
  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>
  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. }
  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. };
  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. };
  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;">
  63. </div>
  64. <div id="message">
  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>
  74. </body>
  75. </html>
- rabbitmq的安装：https://blog.csdn.net/u010533511/article/details/90752530
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. }
  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. };;
  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. };
  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;">
  63. </div>
  64. 
  65. <div id="message">
  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>
  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. }
  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. };
  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. };
  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;">
  63. </div>
  64. <div id="message">
  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>
  74. </body>
  75. </html>
相关阅读:
Python笔记 #17# Pandas: Merge
MVC相关资料收集
 Python笔记 #16# Pandas: Operations
Least slack time scheduling
Python笔记 #15# Pandas: Missing Data
Python笔记 #14# Pandas: Selection
C++中const引用的是对象的时候只能调用该对象的f()const方法
 模板与泛型编程
 c++中的单例模式
 C/C++异常处理机制
原文地址：https://www.cnblogs.com/javalinux/p/14312990.html