Ubuntu下搭建Mqtt服务,跑Websocket JS客户端

一、运行环境Ubuntu14.04

二、安装依赖

  1. sudo apt-get update
  2. sudo apt-get install g++
  3. sudo apt-get install cmake
  4. sudo apt-get install openssl 
  5. sudo apt-get install libssl-dev
  6. sudo apt-get install xsltproc
  7. sudo apt-get install docbook-xsl
  8. sudo apt-get install docbook-defguide
  9. sudo apt-get install build-essential
  10. sudo apt-get install libc-ares-dev
  11. sudo apt-get install uuid-dev
  12. sudo apt-get install daemon
  13. sudo apt-get install libwebsockets-dev
  14. sudo apt remove libwebsockets3

三、安装libwebsockets(Websocket支持)

  1. git clone https://github.com/warmcat/libwebsockets.git
  2. cd libwebsockets
  3. mkdir build
  4. cd build
  5. cmake ..
  6. make
  7. sudo make install
  8. sudo ldconfig

四、安装Mosquitto(Mqtt服务器)

  1. git clone https://github.com/eclipse/mosquitto.git
  2. cd mosquitto
  3. 更改configure.mk中
    WITH_WEBSOCKETS:=yes
    WITH_SRV:=no  
  4. make
  5. sudo make install 
  6. sudo cp mosquitto.conf /etc/mosquitto
  7. 请在/etc/mosquitto/mosquitto.conf 的“Default Listener”  一节添加如下几行:

        port 1883
        listener 1884
        protocol websockets 

 

五、运行mqtt服务

mosquitto -c /etc/mosquitto/mosquitto.conf

六、测试mqtt

mosquitto_sub -h 127.0.0.1 -p 1883 -t "track" -v (订阅消息,主题为“track”)

mosquitto_pub -h 127.0.0.1 -t "track" -m "test message" (发送消息)

七、MQTT协议 Websocket JS客户端

<html>
<head>
    <title>Mosquitto Websockets</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        var mqtt;
        var reconnectTimeout = 3000;
        var host = '127.0.0.1';    // hostname or IP address
        var port = 1884;
        var topic = 'track';        // topic to subscribe to
        var useTLS = false;
        var username = null;
        var password = null;
        // username = "test";
        // password = "123456";
        var cleansession = true;

        function MQTTconnect() {
            mqtt = new Paho.MQTT.Client(
                host,
                port,
                "web_" + parseInt(Math.random() * 100,
                10));
            var options = {
                timeout: 3,
                useSSL: useTLS,
                cleanSession: cleansession,
                onSuccess: onConnect,
                onFailure: function (message) {
                    $('#status').val("Connection failed: " + message.errorMessage + "Retrying");
                    setTimeout(MQTTconnect, reconnectTimeout);
                }
            };

            mqtt.onConnectionLost = onConnectionLost;
            mqtt.onMessageArrived = onMessageArrived;

            if (username != null) {
                options.userName = username;
                options.password = password;
            }
            console.log("Host="+ host + ", port=" + port + " TLS = " + useTLS + " username=" + username + " password=" + password);
            mqtt.connect(options);
        }

        function onConnect() {
            $('#status').val('Connected to ' + host + ':' + port);
            // Connection succeeded; subscribe to our topic
            mqtt.subscribe(topic, {qos: 0});
            $('#topic').val(topic);
        }

        function onConnectionLost(response) {
            setTimeout(MQTTconnect, reconnectTimeout);
            $('#status').val("connection lost: " + responseObject.errorMessage + ". Reconnecting");

        };

        function onMessageArrived(message) {

            var topic = message.destinationName;
            var payload = message.payloadString;

            $('#ws').prepend('<li>' + topic + ' = ' + payload + '</li>');
        };

        function button_onclick(){
            //这里写你要执行的语句
            var tp = $('#sendtopic').val();
            var val = $('#textsend').val();
            if(tp==''||val=='')
            {
                alert("no aaa");
                return;
            }
            var message = new Paho.MQTT.Message(val);
            message.destinationName = tp;
            message.qos=0;
            mqtt.send(message);
//        mqtt.publish(tp, 0, val);
            $('#ws').prepend('<li>' + tp + ' = ' + val+ '</li>');
        };

        $(document).ready(function() {
            MQTTconnect();
        });

    </script>
