Chemmy's Blog

chengming0916@gmail.com

0%

发表于 Valine：

JavaScript使用MQTT - 农民子弟 - 博客园

Excerpt

1、MQTT Server使用EMQTTD开源库，自行安装配置； 2、JS使用Websocket连接通信。 3、JS的MQTT库为paho-mqtt，git地址：https://github.com/eclipse/paho.mqtt.javascript.git 代码如下： <!DOCTYP

1、MQTT Server使用EMQTTD开源库，自行安装配置；

2、JS使用Websocket连接通信。

3、JS的MQTT库为paho-mqtt，git地址：https://github.com/eclipse/paho.mqtt.javascript.git

代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<span>&lt;!</span><span>DOCTYPE html</span><span>&gt;</span>
<span>&lt;</span><span>html</span><span>&gt;</span>

<span>&lt;</span><span>head</span><span>&gt;</span>
    <span>&lt;</span><span>meta </span><span>charset</span><span>="utf-8"</span> <span>/&gt;</span>
    <span>&lt;</span><span>title</span><span>&gt;&lt;/</span><span>title</span><span>&gt;</span>
    <span>&lt;!--</span><span> &lt;script src=“https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js” type=“text/javascript”&gt; &lt;/script&gt; </span><span>--&gt;</span>
    <span>&lt;</span><span>script </span><span>src</span><span>="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"</span><span> type</span><span>="text/javascript"</span><span>&gt;&lt;/</span><span>script</span><span>&gt;</span>

    <span>&lt;</span><span>script</span><span>&gt;</span>
        <span>var</span><span> hostname </span><span>=</span> <span>'</span><span>127.0.0.1</span><span>'</span><span>, </span><span>//</span><span>'192.168.1.2',</span>
<span>            port </span><span>=</span> <span>8083</span><span>,
            clientId </span><span>=</span> <span>'</span><span>client-mao2080</span><span>'</span><span>,
            timeout </span><span>=</span> <span>5</span><span>,
            keepAlive </span><span>=</span> <span>100</span><span>,
            cleanSession </span><span>=</span> <span>false</span><span>,
            ssl </span><span>=</span> <span>false</span><span>,
            </span><span>//</span><span> userName = 'mao2080',  </span>
            <span>//</span><span> password = '123',  </span>
<span>            topic </span><span>=</span> <span>'</span><span>/World</span><span>'</span><span>;
        client </span><span>=</span> <span>new</span><span> Paho.MQTT.Client(hostname, port, clientId);
        </span><span>//</span><span>建立客户端实例  </span>
        <span>var</span><span> options </span><span>=</span><span> {
            invocationContext: {
                host: hostname,
                port: port,
                path: client.path,
                clientId: clientId
            },
            timeout: timeout,
            keepAliveInterval: keepAlive,
            cleanSession: cleanSession,
            useSSL: ssl,
            </span><span>//</span><span> userName: userName,  </span>
            <span>//</span><span> password: password,  </span>
<span>            onSuccess: onConnect,
            onFailure: </span><span>function</span><span> (e) {
                console.log(e);
                s </span><span>=</span> <span>"</span><span>{time:</span><span>"</span> <span>+</span> <span>new</span><span> Date().Format(</span><span>"</span><span>yyyy-MM-dd hh:mm:ss</span><span>"</span><span>) </span><span>+</span> <span>"</span><span>, onFailure()}</span><span>"</span><span>;
                console.log(s);
            }
        };
        client.connect(options);
        </span><span>//</span><span>连接服务器并注册连接成功处理事件  </span>
        <span>function</span><span> onConnect() {
            console.log(</span><span>"</span><span>onConnected</span><span>"</span><span>);
            s </span><span>=</span> <span>"</span><span>{time:</span><span>"</span> <span>+</span> <span>new</span><span> Date().Format(</span><span>"</span><span>yyyy-MM-dd hh:mm:ss</span><span>"</span><span>) </span><span>+</span> <span>"</span><span>, onConnected()}</span><span>"</span><span>;
            console.log(s);
            client.subscribe(topic);
        }

        client.onConnectionLost </span><span>=</span><span> onConnectionLost;

        </span><span>//</span><span>注册连接断开处理事件  </span>
