基于ESP32CAM实现WebSocket服务器实时点灯

ESP32-CAM ArduinoIDE开发系列文章目录

第一篇：ESP32-CAM高性价比WIFI图传方案快速入门教程
第二篇：ESP32-CAM第一个无线点灯程序
第三篇：ESP32-CAM智能网关的设计与实现
第四篇：ESP32-CAM创建热点构成并发式DNS服务器
第五篇：ESP32-CAM高性价比温湿度监控系统
第六篇：基于ESP32CAM实现WebSocket服务器实时点灯

---

---

前言

    daodanjishui物联网核心原创技术之ESP32 Arduino IDE开发之物联网系统设计最新Websocket技术探索。

---

一、基于ESP32CAM实现WebSocket服务器实时点灯是什么？

    daodanjishui在上一篇的项目：ESP32-CAM高性价比温湿度监控系统详细介绍了使用了ESP32嵌入式webserver服务器的开发技术，所使用的网络通信协议是Tcp/Ip,http协议，但是没有使用到WebSocket技术，所以不能实现网页与服务器硬件长时间通信，也是上一篇不足的地方，物联网系统设计中关于web的设计中需要网页与硬件保持长链接，所以这个WebSocket技术需要好好探索一下。
    daodanjishui在这一篇的项目中，采用新技术，使用现在最流行的WebSocket前端技术在ESP32CAM上构建一个Websocket服务器实时响应浏览器客户端的请求，实现实时点灯，这次客户端再也不用发送get或者post请求响应了，后期我要用这个WebSocket做一些图像处理和MQTT远程控制的“吓人”的核心高科技。硬件效果如下图所示：

程序运行效果如下所示：

视频演示效果如下：

ESP32-CAM实现嵌入式WebSocket服务器点灯

视频网址如下：https://www.bilibili.com/video/BV1BU4y1d7iZ?t=0.0
链接跳转

二、软件开发过程

1.了解WebSocket技术

    Websocket技术介绍：现在网页与单片机的通信方式一共有2种：一种是tcp/ip协议下的post和get请求，一种是Websocket通信方式。前者在我发布的很多电路方案中都有体现，但是后者是第一次出现，后期我会将两者结合起来构建物联网监控系统。总体来概括后者的功能：在网页不需要刷新的条件下让网页与服务器长期链接，所以在网页上可以实时打印出开关灯的状态和服务器返回的消息。在单片机上运行Websocket有什么用呢？第一可以实现在线OTA固件升级，第二可以实现网页与单片机实时交互，不需要使用get请求也能提交表单。在物联网中起到一个实时反馈的好效果。后期我会做好几个专题，包括：Websocket图传、Websocket智能小车、Websocket网页智能配网、Websocket物联网监控系统等等。
    这次的代码也不算复杂，程序中开了一个热点，手机和笔记本电脑在浏览器输入192.168.4.1就可以访问到websocket的主页，这主页是写死在单片机里面的。可以方便更改。

2.编辑代码

源码截图如下：

#include 
#include  //引入相应库

AsyncWebServer server(80); // 声明WebServer对象
AsyncWebSocket ws("/"); // WebSocket对象，url为/
#define LAMP_PIN 4  //定义闪光灯的管脚,ESP32CAM自带的闪光灯
// 以下为网页文件
String indexhtml = String("") +
                   "\n" +
                   "\n" +
                   "    \n" +
                   "    \n" +
                   "    \n" +
                   "\n" +
                   "\n" +
                   "    
daodanjishui ESP32-CAM免费开源WebSocket服务器点灯程序,原创经典值得拥有
"+
                   "         
说明:点击按键-开灯,则开灯，反之-关灯,则关灯,网页会实时显示调试信息
"+
                   "    开灯\n" +
                   "    关灯\n" +
                   "    
实时调试信息:
\n" +
                   "    
\n" +
                   "\n" +
                   "\n";
