MQTT - 3. WebSocket - hoyo 學習紀錄

MQTT client library

推薦使用 MQTT.js 原因如下

使用 WebSocket 连接 MQTT 服务器

MQTT.js

js使用mqtt的示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MQTT - WebSocket</title>
    <script src="mqtt.min.js"></script>
</head>
<body>
<script>
    var options = {
        //mqtt客户端的id，这里面应该还可以加上其他参数，具体看官方文档
        clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
        username: 'hoyo',
        password: 'hoyo'
    };

    //浏览器采用websocket协议，host主机地址为192.168.0.200，端口为9001，路径为/mqtt
    var client = mqtt.connect( "ws://broker.emqx.io:8083/mqtt", options ); // you add a ws:// url here

    //建立连接
    client.on('connect', function () {

        //订阅主题 presence
        client.subscribe('presence', function (err) {
            if (!err) {
                console.log("subscribe success!");
                //发布主题presence,消息内容为Hello mqtt
                client.publish('presence', 'Hello mqtt')
            }else{
                //打印错误
                console.log(err)
            }
        })
    });

    //如果连接错误，打印错误
    client.on('error', function (err) {
        console.log(err);
        client.end()
    });

    //如果client订阅主题成功，那么这里就是当接收到自己订阅主题的处理逻辑
    client.on('message', function (topic, message) {

        // message is Buffer,此处就是打印消息的具体内容
        console.log(topic, message.toString())
    })
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>MQTT - WebSocket</title>

</head>

<body>

var options = {

//mqtt客户端的id，这里面应该还可以加上其他参数，具体看官方文档

clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),

username: 'hoyo',

password: 'hoyo'

};

//浏览器采用websocket协议，host主机地址为192.168.0.200，端口为9001，路径为/mqtt

var client = mqtt.connect( "ws://broker.emqx.io:8083/mqtt", options ); // you add a ws:// url here

//建立连接

client.on('connect', function () {

//订阅主题 presence

client.subscribe('presence', function (err) {

if (!err) {

console.log("subscribe success!");

//发布主题presence,消息内容为Hello mqtt

client.publish('presence', 'Hello mqtt')

}else{

//打印错误

console.log(err)

}

})

});

//如果连接错误，打印错误

client.on('error', function (err) {

console.log(err);

client.end()

});

//如果client订阅主题成功，那么这里就是当接收到自己订阅主题的处理逻辑

client.on('message', function (topic, message) {

// message is Buffer,此处就是打印消息的具体内容

console.log(topic, message.toString())

})

</script>

</body>

</html>

使用公共 MQTT Borker 搭建聊天室 - Eclipse Paho JavaScript Client

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MQTT - WebSocket</title>
    <link rel="stylesheet" href="/3rdParty/bootstrap-4.3.1/css/bootstrap.min.css">
    <script src="mqttws31.min.js"></script>
    <script src="/3rdParty/jquery-1.11.3.min.js"></script>
</head>
<body>

<div id="chart_all"></div>

<label style="position: fixed; bottom: 0;">留言：<input type="text" id="send" class="form-control" onkeyup="send()"></label>

<script>
    function $_GET(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    function time() {
        return Math.floor(new Date()
                .getTime() / 1000);
    }

    function send(){
        if (event.keyCode === 13) {
            event.preventDefault();
            event.stopPropagation();

            message = new Paho.MQTT.Message('{"time":"'+ time() +'", "user":"'+ user +'", "talk":"'+$('#send').val()+'"}');
            message.destinationName = "/HoyoMQTTChar/All";
            client.send(message);

            $('#send').val('');
        }
    }

    var user = $_GET('user');

    client = new Paho.MQTT.Client('broker.emqx.io', Number(8083), user);

    // set callback handlers
    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;

    // connect the client
    client.connect({
        onSuccess:onConnect,
        userName : "hoyo",
        password : "hoyo"
    });

    // called when the client connects
    function onConnect() {
        // Once a connection has been made, make a subscription and send a message.
        console.log("onConnect");
        client.subscribe("/HoyoMQTTChar/All");
    }

    // called when the client loses its connection
    function onConnectionLost(r) {
        if (r.errorCode !== 0) {
            console.log("onConnectionLost:"+r.errorMessage);
        }
    }

    // called when a message arrives
    function onMessageArrived(m) {
        if ( m.destinationName ==='/HoyoMQTTChar/All' ){
            var j = JSON.parse(m.payloadString);
            $('#chart_all').append('<div>'+ j.time +' <b>'+ j.user +'</b> : '+ j.talk +'</div>');
        }
    }
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>MQTT - WebSocket</title>

</head>

<body>

function $_GET(name) {

name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");

var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),

results = regex.exec(location.search);

return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));

}

function time() {

return Math.floor(new Date()

.getTime() / 1000);

}

function send(){

if (event.keyCode === 13) {

event.preventDefault();

event.stopPropagation();

message = new Paho.MQTT.Message('{"time":"'+ time() +'", "user":"'+ user +'", "talk":"'+$('#send').val()+'"}');

message.destinationName = "/HoyoMQTTChar/All";

client.send(message);

$('#send').val('');

}

var user = $_GET('user');

client = new Paho.MQTT.Client('broker.emqx.io', Number(8083), user);

// set callback handlers

client.onConnectionLost = onConnectionLost;

client.onMessageArrived = onMessageArrived;

// connect the client

client.connect({

onSuccess:onConnect,

userName : "hoyo",

password : "hoyo"

});

// called when the client connects

function onConnect() {

// Once a connection has been made, make a subscription and send a message.

console.log("onConnect");

client.subscribe("/HoyoMQTTChar/All");

}

// called when the client loses its connection

function onConnectionLost(r) {

if (r.errorCode !== 0) {

console.log("onConnectionLost:"+r.errorMessage);

}

// called when a message arrives

function onMessageArrived(m) {

if ( m.destinationName ==='/HoyoMQTTChar/All' ){

var j = JSON.parse(m.payloadString);

$('#chart_all').append('<div>'+ j.time +' <b>'+ j.user +'</b> : '+ j.talk +'</div>');

}

</script>

</body>

</html>

結果

結論

WebSocket 因為運作在瀏覽器上，因此不能將隱私或是系統安全洩漏，例如使用者帳號、密碼。也因為可以自訂訂閱主題的特性，為了避免遭到不當使用也要使用 ACL 過濾可供使用主題
在完全不寫 Borker 程式代碼的情況下，基本功能都無法實現，例如使用者清單，因為後一位使用者加入無法取得更早的使用者，也就是「舊資料」的提供只能從 Broker Server 端收集提供

851 total views, 1 views today

MQTT - 3. WebSocket

MQTT client library

MQTT.js

使用公共 MQTT Borker 搭建聊天室 - Eclipse Paho JavaScript Client

結論

Related Post

發佈留言

MQTT - 3. WebSocket

MQTT client library

MQTT.js

使用公共 MQTT Borker 搭建聊天室 - Eclipse Paho JavaScript Client

結論

Related Post

MQTT - 5. EMQ X Broker 安裝、基本設定

MQTT - 4. MQTT Broker

MQTT - 0. 如果不是為了破壞地球，我也不會開始用

發佈留言