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

骑猪看日落 2022-01-21 22:51 341阅读 0赞

*  rabbitmq的安装：[https://blog.csdn.net/u010533511/article/details/90752530][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)
 *      <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script src="jquery-1.9.1.min.js"></script>
            <script src="sockjs.min.js"></script>
            <script src="stomp.js"></script>
            <script>
                // 初始化 ws 对象
                if (location.search == '?ws') {
                    console.log('------------------');
                    var ws = new WebSocket('ws://192.168.135.xxx:15674/ws');
                } else {
                    console.log('******************');
                    var ws = new SockJS('http://192.168.135.xxx:15674/stomp');
                }
        
                // 获得Stomp client对象
                var client = Stomp.over(ws);
                // SockJS does not support heart-beat: disable heart-beats
                //heart-beating也就是频率，incoming是接收频率，outgoing是发送频率
                client.heartbeat.outgoing = 0; //发送频率
                client.heartbeat.incoming = 0; //接收频率
                //关闭控制台调试数据：client.debug = null
                client.debug =function(str) {
                    $("#debug").append(str + "<br/>");
                };;
        
                // 定义连接成功回调函数
                var on_connect = function(x) {
                    //data.body是接收到的数据 (接收队列user2的数据)
                    client.subscribe("/queue/user2", function(data) {
                        var msg = data.body;
                        console.log("收到数据：");
                        console.log(data);
                        $("#message").append(msg + "<br/>");
                        data.ack(); //如果后面带了参数 ack  就是指定要手动确认消息，没带就是自动确认
                    },{ack:'client'});
                };
        
                // 定义错误时回调函数
                var on_error =  function() {
                    console.log('error');
                };
                // 连接RabbitMQ
                client.connect('zcw', '123456', on_connect, on_error, '/');
                console.log(on_connect);
                $(function () {
                    //发送消息到队列user1
                    $('#send').click(function () {
                        var content=$('#sendContent').val();
                        console.log(content);
                        client.send("/queue/user1", {}, content);
                        $('#sendContent').val('');
                    });
                });
            </script>
        </head>
        <body>
        <div id="debug" style="display: none;">
        
        </div>
        
        <div id="message">
        
        </div>
        <div id="content">
            
            <textarea id="sendContent"></textarea>
        </div>
        <div id="success">
            <button id="send" >Send Mssages</button>
        </div>
        
        </body>
        </html>
    
     
 *  前台html消费消息(rabbitmq-user2.html)
 *      <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script src="jquery-1.9.1.min.js"></script>
            <script src="sockjs.min.js"></script>
            <script src="stomp.js"></script>
            <script>
                // 初始化 ws 对象
                if (location.search == '?ws') {
                    console.log('------------------');
                    var ws = new WebSocket('ws://192.168.135.xxx:15674/ws');
                } else {
                    console.log('******************');
                    var ws = new SockJS('http://192.168.135.xxx:15674/stomp');
                }
        
                // 获得Stomp client对象
                var client = Stomp.over(ws);
                // SockJS does not support heart-beat: disable heart-beats
                //heart-beating也就是频率，incoming是接收频率，outgoing是发送频率
                client.heartbeat.outgoing = 0; //发送频率
                client.heartbeat.incoming = 0; //接收频率
                //关闭控制台调试数据：client.debug = null
                client.debug =function(str) {
                    $("#debug").append(str + "<br/>");
                };
        
                // 定义连接成功回调函数
                var on_connect = function(x) {
                    //接收user1队列的数据
                    client.subscribe("/queue/user1", function(data) {
                        var msg = data.body;
                        console.log("收到数据：");
                        console.log(data);
                        $("#message").append(msg + "<br/>");
                        data.ack(); //如果后面带了参数 ack  就是指定要手动确认消息，没带就是自动确认
                    },{ack:'client'});
                };
                //client.send("/queue/default", {}, "I thought I was in a transaction!");
                // 定义错误时回调函数
                var on_error =  function() {
                    console.log('error');
                };
        
                // 连接RabbitMQ
                client.connect('zcw', '123456', on_connect, on_error, '/');
                $(function () {
                    //发送消息到user2队列
                    $('#send').click(function () {
                        var content=$('#sendContent').val();
                        console.log(content);
                        client.send("/queue/user2", {}, content);
                        $('#sendContent').val('');
                    });
                });
            </script>
        </head>
        <body>
        <div id="debug" style="display: none;">
        
        </div>
        <div id="message">
        
        </div>
        <div id="content">
            <textarea id="sendContent"></textarea>
        </div>
        <div id="success">
        <button id="send" >Send Mssages</button>
        </div>
        
        </body>
        </html>
    
    测试文件下载链接：https://pan.baidu.com/s/1MZ\_ikWWYjLesbgX0\_7U35Q   
    提取码：vp7y 
 *  个人笔记如有错误，欢迎指正.

[https_blog.csdn.net_u010533511_article_details_90752530]: https://blog.csdn.net/u010533511/article/details/90752530