使用websocket连接Activemq，让前端接收MQTT消息

2023-05-16

使用websocket连接Activemq，让前端接收MQTT消息

Activemq简介
准备工作
简单示例

Activemq简介

Apache ActiveMQ™ is the most popular open source, multi-protocol, Java-based messaging server. It supports industry standard protocols so users get the benefits of client choices across a broad range of languages and platforms. Connectivity from C, C++, Python, .Net, and more is available. Integrate your multi-platform applications using the ubiquitous AMQP protocol. Exchange messages between your web applications using STOMP over websockets. Manage your IoT devices using MQTT. Support your existing JMS infrastructure and beyond. ActiveMQ offers the power and flexibility to support any messaging use-case.
翻译过来就是：
Apache ActiveMQ™是流行的开源，多协议，基于Java的消息服务器。它支持行业标准协议，因此用户可以通过广泛的语言和平台获得客户选择的好处。可以使用C，C ++，Python，.Net等语言进行连接。可以使用被广泛使用的AMQP协议集成多平台应用程序。使用STOMP（流式文本定向消息传递协议）通过websockets 在Web应用程序之间交换消息。使用MQTT（基于发布/订阅范式的消息协议）管理IoT设备。支持现有的JMS基础架构等。ActiveMQ提供强大的功能和灵活性，以支持任何消息传递用例。
直接点：
Activemq就是一个消息中间件，由Java语言开发，可以支持多种语言连接。
重点：

Activemq需要Java环境
支持多协议连接

准备工作

安装Activemq
启动Activemq
需要sudo权限
websocket端口号：61614
下载MQTT Websocket客户端Js库
CSDN下载地址：https://download.csdn.net/download/qq_36963372/11143970
cdn地址：

<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>

简单示例

代码都在这里了，这只是测试代码，还是有很多bug的，需要周边代码来完善。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mqtt-websocket测试</title>
    // 替换成你的本地地址或者cdn地址
    <script src='js/jquery-1.7.2.min.js'></script>
    <script src="js/mqttws31.js"></script>
</head>
<body>
<div id="messages">
    <button id="start_connect" onclick="connect_server()">连接</button>
    <button id="stop_connect" onclick="dis_connect()">断开连接</button>
    <br>
    <input type="text" id="msg_input">
    <button id="send_btn" onclick="send_msg()">发送</button>
</div>
<br>
<div id="ws_log"><p>日志</p><br></div>

<script>
    var client;
    // 订阅主题
    var topic_name = '/test_mqtt_ws/web_client';

    function connect_server() {
        // 终端ID，可以随机，可以手动设定
        // var clientID = "client-" + (Math.floor(Math.random() * 100000));
        var clientID = 'web-0001';
        // Activemq中间件地址
        client = new Messaging.Client('127.0.0.1', 61614, clientID);

        // 连接
        client.connect({
            // 根据需要选择
            // userName: user,
            // password: password,
            // 连接成功
            onSuccess: onConnect,
            // 连接出错
            onFailure: onFailure,
        });

        client.onConnect = onConnect;
        client.onMessageArrived = onMessageArrived;
        client.onConnectionLost = onConnectionLost;
    }

    // 显示输出内容
    function ws_logs(str) {
        $("#ws_log").append(str + "<br>");
    }

    // 建立连接
    function onConnect() {
        ws_logs("正在建立连接");
        // 订阅Topic
        client.subscribe(topic_name);
    }

    // 连接失败
    function onFailure(failure) {
        ws_logs("连接失败");
        ws_logs(failure.errorMessage);
    }

    // 监听消息
    function onMessageArrived(message) {
        ws_logs(message.payloadString);
        // 如果你传输的是Json数据，在这里就可以进行解析了
        var json_obj = eval('(' + message.payloadString + ')')
        if (json_obj.cmd == '1') {
			// 执行操作
		}
    }

    // 连接中断
    function onConnectionLost() {
        if (responseObject.errorCode !== 0) {
            // client.clientId 可以获取到ClientID
            ws_logs(client.clientId + ": " + responseObject.errorCode);
        }
    }

    // 主动断开连接
    function dis_connect() {
        client.disconnect();
        ws_logs("断开连接");
        return false;
    }

    // 发送消息
    function send_msg() {
        var mqtt_msg_send = $('#msg_input').val();
        if (mqtt_msg_send) {
            message = new Messaging.Message(mqtt_msg_send);
            message.destinationName = topic_name;
            // 发送mqtt消息
            client.send(message);
            $('#msg_input').val("");
        }
        return false;
    }
</script>

</body>
</html>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)