CentOS7 下 Docker 启动的 RabbitMQ 开启 WebSocket 以使用 JavaScript 进行连接

    教程翻新   Docker RabbitMQ JavaScript  评论

自用的油猴脚本需要追加一个消息推送的功能，决定用 RabbitMQ 消费者的方式实现，但是看了下 JavaScript 连接 RabbitMQ 一般都是加装 STOMP 相关的插件使其支持 WebSocket 连接方式。
我的 RabbitMQ 是 Docker 直接启动的，需要进入容器里执行，和一般的安装版本有些区别，于是还是决定记录一下顺便写个 JS 的例子。

1、Docker 启动 RabbitMQ
一笔带过了：

docker run -d --name rabbitmq --restart=always -p 5672:5672 -p 15672:15672 -p 15674:15674 rabbitmq:3.9-management

注意这里的 15674 端口是用以 WebSocket 连接的，一定要配置映射并在宿主机上开放！
如果你之前没有开启的话，请停止容器并手动修改配置文件后重启。
① 停止容器：

# 查看所有容器，并记录 CONTAINER ID
docker ps -a
# 停止容器
docker stop 164xxxxxx282
# 停止 Docker 服务
service docker stop

② 修改对应容器的配置文件，首先进入文件夹：

cd /var/lib/docker/containers/$CONTAINER_ID/

修改第一个配置文件：

vi hostconfig.json

...
...
{
    "PortBindings":{
			"15674/tcp":[{"HostIp":"","HostPort":"15674"}]
    }
}
...
...

修改第二个配置文件

vi config.v2.json

...
...
{
    "ExposedPorts":{
			"15674/tcp":{}
    }
}
...
...

③ 重启 Docker 服务和容器：

service docker start
docker start $CONTAINER_ID

再检查容器就可以看到 15674 端口映射好了。

确保宿主机对应端口和防火墙开启后，访问 http://IP:15672 就可以访问到管理页面，账户密码均为 guest：

同时可以看到当前是 STOMP 相关服务的监听端口的。

2、进入容器安装 STOMP 相关插件
进入 RabbitMQ 容器：

docker exec -it $CONTAINER_ID /bin/bash

安装 STOMP 相关插件：

rabbitmq-plugins enable rabbitmq_web_stomp rabbitmq_web_stomp_examples

安装插件
之后退出容器。

3、重启容器
执行：

docker restart $CONTAINER_ID

重启之后回到管理页面，看到有 stomp 服务和其监听端口就说明成功了：
成功

4、JavaScript 连接样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RabbitMQ WebSocket 测试页面</title>
    <!-- 依赖的包 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.6.0/sockjs.js"></script>
    <script type="text/javascript">
        // 连接信息，自行替换 IP
        var yourIp = "127.0.0.1";
        var ws = new WebSocket("ws://"+yourIp+":15674/ws");
        var client = Stomp.over(ws);
        // 禁用心跳
        client.heartbeat.outgoing = 0;
        client.heartbeat.incoming = 0;
        // 连接成功的回调函数
        var on_connect = function(x) {
            // 消费者
            client.subscribe("/queue/queue", function(data) {
                var msg = data.body;
                $("#message").append("收到数据：" + msg);
            });
        };
        // 出错时的回调函数
        var on_error = function() {
            console.log("error");
        };
        // 连接RabbitMQ，用户密码请自行替换
        client.connect("guest", "guest", on_connect, on_error, "/");
        console.log("已连接至 RabbitMQ！");
    </script>
</head>
<body>
    
</body>
</html>

启动页面后，去控制台查看下日志：
日志
运行正常的话到管理页面确定队列状态：
连接成功
插入一条信息确认回调函数正常：
发布
接收

结束。