</head>
<body>
<h1>Mosquitto Websockets</h1>
<div>
    <div>Subscribed to <input type='text' id='topic' disabled />
        Status: <input type='text' id='status' size="30" disabled />
        </br>
        publish to <input type='text' id='sendtopic' /> text <input type='text' id='textsend' size="30"/>
        Status: <input type='button' value="send" id='btn' οnclick="javascript:button_onclick()"/></div>
    <ul id='ws' style="font-family: 'Courier New', Courier, monospace;"></ul>
</div>
</body>
</html>

 

安装&源码

 

 

 

 

 

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: MQTT.js 是一个用于 JavaScript 的用于实现 MQTT 协议客户端库。MQTT 是一种轻量级的发布/订阅消息传输协议,可以在低带宽、不稳定网络条件下进行高效的通信。 Websocket 是一种全双工通信协议,允许在 Web 浏览器和服务器之间进行实时数据传输。与传统的 HTTP 请求-响应机制不同,Websocket 可以在浏览器和服务器之间建立长久的连接,实现双向通信,从而可以实时更新数据而无需进行多次的请求和响应过程。 MQTT.js WebSocket 是基于 MQTT.js 库使用 Websocket 进行通信的一种方式。通过使用 MQTT.js WebSocket,我们可以在浏览器中实现 MQTT 协议的功能,从而能够在 Web 应用程序中进行实时消息传输和订阅。 使用 MQTT.js WebSocket,我们可以轻松地在浏览器中创建 MQTT 客户端,与 MQTT 服务器进行连接,并通过订阅和发布主题来实现实时消息的传输。这样,我们可以实现各种场景下的实时数据传输,如物联网设备之间的通信、实时监控系统等。 总结来说,MQTT.js WebSocket 是一种用于在浏览器中实现 MQTT 协议客户端库,提供了与 MQTT 服务器进行实时消息传输的功能。使用它,我们可以实现实时消息的订阅和发布,为各种实时数据传输场景提供便利。 ### 回答2: MQTT.js是一个基于JavaScript的客户端库,用于实现MQTT协议的通信。它为Web浏览器和Node.js提供了一个简单的接口,以便实现与MQTT代理的通信。 WebSocket是一种通信协议,它提供了双向的、实时的数据传输能力。MQTT.js通过WebSocket实现与MQTT代理的通信,使得基于浏览器和Node.js的应用程序能够与MQTT代理进行实时的数据交互。 使用MQTT.js WebSocket的时候,首先需要在应用程序中引入MQTT.js库,并创建一个MQTT客户端实例。然后,通过指定WebSocket的URL和端口号,将MQTT客户端MQTT代理进行连接连接成功后,就可以使用MQTT.js的API来发布消息或订阅主题了。 MQTT.js WebSocket的优点是它能够在浏览器和Node.js环境下进行跨平台的通信。同时,它也支持多种认证机制和可定制化的选项,以及保持长连接和断线重连的功能。此外,MQTT.jsMQTT代理之间的通信是基于二进制协议的,所以效率较高。 总结起来,MQTT.js WebSocket提供了一种便捷的方式,使得浏览器和Node.js应用程序能够通过MQTT协议MQTT代理进行实时的双向数据交互。 ### 回答3: MQTT.js 是一个基于 JavaScript 的 MQTT 客户端库,用于在浏览器或 Node.js 环境中使用 MQTT 协议进行消息传输。 WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,允许客户端服务器之间实时地进行双向通信。 MQTT.js 通过使用 WebSocket 协议来提供浏览器中的 MQTT 客户端功能。它允许在浏览器中使用 MQTT 协议进行消息传输,实现实时数据传递。 使用 MQTT.js WebSocket,可以通过创建一个 MQTT 客户端实例来连接MQTT 代理服务器。通过这个客户端实例,可以订阅和发布消息,并与其他 MQTT 客户端进行实时通信。 MQTT.js WebSocket 具有以下特点: 1. 简单易用:MQTT.js 提供了简单的 API 来连接MQTT 代理服务器,订阅和发布消息。 2. 兼容性:MQTT.js 能够在浏览器和 Node.js 环境中运行,具有较好的兼容性。 3. 实时性:通过使用 WebSocket 协议MQTT.js 实现了客户端服务器之间的实时双向通信,可以实时传递数据。 4. 轻量级:MQTT 协议本身是一种轻量级的消息传输协议,而 MQTT.js 使用 WebSocket 来实现 MQTT 功能,保持了协议的轻量级特性。 总之,MQTT.js WebSocket 提供了一种方便、快捷的方式来在浏览器或 Node.js 环境中使用 MQTT 协议进行实时消息传输。无论是在物联网设备间的通信,还是在实时数据传递的场景中,都可以使用 MQTT.js WebSocket 来实现高效的消息传输。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值