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

纪勇军

2023-12-01

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)

<!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

个人笔记如有错误，欢迎指正.

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

相关阅读

相关文章

相关问答

相关文档