<span>        client.onMessageArrived </span><span>=</span><span> onMessageArrived;

        </span><span>//</span><span>注册消息接收处理事件  </span>
        <span>function</span><span> onConnectionLost(responseObject) {
            console.log(responseObject);
            s </span><span>=</span> <span>"</span><span>{time:</span><span>"</span> <span>+</span> <span>new</span><span> Date().Format(</span><span>"</span><span>yyyy-MM-dd hh:mm:ss</span><span>"</span><span>) </span><span>+</span> <span>"</span><span>, onConnectionLost()}</span><span>"</span><span>;
            console.log(s);
            </span><span>if</span><span> (responseObject.errorCode </span><span>!==</span> <span>0</span><span>) {
                console.log(</span><span>"</span><span>onConnectionLost:</span><span>"</span> <span>+</span><span> responseObject.errorMessage);
                console.log(</span><span>"</span><span>连接已断开</span><span>"</span><span>);
            }
        }

        </span><span>function</span><span> onMessageArrived(message) {
            s </span><span>=</span> <span>"</span><span>{time:</span><span>"</span> <span>+</span> <span>new</span><span> Date().Format(</span><span>"</span><span>yyyy-MM-dd hh:mm:ss</span><span>"</span><span>) </span><span>+</span> <span>"</span><span>, onMessageArrived()}</span><span>"</span><span>;
            console.log(s);
            console.log(</span><span>"</span><span>收到消息:</span><span>"</span> <span>+</span><span> message.payloadString);
        }

        </span><span>function</span><span> send() {
            </span><span>var</span><span> s </span><span>=</span><span> document.getElementById(</span><span>"</span><span>msg</span><span>"</span><span>).value;
            </span><span>if</span><span> (s) {
                s </span><span>=</span> <span>"</span><span>{time:</span><span>"</span> <span>+</span> <span>new</span><span> Date().Format(</span><span>"</span><span>yyyy-MM-dd hh:mm:ss</span><span>"</span><span>) </span><span>+</span> <span>"</span><span>, content:</span><span>"</span> <span>+</span><span> (s) </span><span>+</span> <span>"</span><span>, from: web console}</span><span>"</span><span>;
                message </span><span>=</span> <span>new</span><span> Paho.MQTT.Message(s);
                message.destinationName </span><span>=</span><span> topic;
                client.send(message);
                document.getElementById(</span><span>"</span><span>msg</span><span>"</span><span>).value </span><span>=</span> <span>""</span><span>;
            }
        }

        </span><span>var</span><span> count </span><span>=</span> <span>0</span><span>;

        </span><span>function</span><span> start() {
            window.tester </span><span>=</span><span> window.setInterval(</span><span>function</span><span> () {
                </span><span>if</span><span> (client.isConnected) {
                    </span><span>var</span><span> s </span><span>=</span> <span>"</span><span>{time:</span><span>"</span> <span>+</span> <span>new</span><span> Date().Format(</span><span>"</span><span>yyyy-MM-dd hh:mm:ss</span><span>"</span><span>) </span><span>+</span> <span>"</span><span>, content:</span><span>"</span> <span>+</span><span> (count</span><span>++</span><span>) </span><span>+</span>
                        <span>"</span><span>, from: web console}</span><span>"</span><span>;
                    message </span><span>=</span> <span>new</span><span> Paho.MQTT.Message(s);
                    message.destinationName </span><span>=</span><span> topic;
                    client.send(message);
                }
            }, </span><span>1000</span><span>);
        }

        </span><span>function</span><span> stop() {
            window.clearInterval(window.tester);
        }

        Date.prototype.Format </span><span>=</span> <span>function</span><span> (fmt) { </span><span>//</span><span>author: meizz </span>
            <span>var</span><span> o </span><span>=</span><span> {
                </span><span>"</span><span>M+</span><span>"</span><span>: </span><span>this</span><span>.getMonth() </span><span>+</span> <span>1</span><span>, </span><span>//</span><span>月份 </span>
                <span>"</span><span>d+</span><span>"</span><span>: </span><span>this</span><span>.getDate(), </span><span>//</span><span>日 </span>
                <span>"</span><span>h+</span><span>"</span><span>: </span><span>this</span><span>.getHours(), </span><span>//</span><span>小时 </span>
                <span>"</span><span>m+</span><span>"</span><span>: </span><span>this</span><span>.getMinutes(), </span><span>//</span><span>分 </span>
                <span>"</span><span>s+</span><span>"</span><span>: </span><span>this</span><span>.getSeconds(), </span><span>//</span><span>秒 </span>
                <span>"</span><span>q+</span><span>"</span><span>: Math.floor((</span><span>this</span><span>.getMonth() </span><span>+</span> <span>3</span><span>) </span><span>/</span> <span>3</span><span>), </span><span>//</span><span>季度 </span>
                <span>"</span><span>S</span><span>"</span><span>: </span><span>this</span><span>.getMilliseconds() </span><span>//</span><span>毫秒 </span>
<span>            };
            </span><span>if</span><span> (</span><span>/</span><span>(y+)</span><span>/</span><span>.test(fmt)) fmt </span><span>=</span><span> fmt.replace(RegExp.$</span><span>1</span><span>, (</span><span>this</span><span>.getFullYear() </span><span>+</span> <span>""</span><span>).substr(</span><span>4</span> <span>-</span><span> RegExp.$</span><span>1</span><span>.length));
            </span><span>for</span><span> (</span><span>var</span><span> k </span><span>in</span><span> o)
                </span><span>if</span><span> (</span><span>new</span><span> RegExp(</span><span>"</span><span>(</span><span>"</span> <span>+</span><span> k </span><span>+</span> <span>"</span><span>)</span><span>"</span><span>).test(fmt)) fmt </span><span>=</span><span> fmt.replace(RegExp.$</span><span>1</span><span>, (RegExp.$</span><span>1</span><span>.length </span><span>==</span> <span>1</span><span>) </span><span>?</span><span> (o[
                    k]) : ((</span><span>"</span><span>00</span><span>"</span> <span>+</span><span> o[k]).substr((</span><span>""</span> <span>+</span><span> o[k]).length)));
            </span><span>return</span><span> fmt;
        }
    </span><span>&lt;/</span><span>script</span><span>&gt;</span>
<span>&lt;/</span><span>head</span><span>&gt;</span>

<span>&lt;</span><span>body</span><span>&gt;</span>
    <span>&lt;</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="msg"</span> <span>/&gt;</span>
    <span>&lt;</span><span>input </span><span>type</span><span>="button"</span><span> value</span><span>="Send"</span><span> onclick</span><span>="send()"</span> <span>/&gt;</span>
    <span>&lt;</span><span>input </span><span>type</span><span>="button"</span><span> value</span><span>="Start"</span><span> onclick</span><span>="start()"</span> <span>/&gt;</span>
    <span>&lt;</span><span>input </span><span>type</span><span>="button"</span><span> value</span><span>="Stop"</span><span> onclick</span><span>="stop()"</span> <span>/&gt;</span>
<span>&lt;/</span><span>body</span><span>&gt;</span>

<span>&lt;/</span><span>html</span><span>&gt;</span>

复制代码