上期文章我们介绍了如何用swoole创建tcp服务器与websocket服务器，并结合mqtt构成通讯网络。
Swoole: TcpServer+SocketServer+EMQTT组合，实现基础设备控制
今期文章，我们就来进行实战介绍我们如何利用浏览器的websocket控制线下硬件。
基础架构
一、部署tcp服务器和websocket服务器并且安装emqtt
之前的几期文章已经讲述了相关的内容，朋友们可以回头去看一看。
相关服务都部署好以后，我们就可以开始编写控制网页。
二、编写控制网页: websocket.html
新建一个Html，命名为websocket.html，内容如下：
<!DOCTYPE html>
<html>
<head>
<title>终端远程控制</title>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script>
var socket = new WebSocket('ws://你的服务器ip:39002');
console.log(socket);
socket.onopen = function (event) {
console.log(event);
if (socket.readyState === 1) {
console.log('connected');
var data = JSON.stringify({
"reg": "btdaF70c0HUr9iddalkU3"
});
socket.send(data);
}
}
// 监听消息
socket.onmessage = function (event) {
console.log(event.data);
};
</script>
</head>
<body>
<p style="margin:100px;">
<button id='btn_open'>开灯</button>
<button id='btn_close'>关灯</button>
</p>
</body>
</html>
<script>
document.getElementById('btn_open').onclick = function () {
console.log(socket.send(
JSON.stringify({
"instruction": "01 05 00 00 FF 00 8C 3A"
})
))
}
document.getElementById('btn_close').onclick = function () {
console.log(socket.send(
JSON.stringify({
"instruction": "01 05 00 00 00 00 CD CA"
})
))
}
</script>
三、调试
打开浏览器，然后访问websocket.html，效果如图：
视频如下：
视频加载中...
好啦，这一期就到这里，感谢各位阅读，持续关注小搜将会为大家带来更多实用知识，我们下一期再见。