mqtt最早是2016年左右时候在腾讯云，阿里云上看到的，当时对于手写C++服务端多年我来说，感觉这种占流量的东西不适合移动物联网，一直不屑使用这个东西，后来转行搞IT互联网Web开发，这个东西就彻底不看了，最近因为切换其它项目的问题，需要使用到mqtt，研究了一下，感觉时代变了，流量已经不是制约因素，连传统物联网行业都在使用这个东西，大家都用的东西必然有它的可取之处，需要好好研究一下！！！研究技术之前，先搞个现成的环境感受一下。
1、搭建Mqtt服务器
使用Activemq搭建
下载地址：https://activemq.apache.org/components/classic/download/
http://www.apache.org/dyn/closer.cgi?filename=/activemq/5.16.1/apache-activemq-5.16.1-bin.zip&action=download
2、解压，运行
3、打开index.html
4、效果
5、使用第三方mqtt工具测试效果
6、index.html代码
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chat Example Using MQTT Over WebSockets</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.min.responsive.css" rel="stylesheet">
<style type="text/css">
body { padding-top: 40px; }
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">ActiveMQ MQTT WebSocket Chat Example</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<div id="connect">
<div class="page-header">
<h2>Server Login</h2>
</div>
<form class="form-horizontal" id='connect_form'>
<fieldset>
<div class="control-group">
<label>Host</label>
<div class="controls">
<input name=host id='connect_host' value='localhost' type="text">
</div>
</div>
<div class="control-group">
<label>Port</label>
<div class="controls">
<input name=url id='connect_port' value='61614' type="text">
</div>
</div>
<div class="control-group">
<label>Client ID</label>
<div class="controls">
<input id='connect_clientId' placeholder="id" value="example" type="text">
</div>
</div>
<div class="control-group">
<label>User ID</label>
<div class="controls">
<input id='connect_user' placeholder="User ID" value="admin" type="text">
</div>
</div>
<div class="control-group">
<label>Password</label>
<div class="controls">
<input id='connect_password' placeholder="User Password" value="password" type="password">
</div>
</div>
<div class="control-group">
<label>Destination</label>
<div class="controls">
<input id='destination' placeholder="Destination" value="chat/general" type="text">
</div>
</div>
<div class="form-actions">
<button id='connect_submit' type="submit" class="btn btn-large btn-primary">Connect</button>
</div>
</fieldset>
</form>
</div>
<div id="connected" style="display:none">
<div class="page-header">
<h2>Chat Room</h2>
</div>
<div id="messages">
</div>
<form class="well form-search" id='send_form'>
<button class="btn" type="button" id='disconnect' style="float:right">Disconnect</button>
<input class="input-medium" id='send_form_input' placeholder="Type your message here" class="span6"/>
<button class="btn" type="submit">Send</button>
</form>
</div>
</div>
<div class="span4">
<div class="page-header">
<h2>Debug Log</h2>
</div>
<pre id="debug"></pre>
</div>
</div>
</div>
<!-- Scripts placed at the end of the document so the pages load faster -->
<script src='js/jquery-3.4.1.min.js'></script>
<script src="js/mqttws31.js"></script>
<script>//<![CDATA[
$(document).ready(function(){
$("#connect_clientId").val("example-"+(Math.floor(Math.random() * 100000)));
if( !window.WebSocket) {
$("#connect").html("
<h1>Get a new Web Browser!</h1>
<p>
Your browser does not support WebSockets. This example will not work properly.<br>
Please use a Web Browser with WebSockets support (WebKit or Google Chrome).
</p>
");
} else {
var client, destination;
$('#connect_form').submit(function() {
var host = $("#connect_host").val();
var port = $("#connect_port").val();
var clientId = $("#connect_clientId").val();
var user = $("#connect_user").val();
var password = $("#connect_password").val();
destination = $("#destination").val();
client = new Messaging.Client(host, Number(port), clientId);
client.onConnect = onConnect;
client.onMessageArrived = onMessageArrived;
client.onConnectionLost = onConnectionLost;
client.connect({
userName:user,
password:password,
onSuccess:onConnect,
onFailure:onFailure
});
return false;
});
// the client is notified when it is connected to the server.
var onConnect = function(frame) {
debug("connected to MQTT");
$('#connect').fadeOut({ duration: 'fast' });
$('#connected').fadeIn();
client.subscribe(destination);
};
// this allows to display debug logs directly on the web page
var debug = function(str) {
$("#debug").append(document.createTextNode(str + "
"));
};
$('#disconnect').click(function() {
client.disconnect();
$('#connected').fadeOut({ duration: 'fast' });
$('#connect').fadeIn();
$("#messages").html("")
return false;
});
$('#send_form').submit(function() {
var text = $('#send_form_input').val();
if (text) {
message = new Messaging.Message(text);
message.destinationName = destination;
client.send(message);
$('#send_form_input').val("");
}
return false;
});
function onFailure(failure) {
debug("failure");
debug(failure.errorMessage);
}
function onMessageArrived(message) {
var p = document.createElement("p");
var t = document.createTextNode(message.payloadString);
p.appendChild(t);
$("#messages").append(p);
}
function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
debug(client.clientId + ": " + responseObject.errorCode + "
");
}
}
}
});
//]]></script>
</body>
</html>