第十八章 ESP32的WebSocket服务器

• 源码地址：https://github.com/HX-IoT/ESP32-Developer-Guide
• ESP32开发指南QQ群：824870185，内有pdf版，排版整洁。

学习目的及目标

掌握Websocket原理和工作过程

掌握乐鑫ESP32的WebSocket的程序设计

WebSocket原理

WebSocket 是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

为什么需要 WebSocket ？

了解计算机网络协议的人，应该都知道：HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。

这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。大多数 Web 应用程序将通过频繁的异步JavaScript和XML（AJAX）请求实现长轮询。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。

因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。WebSocket 连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接，就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。

Websocket特点

1. 建立在 TCP 协议之上，服务器端的实现比较容易。
2. 与 HTTP 协议有着良好的兼容性。默认端口也是 80 和 443 ，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
3. 数据格式比较轻量，性能开销小，通信高效。
4. 可以发送文本，也可以发送二进制数据。
5. 没有同源限制，客户端可以与任意服务器通信。

协议标识符是ws（如果加密，则为wss），服务器网址就是 URL，如下图。

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

请求握手包

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat

接收请求包

注：WebSocket握手详解

Websocket和HTTP连接过程

Websocket工作过程

软件设计

ESP32的Websocket详细过程

 

ESP32的Websocket接口介绍

• 连接函数：netconn_new();
• 绑定函数：netconn_bind();
• 监听函数：netconn_listen();
• 获取连接函数：netconn_accept();
• 接收数据函数：netconn_recv();
• 发送数据函数：netconn_write();
• 关闭连接函数：netconn_close();
• 删除连接函数：netconn_delete();

更多更详细接口请参考官方指南。

Websocket新建任务编写

void ws_server(void *pvParameters)
{
struct netconn *conn, *newconn;
//获取tcp socket connect
conn = netconn_new(NETCONN_TCP);
//绑定port
netconn_bind(conn, NULL, WS_PORT);
//监听
netconn_listen(conn);
//等待client连接
while (netconn_accept(conn, &newconn) == ERR_OK)
{
//新连接：等待连接、连接过程、数据读取
ws_server_netconn_serve(newconn);
}
//关闭websocket server connect
netconn_close(conn);
netconn_delete(conn);
}

Websocket连接过程代码

static void ws_server_netconn_serve(struct netconn *conn) {
//申请SHA1
p_SHA1_Inp = pvPortMallocCaps(WS_CLIENT_KEY_L + sizeof(WS_sec_conKey),
MALLOC_CAP_8BIT);
//申请SHA1 result
p_SHA1_result = pvPortMallocCaps(SHA1_RES_L, MALLOC_CAP_8BIT);
//Check if malloc suceeded
if ((p_SHA1_Inp != NULL) && (p_SHA1_result != NULL)) {
//接收“连接”过程的数据
if (netconn_recv(conn, &inbuf) == ERR_OK) {
//读取“连接”过程的数据到buf
netbuf_data(inbuf, (void**) &buf, &i);
//把server的key传给SHA1
for (i = 0; i < sizeof(WS_sec_conKey); i++)
{
//放在后24字节
p_SHA1_Inp[i + WS_CLIENT_KEY_L] = WS_sec_conKey[i];
}
//搜索client的key
p_buf = strstr(buf, WS_sec_WS_keys);
//找到key
if (p_buf != NULL) {
//get Client Key
for (i = 0; i < WS_CLIENT_KEY_L; i++)
{
//放在前24字节
p_SHA1_Inp[i] = *(p_buf + sizeof(WS_sec_WS_keys) + i);
}
// 计算 hash
esp_sha(SHA1, (unsigned char*) p_SHA1_Inp, strlen(p_SHA1_Inp),
(unsigned char*) p_SHA1_result);
//转base64
p_buf = (char*) _base64_encode((unsigned char*) p_SHA1_result,
SHA1_RES_L, (size_t*) &i);
//free SHA1 input
free(p_SHA1_Inp);
//free SHA1 result
free(p_SHA1_result);
if (p_payload != NULL) {
//准备“握手”帧
sprintf(p_payload, WS_srv_hs, i - 1, p_buf);
//发送“握手”帧
netconn_write(conn, p_payload, strlen(p_payload),NETCONN_COPY);
//free base64
free(p_buf);
//free “握手”内存
free(p_payload);
//websocket连接成功
WS_conn = conn;
//“接收数据”
while (netconn_recv(conn, &inbuf) == ERR_OK) {
。。。。。。

Websocket发送代码

err_t WS_write_data(char* p_data, size_t length) {
//websocket未连接，直接退出
if (WS_conn == NULL)
return ERR_CONN;
//数据帧长度溢出，直接退出
if (length > WS_STD_LEN)
return ERR_VAL;
err_t result;
//报头
WS_frame_header_t hdr;
hdr.FIN = 0x1;
hdr.payload_length = length;
hdr.mask = 0;
hdr.reserved = 0;
hdr.opcode = WS_OP_TXT;
//发送报头
result = netconn_write(WS_conn, &hdr, sizeof(WS_frame_header_t), NETCONN_COPY);
if (result != ERR_OK)
return result;
//发送数据
return netconn_write(WS_conn, p_data, length, NETCONN_COPY);
}

代码有全部中文注释

测试流程和效果展示

测试流程

1. 修改STA的账号密码
2. 使用电脑助手工具进行WebSocket测试

效果展示

连接

发送

控灯

断开连接

WebSocket总结

• 此源码主要是学习WebSocket整个流程，实际中还有很多可以完善的地方，了解WebSocket后，就自己飞向天空吧。
• 源码地址：https://github.com/xiaolongba/wireless-tech

点我->更多ESP32开发指南系列目录