欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

项目实战-物联网平台搭建-搭建websocket服务器(三)

程序员文章站 2022-04-28 10:07:08
...

项目目前是有手机app 做客户端,通过app订阅主题并发送消息,mqtt服务器会将数据转存如mysql数据库中,然后再由ws服务端发送到前端展示

下边是大二写的一个mqtt通信app

项目实战-物联网平台搭建-搭建websocket服务器(三)

客户端给温度主题发送温度,前端折线图实时展示

项目实战-物联网平台搭建-搭建websocket服务器(三)

app客户端更改数据

项目实战-物联网平台搭建-搭建websocket服务器(三)

前端暂时断实时改变

项目实战-物联网平台搭建-搭建websocket服务器(三)

目前就这样

 

搭建websocket服务器

我用的是websocketd

下载地址:

https://github.com/joewalnes/websocketd/

解压:

unzip 解压工具

 

添加path:

执行 vim ~/.bash_profile 修改文件中 PATH 一行,将 路径 加入到 PATH=$PATH:$HOME/bin 后冒号隔开

我的:

PATH=$PATH:$HOME/bin:/home/websocketd/

测试是否添加成功:

websocketd --help

 

如果成功新建:

count.sh:

#!/bin/bash

for COUNT in $(seq 1 10); do

  echo $COUNT

  sleep 1

done

 

设置权限:

$ chmod +x count.sh
$ ./count.sh

运行ws:(注意关闭防火墙)

$ websocketd --port=8080 --staticdir=. ./count.sh

使用开发控制台进行测试

--devconsole标志使内置的控制台websocketd可以与WebSocket端点进行手动交互。

将浏览器指向http://localhost:8080/,您将看到控制台。按下复选框进行连接。

请注意,您不能同时使用--devconsole和--staticdir。开发控制台旨在提供一个临时用户界面,直到您构建了真正的用户界面为止。

使用html测试

<!DOCTYPE html>
<html>
  <head>
    <title>websocketd count example</title>
    <style>
      #count {
        font: bold 150px arial;
        margin: auto;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    
    <div id="count"></div>
    
    <script>
      var ws = new WebSocket('ws://localhost:8080/');
      ws.onopen = function() {
        document.body.style.backgroundColor = '#cfc';
      };
      ws.onclose = function() {
        document.body.style.backgroundColor = null;
      };
      ws.onmessage = function(event) {
        document.getElementById('count').textContent = event.data;
      };
    </script>
    
  </body>
</html>