如何在PHP中将WebSocket数据显示到浏览器中

首先要明确一点：你当前实现的是普通TCP Socket服务，不是标准的WebSocket（WebSocket有特定的握手协议和帧格式），不过我们可以先基于现有代码修改，实现浏览器提交消息后展示服务器的响应，之后再给你进阶的实时通信建议。

问题分析 #

你的server.php目前只是把收到的消息输出到CMD，没有将消息回传给客户端；而client.php只负责发送消息，没有接收服务器的响应并在页面展示。我们需要对两端代码做两处核心修改：

1. 修改服务器端（server.php）：接收消息后回传给客户端 #

我们需要在服务器收到消息后，把响应内容写回给连接的客户端，同时要注意每次处理完连接后关闭客户端Socket（之前的代码把socket_close($accept)放到了循环外，会导致只能处理一次连接）。

修改后的server.php代码：

<?php
$host = "127.0.0.1";
$port = "80446";
set_time_limit(0);
$socket = socket_create(AF_INET, SOCK_STREAM, 0) or die('Socket Create Not Working');
$result = socket_bind($socket, $host, $port) or die ('Socket Bind Not Working in Result');
$result = socket_listen($socket, 3) or die('Socket Listen Not Working');

echo "Listening for connections on $host:$port\n";

do{
    $accept = socket_accept($socket) or die('Accept Not Working');
    $message = socket_read($accept, 1024);
    $message = trim($message);
    
    // 在CMD记录收到的消息
    echo "Received message from client: " . $message . "\n";
    
    // 构造响应内容并回传给客户端
    $response = "Server confirmed: Your message \"" . $message . "\" was received successfully!";
    socket_write($accept, $response, strlen($response));
    
    // 关闭当前客户端连接，准备接收下一个连接
    socket_close($accept);
}while(true);

socket_close($socket);
?>

2. 修改客户端（client.php）：接收服务器响应并在页面展示 #

客户端在发送消息后，需要读取服务器返回的响应内容，然后在HTML页面中渲染出来。我们会添加一个区域专门展示服务器的响应。

修改后的client.php代码：

<?php
$serverResponse = '';
if(isset($_POST['submit']) && !empty($_POST['message'])) {
    $host = "127.0.0.1";
    $port = "80446";
    set_time_limit(0);
    
    $socket = socket_create(AF_INET, SOCK_STREAM, 0) or die('Socket Create Not Working');
    $connectResult = socket_connect($socket, $host, $port);
    
    if($connectResult) {
        $message = $_POST['message'];
        socket_write($socket, $message, strlen($message));
        
        // 读取服务器返回的响应
        $serverResponse = socket_read($socket, 1024);
        $serverResponse = trim($serverResponse);
        
        socket_close($socket);
    } else {
        $serverResponse = "Failed to connect to server. Make sure server.php is running!";
    }
}
?>
<!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>Socket Client</title>
    <style>
        .response-box {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
            background-color: #f5f5f5;
        }
        .success {
            border-left: 4px solid #4CAF50;
        }
        .error {
            border-left: 4px solid #f44336;
        }
    </style>
</head>
<body>
    <form action="" method="POST">
        <input type="text" name="message" placeholder="Enter your message..." required>
        <button type="submit" name="submit">Send Message</button>
    </form>

    <!-- 展示服务器响应 -->
    <?php if(!empty($serverResponse)): ?>
        <div class="response-box <?php echo strpos($serverResponse, 'Failed') !== false ? 'error' : 'success'; ?>">
            <strong>Server Response:</strong> <?php echo htmlspecialchars($serverResponse); ?>
        </div>
    <?php endif; ?>
</body>
</html>

运行步骤 #

1. 打开CMD，进入代码所在目录，启动服务器：php server.php，你会看到提示"Listening for connections on 127.0.0.1:80446"
2. 用浏览器访问client.php，输入消息点击发送，页面下方就会显示服务器的响应内容，同时CMD里也会记录收到的消息。

进阶建议：实现实时WebSocket通信 #

如果你的需求是无需刷新页面就能实时收发消息（类似聊天功能），那普通TCP Socket就不太合适了，需要实现标准的WebSocket协议。你可以使用PHP的Ratchet库（专门用于WebSocket开发），它封装了复杂的握手和帧处理逻辑，能快速搭建实时WebSocket服务，前端用原生WebSocket API就能和服务器双向通信。

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