PHP与JavaScript实现WebSocket连接失败，请求排查解决建议

核心问题 #

你当前的server.php只是基础TCP Socket服务，并非WebSocket协议实现。WebSocket基于HTTP升级协议，需要完成特定握手流程才能建立连接，你的服务端未处理握手，导致浏览器连接失败。

排查步骤 #

• 统一协议类型：浏览器报错显示用了wss://，但客户端代码写的是ws://。若通过https://访问client.html，浏览器强制要求WebSocket用wss://；若用http://或本地文件打开，需用ws://，先统一协议避免安全限制。
• 验证服务端端口监听：运行server.php后，用工具检查8080端口是否被监听：
  • Windows：netstat -ano | findstr 8080
  • Linux/macOS：lsof -i:8080
    确保服务端正常启动，端口未被占用。
• 查看浏览器网络请求：打开F12开发者工具→网络面板，查看WebSocket请求的头信息。正常握手请求包含Upgrade: websocket、Sec-WebSocket-Key字段，你的服务端未返回对应响应，导致连接断开。

修复方案 #

方案1：修改服务端实现WebSocket握手 #

以下是简化的握手实现示例，处理浏览器的升级请求：

<?php
$host = "127.0.0.1";
$port = 8080;

// 创建并配置Socket
$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP) or die("创建Socket失败");
socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, 1);
socket_bind($socket, $host, $port) or die("绑定端口失败");
socket_listen($socket, 3) or die("监听端口失败");

// 接受客户端连接
$client = socket_accept($socket) or die("接受连接失败");

// 读取握手请求并处理
$buffer = socket_read($client, 1024);
preg_match("/Sec-WebSocket-Key: (.*)\r\n/", $buffer, $matches);
$acceptKey = base64_encode(sha1($matches[1] . "258EAFA5-E914-47DA-95CA-C5AB0DC85B11", true));

// 发送握手响应
$response = "HTTP/1.1 101 Switching Protocols\r\n";
$response .= "Upgrade: websocket\r\n";
$response .= "Connection: Upgrade\r\n";
$response .= "Sec-WebSocket-Accept: {$acceptKey}\r\n\r\n";
socket_write($client, $response, strlen($response));

// 处理消息（注意：WebSocket消息需解帧/封帧，此处为简化示例）
while (true) {
    $rawData = socket_read($client, 1024);
    if ($rawData) {
        // 简单回复，封装成WebSocket帧
        $replyMsg = "收到你的消息";
        $frame = chr(0x81) . chr(strlen($replyMsg)) . $replyMsg;
        socket_write($client, $frame, strlen($frame));
    }
}

// 关闭连接
socket_close($client);
socket_close($socket);
?>

方案2：使用成熟WebSocket库 #

手动实现协议易出错，推荐用Ratchet这类PHP库，它封装了握手、消息处理等逻辑，开发效率更高。

额外注意事项 #

• 本地测试时，避免用file://打开client.html，部分浏览器会限制WebSocket连接。建议用PHP内置服务器php -S localhost:8000启动HTTP服务，再访问http://localhost:8000/client.html。
• 若要使用wss://，需配置SSL证书，在服务端启用TLS加密，否则浏览器会拒绝连接。

内容的提问来源于stack exchange，提问作者Parveez Ahmed