void wifi_init();//创建AP热点给无线设备连接,初始化websocket
void lamp_init();//闪光灯初始化
void controlLamp(bool lampVal);//点灯函数，传输参数是bool类型
void wifi_init(){
   WiFi.softAP("daodanjishui_websocket_AP");
   WiFi.mode(WIFI_AP);//设置模式为AP,可以在浏览器用192.168.4.1登录服务器
   IPAddress myIP = WiFi.softAPIP();
   Serial.print("AP IP address: ");
   Serial.println(myIP); 

  ws.onEvent(onEventHandle); // 绑定回调函数
  server.addHandler(&ws);    // 将WebSocket添加到服务器中
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) { //注册链接"/"与对应回调函数（匿名函数形式声明）
    request->send(200, "text/html", indexhtml);                //向客户端发送响应和内容
  });
  server.begin(); //启动websocket服务器
  Serial.println("Web server started");
}
void lamp_init(){
    pinMode(LAMP_PIN, OUTPUT);//设置为输出
    digitalWrite(LAMP_PIN, false);//输出低电平
}

void controlLamp(bool lampVal) {//点灯函数
  digitalWrite(LAMP_PIN, lampVal);//控制IO端口
  Serial.printf("Turn lamp %s\n", lampVal ? "On" : "Off");
}

// WebSocket事件回调函数
void onEventHandle(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len)
{
  if (type == WS_EVT_CONNECT) // 有客户端建立连接
  {
    Serial.printf("ws[%s][%u] connect\n", server->url(), client->id());
    client->printf("Hello Client %u !", client->id()); // 向客户端发送数据
    client->ping();                                    // 向客户端发送ping
   
  }
  else if (type == WS_EVT_DISCONNECT) // 有客户端断开连接
  {
    Serial.printf("ws[%s][%u] disconnect: %u\n", server->url(), client->id());
  }
  else if (type == WS_EVT_ERROR) // 发生错误
  {
    Serial.printf("ws[%s][%u] error(%u): %s\n", server->url(), client->id(), *((uint16_t *)arg), (char *)data);
  }
  else if (type == WS_EVT_PONG) // 收到客户端对服务器发出的ping进行应答（pong消息）
  {
    Serial.printf("ws[%s][%u] pong[%u]: %s\n", server->url(), client->id(), len, (len) ? (char *)data : "");
  }
  else if (type == WS_EVT_DATA) // 收到来自客户端的数据
  {
    AwsFrameInfo *info = (AwsFrameInfo *)arg;
    Serial.printf("ws[%s][%u] frame[%u] %s[%llu - %llu]: ", server->url(), client->id(), info->num, (info->message_opcode == WS_TEXT) ? "text" : "binary", info->index, info->index + len);
    data[len] = 0;
    Serial.printf("%s\n", (char *)data);
    //在这里写接收和响应的函数
    String datacome=(char *)data; 
    if(datacome.indexOf("ON")>=0){
       controlLamp(true);
       ws.textAll("Lamp is ON");
    }else if(datacome.indexOf("OFF")>=0){
       controlLamp(false);
       ws.textAll("Lamp is OFF");
    }else controlLamp(false);
    
  }
}

void setup()
{
  Serial.begin(115200);
  Serial.println();
  lamp_init();//闪光灯初始化
  wifi_init();//AP初始化和Websocket初始化
}

void loop()
{
  delay(10000);//每间隔十秒就给客户端发送一串数据
  ws.textAll("information come from server!"); // 向所有建立连接的客户端发送数据  
  ws.cleanupClients(); // 关闭过多的WebSocket连接以节省资源
}

3.注意事项

    读者需要到博客最后的下载链接去下载一个库ESPAsyncWebServer-master，这样代码前面的#include //引入相应库 才不会报错。

---

总结

    daodanjishui这一期比上一期有了一个新的尝试，使用了WebSocket技术来尝试物联网系统设计，虽然没有把整个系统搭建起来，但是这个尝试是一个好的开端。读者可以好好参考我的代码，我的这个方案可以实现网页推送信息给单片机，单片机也可以推送信息给所有网页，功能相当强大，当然少不了我经典的点灯程序。下面是串口打印调试输出：

    后面也没有什么可以说的，欢迎下载测试，读者可以用这个方案写一个网页遥控器，或者什么网页小游戏也是没有问题的，但是你要是想写网页配网程序，我估计你还是得参考我的程序，因为我写的websocket网页配网程序真的非常丝滑，一般人还真的写不出来的。
    后期我还会推出java版本和JavaWeb版本的Websocket服务器与ESP32客户端通过Websocket相互通信，包括图传技术，MQTT技术，图像处理技术，3D VR智能眼镜等等，组成物联网监控系统，全国独家原创，值得期待。
代码传送地址：https://www.cirmall.com/circuit/29794/
点击跳转下载