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 <WiFi.h>
#include <ESPAsyncWebServer.h> //引入相应库
AsyncWebServer server(80); // 声明WebServer对象
AsyncWebSocket ws("/"); // WebSocket对象，url为/
#define LAMP_PIN 4 //定义闪光灯的管脚,ESP32CAM自带的闪光灯
// 以下为网页文件
String indexhtml = String("") +
"<!DOCTYPE html>\n" +
"<head>\n" +
" <meta charset=\"UTF-8\">\n" +
" <title>WebSocket Test</title>\n" +
" <script>\n" +
" var ws;\n" +
" if (\"WebSocket\" in window) {\n" +
" ws = new WebSocket(\"ws://\" + window.location.host + \"/\"); // 建立WebSocket连接\n" +
" ws.onopen = function () { // 连接建立成功时触发\n" +
" document.getElementById(\"info\").innerHTML += \"WebSocket连接成功！\" + \"<br>\";\n" +
" ws.send(\"connect ok!\"); // 向服务器发送数据\n" +
" };\n" +
" ws.onmessage = function (evt) { // 收到服务器数据时触发\n" +
" document.getElementById(\"info\").innerHTML += evt.data + \"<br>\";\n" +
" };\n" +
" ws.onerror = function () { // 发生错误时触发\n" +
" document.getElementById(\"info\").innerHTML += \"通讯发送错误！\" + \"<br>\";\n" +
" };\n" +
" ws.onclose = function () { // 连接关闭时触发\n" +
" document.getElementById(\"info\").innerHTML += \"WebSocketTest连接已关闭！\" + \"<br>\";\n" +
" };\n" +
" }\n" +
" else {\n" +
" document.getElementById(\"info\").innerHTML = \"浏览器不支持 WebSocket！\";\n" +
" }\n" +
" function send() {\n" +
" ws.send(\"ON\"); // 向服务器发送数据\n" +
" }\n" +
" function send1() {\n" +
" ws.send(\"OFF\"); // 向服务器发送数据\n" +
" }\n" +
" </script>\n" +
"</head>\n" +
"<body>\n" +
" <h1>daodanjishui ESP32-CAM免费开源WebSocket服务器点灯程序,原创经典值得拥有</h1><p>"+
" <h2>说明:点击按键-开灯,则开灯，反之-关灯,则关灯,网页会实时显示调试信息</h2>"+
" <button type=\"button\" οnclick=\"send()\">开灯</button>\n" +
" <button type=\"button\" οnclick=\"send1()\">关灯</button>\n" +
" <h3>实时调试信息:</h3>\n" +
" <h3><div id=\"info\"></div></h3>\n" +
"</body>\n" +
"</html>\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 <ESPAsyncWebServer.h> //引入相应库 才不会报错。
总结
????daodanjishui这一期比上一期有了一个新的尝试，使用了WebSocket技术来尝试物联网系统设计，虽然没有把整个系统搭建起来，但是这个尝试是一个好的开端。读者可以好好参考我的代码，我的这个方案可以实现网页推送信息给单片机，单片机也可以推送信息给所有网页，功能相当强大，当然少不了我经典的点灯程序。下面是串口打印调试输出：
????后面也没有什么可以说的，欢迎下载测试，读者可以用这个方案写一个网页遥控器，或者什么网页小游戏也是没有问题的，但是你要是想写网页配网程序，我估计你还是得参考我的程序，因为我写的websocket网页配网程序真的非常丝滑，一般人还真的写不出来的。
????后期我还会推出java版本和JavaWeb版本的Websocket服务器与ESP32客户端通过Websocket相互通信，包括图传技术，MQTT技术，图像处理技术，3D VR智能眼镜等等，组成物联网监控系统，全国独家原创，值得期待。
代码传送地址：https://www.cirmall.com/circuit/29794/
点击跳转下载