websocket传表单数据

### 使用 WebSocket 发送和接收表单数据

为了通过 WebSocket 传输表单数据，可以按照以下方法构建客户端和服务端之间的交互逻辑。

#### 客户端 JavaScript 实现

创建一个 HTML 表单并监听提交事件，在提交时阻止默认行为并通过 WebSocket 发送 JSON 编码的数据：

<form id="form">
    <input type="text" name="username" placeholder="用户名"/>
    <input type="email" name="email" placeholder="电子邮件"/>
    <button>发送</button>
</form>

<script>
const form = document.getElementById('form');
let ws;

function initWebSocket() {
    const url = 'ws://yourserver.com/socket'; // 替换成实际地址
    ws = new WebSocket(url);
    
    ws.onopen = () => {
        console.log('已连接到服务器');
    };

    ws.onerror = (error) => {
        console.error(`WebSocket 错误: ${error}`);
    };
}

// 处理表单提交
form.addEventListener('submit', function(event){
    event.preventDefault();
    
    if(ws && ws.readyState === WebSocket.OPEN) {
        let formData = new FormData(form);
        let dataObject = {};
        
        formData.forEach((value, key) => {
            dataObject[key] = value;
        });
        
        ws.send(JSON.stringify(dataObject));
        console.log('消息已发送:', dataObject);
    } else {
        console.warn('WebSocket 尚未准备好');
    }
});

initWebSocket();

// 接收来自服务端的消息
ws.onmessage = function(e) {
    try{
        let response = JSON.parse(e.data);
        console.log('收到响应:', response);
    } catch(error){
        console.error('解析JSON失败:', error.message);
    }
};
</script>

此脚本展示了如何捕获表单输入并将它们作为对象序列化为 JSON 字符串来发送给 Web Socket 服务器[^1]。当接收到回复时，则尝试反序列化该字符串回原始的对象形式以便进一步处理。

#### PHP 服务端示例

对于基于 PHP 的 WebSocket 服务器来说，可以从 $_SERVER['HTTP_SEC_WEBSOCKET_KEY'] 获取握手密钥，并设置适当头部完成握手过程；之后就可以读取消息体中的 JSON 数据了:

<?php
$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);

// 建立与客户端的连接...
while(true){
    $msg = fread($connection, 2048);
    $data = json_decode(trim($msg), true);
    
    if ($data !== null) {
        echo "Received message from client:\n";
        print_r($data);
        
        // 对于简单应用可以直接返回相同结构的信息
        fwrite($connection, json_encode([
            'status' => 'success',
            'receivedData' => $data,
        ]));
    }
}
?>

这段代码片段说明了一个基本的服务端工作流程——它会等待直到有新的信息到达，接着解码这些信息成关联数组用于后续操作，最后再把结果编码回去传送给对方[^3]。