PHP WebSocket实时多设备更新：构建Pub/Sub系统实践

# 假设您的服务器启动脚本为 server.php
php /path/to/your/websocket/server.php

// 示例：客户端连接WebSocket服务器并监听消息
// 替换为您的WebSocket服务器地址和端口
const socket = new WebSocket('ws://your-websocket-server-ip:port');

socket.onopen = function(event) {
    console.log('WebSocket 连接已建立。');
    // 连接成功后，可以发送消息注册到特定频道
    // 具体的注册消息格式取决于您的WebSocket服务器实现
    socket.send(JSON.stringify({ type: 'subscribe', channel: 'general_updates' }));
};

socket.onmessage = function(event) {
    // 接收到服务器推送的消息
    const message = JSON.parse(event.data);
    console.log('收到消息:', message);

    // 根据消息类型和频道更新UI
    if (message.type === 'broadcast' && message.channel === 'general_updates') {
        // 执行页面更新逻辑，例如显示新通知、更新数据列表
        updateUI(message.data);
    }
};

socket.onclose = function(event) {
    console.log('WebSocket 连接已关闭。尝试重连...');
    // 实现重连逻辑
    setTimeout(() => {
        // new WebSocket('ws://your-websocket-server-ip:port'); // 重新连接
    }, 3000); // 3秒后尝试重连
};

socket.onerror = function(error) {
    console.error('WebSocket 错误:', error);
};

// 模拟页面更新函数
function updateUI(data) {
    const outputDiv = document.getElementById('realtime-output');
    if (outputDiv) {
        outputDiv.innerHTML += `<p><strong>新更新:</strong> ${data.message} (来源: ${data.source})</p>`;
    }
    console.log('UI 已更新:', data);
}

// 假设页面上有一个用于显示实时更新的元素
document.addEventListener('DOMContentLoaded', () => {
    const body = document.body;
    if (!document.getElementById('realtime-output')) {
        const div = document.createElement('div');
        div.id = 'realtime-output';
        div.style.border = '1px solid #ccc';
        div.style.padding = '10px';
        div.style.marginTop = '20px';
        div.style.maxHeight = '200px';
        div.style.overflowY = 'auto';
        div.innerHTML = '<h3>实时更新：</h3>';
        body.appendChild(div);
    }
});

<?php
// 示例：PHP后端通过推荐库的客户端发送消息到WebSocket服务器
// 假设您已安装 napengam/phpWebSocketServer 并在服务器端运行
// 且客户端库已引入（例如通过Composer）
require 'vendor/autoload.php'; // 如果使用Composer

use Napengam\PHPWebSocketServer\Client\WebSocketClient;

// WebSocket服务器的地址和端口
$serverAddress = '127.0.0.1'; // 替换为您的WebSocket服务器IP
$serverPort = 8080; // 替换为您的WebSocket服务器端口

header('Content-Type: application/json'); // 设置响应头为JSON

try {
    // 实例化WebSocket客户端
    $client = new WebSocketClient($serverAddress, $serverPort);

    // 连接到WebSocket服务器
    $client->connect();

    // 构造要发送的广播消息
    // 消息结构应与WebSocket服务器的期望格式一致
    $broadcastMessage = [
        'type' => 'broadcast', // 假设服务器识别 'broadcast' 类型
        'channel' => 'general_updates', // 要广播到的频道
        'data' => [
            'message' => 'PHP后端触发的实时更新：' . date('Y-m-d H:i:s'),
            'source' => 'PHP_Backend',
            'status' => 'success'
        ]
    ];

    // 发送消息
    $client->send(json_encode($broadcastMessage));

    // 关闭连接
    $client->close();

    echo json_encode(['status' => 'success', 'message' => '实时更新消息已发送。']);

} catch (\Exception $e) {
    // 捕获连接或发送失败的异常
    http_response_code(500); // 设置HTTP状态码为500
    echo json_encode(['status' => 'error', 'message' => '发送消息失败：' . $e->getMessage()]);
}
?>