用 C 语言实现 WebSocket
安装 libwebsockets
libwebsockets 是一个 C语言 编写的跨平台的 WebSocket 库,可用于创建 WebSocket 协议相关的服务器和客户端。它是一个灵活且易于使用的库,可以快速构建一个高性能的 WebSocket 应用程序。由于其简单、轻量级的设计,它非常适合构建基于嵌入式系统或处理大量连接的高负载服务器应用。
我们可以这么去安装 libwebsockets:
git clone https: //github.com/warmcat/libwebsockets.git
cd libwebsockets
mkdir build
cd build
cmake ..
make && sudo make install
pkg-config --modversion libwebsockets
添加 libwebsockets.h
#include <libwebsockets.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <time.h>
逻辑代码编写
#include <libwebsockets.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <time.h>
// WebSocket 数据的结构体,用于存储每个会话的数据
struct per_session_data {
};
// WebSocket 服务器消息的回调函数
int callback(struct lws *wsi, enum lws_callback_reasons reason, void *user, void *in, size_t len) {
switch (reason) {
case LWS_CALLBACK_ESTABLISHED: // 处理新连接事件
// 添加计时器,每秒发送一个时间戳
lws_callback_on_writable(wsi);
break;
case LWS_CALLBACK_SERVER_WRITEABLE: // 处理发送数据事件
// 发送时间戳
time_t t = time(NULL);
char timestamp[20];
sprintf(timestamp, "%ld", t);
lws_write(wsi, timestamp, strlen(timestamp), LWS_WRITE_TEXT);
lws_callback_on_writable(wsi);
break;
// 其他事件省略
}
return 0;
}
int main(int argc, char **argv) {
// 创建 WebSocket 协议
static struct lws_protocols protocols[] = {
{
"demo-protocol", // 协议名称,需要和前端代码中的 WebSocket 协议相同
callback, // 回调函数指针
sizeof(struct per_session_data), // 每个会话(连接)所拥有的数据大小
0, // 没有更多的协议参数
NULL, NULL, NULL
},
{ NULL, NULL, 0, 0 } // 协议列表以 NULL 结尾
};
// 创建 WebSocket 上下文
struct lws_context_creation_info info = {
.port = 3001, // 监听端口号
.protocols = protocols // 协议列表
};
struct lws_context *context = lws_create_context(&info);
// 判断 WebSocket 上下文是否创建成功
if (!context) {
printf("Failed to create WebSocket context.\n");
return -1;
}
// 进入循环,等待 WebSocket 连接
while (1) {
lws_service(context, 50);
}
// 清理并关闭 WebSocket 上下文
lws_context_destroy(context);
return 0;
}
前端页面连接 WebSocket
页面编写
我们需要创建一个 index.html
,并写入以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = () => {
if ('WebSocket' in window) {
// 创建websocket连接
let ws = new WebSocket('ws://127.0.0.1:3001/websocket');
// 成功连接的时候推送一条消息,此时服务端就可以开始推送数据了
ws.onopen = () => {
console.log('websocket success---');
ws.send('success');
}
ws.onmessage = (message) => {
let data = message.data;
console.log('get websocket message---', data);
}
ws.onerror = () => {
console.error('websocket fail');
}
} else {
console.error('dont support websocket');
};
};
</script>
</head>
<body>
</body>
</html>
启动页面
在 index.html 右键,并打开此文件:
查看效果
可以看到后端先接收到前端的信息,open 建立成功。
然后建立连接后,后端一直在为前端输出信息。
使用 Apifox 发送 WebSocket 请求
针对 WebSocket 服务的调试,我推荐使用一些非常棒的API调试工具,比如 Apifox,借助它你可以轻松、完美地调试 WebSocket 服务~
使用 Apifox Web 端的朋友,需要使用 Apifox 谷歌浏览器插件,才能使用 Apifox Web 端访问本地接口哦~
你也可以使用 Apifox 客户端,那样更方便~
新建 WebSocket 请求
实现 WebSocket 通信需要建立客户端与服务端的长期连接,所以在 Apifox 中,我们需要创建一个 WebSocket 请求。首先,点击创建按钮,然后填写 WebSocket URL。最后,您可以添加消息和参数进行传递~
发送信息 和 传递参数
发送信息
在 Message 中,你可以填写要传递到服务端的信息。服务端将接收你发送的信息。
传递参数
在传输过程中,你也可以携带参数,可以通过在地址上添加查询参数完成,可以携带的数据类型包括 string、integer、number、array。
保存请求
写完所需信息之后,可以点击 保存按钮,进行保存,方便下次可继续调用。
连接、发送 WebSocket 请求
连接 WebSocket 服务
我们想要跟服务端进行 WebSocket 通信,就需要先建立一个 WebSocket 连接,我们只需要点击 连接 按钮。连接成功之后有成功的提示~
服务端那边也会因为连接成功,而做出响应。
发送 WebSocket 请求
接着我们就可以跟服务端进行 WebSocket 通信了。我们可以使用 Apifox 点击发送按钮向服务端进行发送 消息、参数。
与 WebSocket 服务通信
发送数据后,服务端也可以向客户端发送信息。我在这里设置了服务端每秒向客户端发送当时的时间戳,这就是 Apifox 提供的 WebSocket 功能,非常的方便易用~
与 WebSocket 断开连接
如果不想连接了,可以点击断开按钮,即可断开连接。
关于 Apifox
欢迎体验一下,完全免费的哦:在线使用 Apifox。
Apifox 是全世界 API 工具中的佼佼者,它的好处包括:
- 集成了 API 文档、API 调试、API Mock、API 自动化测试 API 一体化协作平台
- Apifox = Postman + Swagger + Mock + JMeter
- 简单易用: Apifox 提供直观易用的接口管理界面,使创建、管理和编辑接口变得简单。
- 高效调试: Apifox 使用 Websocket 技术实现实时数据传输,支持多个操作系统和编程语言,使接口调试更加高效。
- 完整的接口测试: Apifox 提供完整的接口测试工具,可帮助开发人员快速发现和修复接口问题。
- 安全的API管理: Apifox 提供安全的API管理,使开发者可以安全地管理和保护他们的 API。