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

转自：https://blog.csdn.net/u010533511/article/details/90768579
rabbitmq的安装：https://blog.csdn.net/u010533511/article/details/90752530

rabbitmq-user1.html给队列user1发送消息，监听消费队列user2的消息
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

rabbitmq-user1.html给队列user1发送消息，监听消费队列user2的消息
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>