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服务器实时点灯是什么？
程序运行效果如下所示：
视频演示效果如下：
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/
点击跳转下载
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhgbfgfh
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
