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

最新推荐文章于 2024-03-20 07:40:15 发布

为天空着色

最新推荐文章于 2024-03-20 07:40:15 发布

阅读量3.6k

点赞数

分类专栏： rabbitmq 文章标签： Rabbitmq+html Rabbitmq+sockjs+stomp

本文链接：https://blog.csdn.net/u010533511/article/details/90768579

版权

rabbitmq 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

为天空着色

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
Rabbitmq+sockjs+stomp.js前端的使用

rabbitmq的安装：https://blog.csdn.net/u010533511/article/details/90752530rabbitmq-user1.html给队列user1发送消息，监听消费队列user2的消息 rabbitmq-user2.html给队列user2发送消息，监听消费队列user1的消息这样rabbitmq-user1.html和rabbitm...
复制链接

扫一扫