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

╰+攻爆jí腚メ 2022-12-13 12:56 272阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1clFR_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1clFR_size_16_color_FFFFFF_t_70 1][]

app客户端更改数据

![20201011222519268.png][]

前端暂时断实时改变

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1clFR_size_16_color_FFFFFF_t_70 2][]

目前就这样

## **搭建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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1clFR_size_16_color_FFFFFF_t_70]: /images/20221123/7d44cecddc8c46f79fcf2abc1d6da6a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1clFR_size_16_color_FFFFFF_t_70 1]: /images/20221123/5d91225021434f9dbc19252b2618390e.png
[20201011222519268.png]: /images/20221123/dc4d70cffc7b48539d4ec53ef04185a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1clFR_size_16_color_FFFFFF_t_70 2]: /images/20221123/3f578e9d930c4657bf486191d820fae4.png