使用 C 语言实现 WebSocket: 一份简明教程

用 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 接口，并确保你的应用程序能够正常工作。这时，一个强大的接口测试工具就会派上用场。

Apifox 是一个比 Postman 更强大的接口测试工具，Apifox = Postman + Swagger + Mock + JMeter。它支持调试 http（s）、WebSocket、Socket、gRPC、Dubbo 等多种协议的接口，这使得它成为了一个非常全面的接口测试工具，所以强烈推荐去下载体验！

在 Apifox 中，你需要创建一个 WebSocket 请求以便进入相应的界面进行必要的信息填写。以下是步骤：

新建一个 HTTP 项目后，在项目中点击“+”按钮。
输入 WebSocket 服务的地址，例如 http://localhost:3000。
选择性地填写要传输的消息（Message）和参数（Params）。
填写完必要信息后，点击“保存”按钮以保留本次请求信息，方便下次调用。

立即体验 Apifox

要与服务器进行通信，你首先需要建立一个 WebSocket 连接。只需点击“连接”按钮即可。连接成功后，Apifox 会给出提示，同时服务器也会对此作出响应。

成功连接后，你可以使用 Apifox 提供的“发送”按钮，来发送消息和参数给服务器。

发送消息后，服务器同样可以向客户端回传信息，这一功能展示了 Apifox 的 WebSocket 功能的简便性，快去试试吧！

免费使用 Apifox

总结

使用 C 语言结合 libwebsockets 库可高效实现 WebSocket 服务端与客户端的应用开发。通过安装 libwebsockets 并集成至项目中，开发者能够快速搭建起支持 WebSocket 协议的网络应用。配合前端 HTML 页面与 Apifox 这样的强大工具进行接口调试，不仅简化了开发流程，还提高了测试效率，确保应用稳定运行。整个过程从库的安装、逻辑代码的编写到前端页面的创建及接口调试，形成了一套完整的开发测试闭环。

学习更多：