基于Ratchet PHP的帖子编辑状态实时通知问题求助

看起来你已经搞定了编辑开始时的实时推送通知，现在卡在用户停止编辑时没法同步状态的环节对吧？别担心，我来给你梳理几个关键步骤，帮你把这个闭环补上：

一、前端触发停止编辑的事件 #

你需要在编辑页监听用户停止编辑的动作，主要覆盖两种场景：主动操作（保存/取消）和被动操作（页面关闭/刷新）。

1. 主动触发（保存/取消按钮） #

在编辑页的按钮点击事件中，先完成核心操作（保存/取消），再发送请求到后端触发停止编辑的推送：

// 保存按钮点击事件
document.getElementById('save-post').addEventListener('click', async function() {
    // 先执行保存帖子的逻辑（比如提交表单）
    await savePostLogic();
    
    // 发送停止编辑通知
    fetch('/api/stop-editing-post', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            post_id: YOUR_POST_ID, // 替换为当前编辑的帖子ID
            user_id: CURRENT_USER_ID // 替换为当前用户ID
        })
    });
});

// 取消按钮同理
document.getElementById('cancel-edit').addEventListener('click', function() {
    fetch('/api/stop-editing-post', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            post_id: YOUR_POST_ID,
            user_id: CURRENT_USER_ID
        })
    });
});

2. 被动触发（页面关闭/刷新） #

监听beforeunload事件，处理用户意外关闭标签页、刷新页面的场景。这里推荐用navigator.sendBeacon，它能确保页面卸载时请求仍能被发送：

window.addEventListener('beforeunload', function(event) {
    const stopEditData = JSON.stringify({
        post_id: YOUR_POST_ID,
        user_id: CURRENT_USER_ID
    });
    // 使用sendBeacon替代普通AJAX，避免浏览器取消请求
    navigator.sendBeacon('/api/stop-editing-post', stopEditData);
});

二、后端处理停止编辑的请求 #

创建一个后端接口（比如/api/stop-editing-post），接收前端的停止编辑请求，然后通过ZMQ Push发送消息给Ratchet服务：

// 以PHP框架控制器为例，原生PHP逻辑同理
public function handleStopEditing(Request $request) {
    $postId = $request->input('post_id');
    $userId = $request->input('user_id');

    // 可选：更新数据库中帖子的编辑状态（标记为可编辑）
    // Post::where('id', $postId)->update(['is_editing' => false, 'editing_user' => null]);

    // 构造停止编辑的推送数据，和开始编辑的格式对齐
    $stopEditPayload = [
        'post_id' => $postId,
        'user_id' => $userId,
        'action' => 'stop_edit', // 用来区分开始/停止编辑动作
        'timestamp' => time()
    ];

    // 复用你已有的ZMQ推送逻辑
    $context = new ZMQContext();
    $socket = $context->getSocket(\ZMQ::SOCKET_PUSH);
    $socket->connect("tcp://localhost:5555");
    $socket->send(json_encode($stopEditPayload));

    return response()->json(['status' => 'success']);
}

三、Ratchet服务端处理停止编辑消息 #

确保你的Ratchet服务能解析ZMQ传来的消息，并将停止编辑的状态广播给所有订阅客户端。扩展你现有的消息处理逻辑：

// 你的Ratchet MessageComponentInterface实现类
public function onMessage(ConnectionInterface $from, $msg) {
    $data = json_decode($msg, true);
    
    if ($data['action'] === 'start_edit') {
        // 你已有的开始编辑广播逻辑
        $this->broadcast(json_encode([
            'post_id' => $data['post_id'],
            'status' => 'editing',
            'user_id' => $data['user_id']
        ]));
    } elseif ($data['action'] === 'stop_edit') {
        // 新增停止编辑的广播逻辑
        $this->broadcast(json_encode([
            'post_id' => $data['post_id'],
            'status' => 'available',
            'user_id' => $data['user_id']
        ]));
    }
}

// 广播方法（如果还没实现）
private function broadcast($message) {
    foreach ($this->clients as $client) {
        $client->send($message);
    }
}

四、前端列表页更新状态 #

在列表页的订阅回调中，根据收到的状态更新帖子的显示：

conn.subscribe('onEditPost', function(topic, data) {
    const postData = JSON.parse(data);
    const postElement = document.querySelector(`.post-item[data-post-id="${postData.post_id}"]`);
    
    if (!postElement) return;
    
    if (postData.status === 'editing') {
        // 标记帖子为正在编辑状态
        postElement.classList.add('being-edited');
        postElement.insertAdjacentHTML('beforeend', `<span class="edit-status">用户${postData.user_id}正在编辑...</span>`);
    } else if (postData.status === 'available') {
        // 恢复帖子可编辑状态
        postElement.classList.remove('being-edited');
        const statusElement = postElement.querySelector('.edit-status');
        if (statusElement) statusElement.remove();
    }
});

额外注意事项 #

• 权限校验：后端接口要验证当前用户是否确实在编辑该帖子，防止恶意请求。
• 幂等处理：可能出现重复的停止编辑消息，前端和后端要做好状态覆盖逻辑，避免重复更新。
• 重连同步：如果用户WebSocket断开重连，列表页要主动拉取一次最新的帖子编辑状态，避免显示过期信息。

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