- \n
- MQTT.js<\/a><\/li>\n
- Eclipse Paho JavaScript Client<\/a><\/li>\n<\/ul>\n
\u63a8\u85a6\u4f7f\u7528 MQTT.js \u539f\u56e0\u5982\u4e0b<\/p>\n
- \n
- \u4f7f\u7528 WebSocket \u8fde\u63a5 MQTT \u670d\u52a1\u5668<\/a><\/li>\n<\/ul>\n
--<\/p>\n
MQTT.js<\/h2>\n
- \n
- js\u4f7f\u7528mqtt\u7684\u793a\u4f8b\u4ee3\u7801<\/a><\/li>\n<\/ul>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>MQTT - WebSocket<\/title>\r\n <script src=\"mqtt.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n<script>\r\n var options = {\r\n \/\/mqtt\u5ba2\u6237\u7aef\u7684id\uff0c\u8fd9\u91cc\u9762\u5e94\u8be5\u8fd8\u53ef\u4ee5\u52a0\u4e0a\u5176\u4ed6\u53c2\u6570\uff0c\u5177\u4f53\u770b\u5b98\u65b9\u6587\u6863\r\n clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),\r\n username: 'hoyo',\r\n password: 'hoyo'\r\n };\r\n\r\n \/\/\u6d4f\u89c8\u5668\u91c7\u7528websocket\u534f\u8bae\uff0chost\u4e3b\u673a\u5730\u5740\u4e3a192.168.0.200\uff0c\u7aef\u53e3\u4e3a9001\uff0c\u8def\u5f84\u4e3a\/mqtt\r\n var client = mqtt.connect( \"ws:\/\/broker.emqx.io:8083\/mqtt\", options ); \/\/ you add a ws:\/\/ url here\r\n\r\n \/\/\u5efa\u7acb\u8fde\u63a5\r\n client.on('connect', function () {\r\n\r\n \/\/\u8ba2\u9605\u4e3b\u9898 presence\r\n client.subscribe('presence', function (err) {\r\n if (!err) {\r\n console.log(\"subscribe success!\");\r\n \/\/\u53d1\u5e03\u4e3b\u9898presence,\u6d88\u606f\u5185\u5bb9\u4e3aHello mqtt\r\n client.publish('presence', 'Hello mqtt')\r\n }else{\r\n \/\/\u6253\u5370\u9519\u8bef\r\n console.log(err)\r\n }\r\n })\r\n });\r\n\r\n \/\/\u5982\u679c\u8fde\u63a5\u9519\u8bef\uff0c\u6253\u5370\u9519\u8bef\r\n client.on('error', function (err) {\r\n console.log(err);\r\n client.end()\r\n });\r\n\r\n \/\/\u5982\u679cclient\u8ba2\u9605\u4e3b\u9898\u6210\u529f\uff0c\u90a3\u4e48\u8fd9\u91cc\u5c31\u662f\u5f53\u63a5\u6536\u5230\u81ea\u5df1\u8ba2\u9605\u4e3b\u9898\u7684\u5904\u7406\u903b\u8f91\r\n client.on('message', function (topic, message) {\r\n\r\n \/\/ message is Buffer,\u6b64\u5904\u5c31\u662f\u6253\u5370\u6d88\u606f\u7684\u5177\u4f53\u5185\u5bb9\r\n console.log(topic, message.toString())\r\n })\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n--<\/p>\n
\u4f7f\u7528\u516c\u5171 MQTT Borker \u642d\u5efa\u804a\u5929\u5ba4 -\u00a0Eclipse Paho JavaScript Client<\/h2>\n
- \n
- Paho JavaScript - MQTT Client Library Encyclopedia<\/a><\/li>\n
- MQTT\u7528\u6236\u7aef\u5165\u9580 - \u4e8c\u3001JavaScript \u7528\u6236\u7aef\u7a0b\u5f0f\u8a2d\u8a08<\/a><\/li>\n<\/ul>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>MQTT - WebSocket<\/title>\r\n <link rel=\"stylesheet\" href=\"\/3rdParty\/bootstrap-4.3.1\/css\/bootstrap.min.css\">\r\n <script src=\"mqttws31.min.js\"><\/script>\r\n <script src=\"\/3rdParty\/jquery-1.11.3.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"chart_all\"><\/div>\r\n\r\n<label style=\"position: fixed; bottom: 0;\">\u7559\u8a00\uff1a<input type=\"text\" id=\"send\" class=\"form-control\" onkeyup=\"send()\"><\/label>\r\n\r\n<script>\r\n function $_GET(name) {\r\n name = name.replace(\/[\\[]\/, \"\\\\[\").replace(\/[\\]]\/, \"\\\\]\");\r\n var regex = new RegExp(\"[\\\\?&]\" + name + \"=([^&#]*)\"),\r\n results = regex.exec(location.search);\r\n return results === null ? \"\" : decodeURIComponent(results[1].replace(\/\\+\/g, \" \"));\r\n }\r\n function time() {\r\n return Math.floor(new Date()\r\n .getTime() \/ 1000);\r\n }\r\n\r\n function send(){\r\n if (event.keyCode === 13) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n message = new Paho.MQTT.Message('{\"time\":\"'+ time() +'\", \"user\":\"'+ user +'\", \"talk\":\"'+$('#send').val()+'\"}');\r\n message.destinationName = \"\/HoyoMQTTChar\/All\";\r\n client.send(message);\r\n\r\n $('#send').val('');\r\n }\r\n }\r\n\r\n var user = $_GET('user');\r\n\r\n client = new Paho.MQTT.Client('broker.emqx.io', Number(8083), user);\r\n\r\n \/\/ set callback handlers\r\n client.onConnectionLost = onConnectionLost;\r\n client.onMessageArrived = onMessageArrived;\r\n\r\n \/\/ connect the client\r\n client.connect({\r\n onSuccess:onConnect,\r\n userName : \"hoyo\",\r\n password : \"hoyo\"\r\n });\r\n\r\n \/\/ called when the client connects\r\n function onConnect() {\r\n \/\/ Once a connection has been made, make a subscription and send a message.\r\n console.log(\"onConnect\");\r\n client.subscribe(\"\/HoyoMQTTChar\/All\");\r\n }\r\n\r\n \/\/ called when the client loses its connection\r\n function onConnectionLost(r) {\r\n if (r.errorCode !== 0) {\r\n console.log(\"onConnectionLost:\"+r.errorMessage);\r\n }\r\n }\r\n\r\n \/\/ called when a message arrives\r\n function onMessageArrived(m) {\r\n if ( m.destinationName ==='\/HoyoMQTTChar\/All' ){\r\n var j = JSON.parse(m.payloadString);\r\n $('#chart_all').append('<div>'+ j.time +' <b>'+ j.user +'<\/b> : '+ j.talk +'<\/div>');\r\n }\r\n }\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n\u7d50\u679c<\/p>\n
- MQTT\u7528\u6236\u7aef\u5165\u9580 - \u4e8c\u3001JavaScript \u7528\u6236\u7aef\u7a0b\u5f0f\u8a2d\u8a08<\/a><\/li>\n<\/ul>\n
- Paho JavaScript - MQTT Client Library Encyclopedia<\/a><\/li>\n
- js\u4f7f\u7528mqtt\u7684\u793a\u4f8b\u4ee3\u7801<\/a><\/li>\n<\/ul>\n
- Eclipse Paho JavaScript Client<\/a><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2020\/11\/20201119_121615-300x133.png\")
<\/a><\/p>\n