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

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

文章目录

ESP32-CAM ArduinoIDE开发系列文章目录
前言
一、基于ESP32CAM实现WebSocket服务器实时点灯是什么？
二、软件开发过程
- 1.了解WebSocket技术
- 2.编辑代码
- 3.注意事项
总结

前言

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/
点击跳转下载

基于ESP32CAM实现WebSocket服务器实时点灯相关推荐

pi数据库系统中国服务器,基于PI数据库的服务器实时监控系统研究与开发
摘要: 随着智能电网发展战略的提出,电力系统信息化程度的不断提高,电力企业信息系统的服务器.网络设备等信息设备越来越多,其重要性也越来越高.现行的信息系统的运行维护工作模式--信息值班员.系统管理员人 ...
最简单DIY基于ESP32CAM的物联网相机系统③（在JSP服务器图传相片给所有客户端欣赏）
最简单DIY基于ESP32CAM的物联网相机系统系列文章目录第一篇:最简单DIY基于ESP32CAM的物联网相机系统①(用网页实现拍照图传) 第二篇:最简单DIY基于ESP32CAM的物联网相机系统 ...
基于NIO 的轻量级高性能的websocket服务器
[案例] 由于遇到一个实时采集股指,并把股指的实时数据在手机,平板电脑(股指数据采用的html展示)上展示给读者: 研究了使用ajax轮询请求数据,发现给服务器构成的压力比较大, 于是决定想想其他的方 ...
基于springboot+h5+websocket的即时通讯客服系统和百度实时语音转译(语音在线识别)
本文章由本人原创下载链接:https://download.csdn.net/download/u014191624/51948075 这是一个基于springboot+h5+websocket的即 ...
基于Boost::beast模块的异步WebSocket服务器
Boost:基于Boost::beast模块的异步WebSocket服务器实现功能 C++实现代码实现功能基于Boost::beast模块的异步WebSocket服务器 C++实现代码 #inc ...
基于Boost::beast模块的协程WebSocket 服务器
Boost:基于Boost::beast模块的协程WebSocket 服务器实现功能 C++实现代码实现功能基于Boost::beast模块的协程WebSocket 服务器 C++实现代码 #i ...
基于Boost::beast模块的快速WebSocket服务器
Boost:基于Boost::beast模块的快速WebSocket服务器实现功能 C++实现代码实现功能基于Boost::beast模块的快速WebSocket服务器 C++实现代码 #inc ...
基于Boost::beast模块的无栈协程WebSocket服务器
Boost:基于Boost::beast模块的无栈协程WebSocket服务器实现功能 C++实现代码实现功能基于Boost::beast模块的无栈协程WebSocket服务器 C++实现代码 ...
基于Boost::beast模块的同步WebSocket服务器
Boost:基于Boost::beast模块的同步WebSocket服务器实现功能 C++实现代码实现功能基于Boost::beast模块的同步WebSocket服务器 C++实现代码 #inc ...
netty 游戏服务器框图_基于Netty和WebSocket协议实现Web端自动打印订单服务方法与流程...
本发明涉及电子商务技术领域,尤其涉及一种基于netty和websocket协议实现web端自动打印订单服务方法. 背景技术: 电子商务是以信息网络技术为手段,以商品交换为中心的商务活动:也可理解为在互 ...

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