Skip to content

Collaborative Kanban Board (toOthers() Pattern) ​

Scenario: User A drags a task card from "In Progress" to "Done". User B's screen sees the card move immediately, but User A does not receive their own echo, preventing UI stutter.

php
public function moveTask()
{
    $taskId   = (string) $this->request->getPost('task_id');
    $toColumn = (string) $this->request->getPost('to_column');
    $socketId = $this->request->getHeaderLine('X-Socket-ID');

    Broadcast::on('board.engineering')
        ->as('TaskMoved')
        ->with(['task_id' => $taskId, 'to_column' => $toColumn])
        ->toOthers($socketId)
        ->send();

    return $this->response->setJSON(['status' => 'success']);
}

Client extracts socket_id on connection and passes it in headers:

javascript
let currentSocketId = null;

ws.onmessage = (e) => {
    const frame = JSON.parse(e.data);
    if (frame.event === "pusher:connection_established") {
        currentSocketId = JSON.parse(frame.data).socket_id;
    }
    if (frame.event === "TaskMoved") {
        moveCardInDOM(frame.data.task_id, frame.data.to_column);
    }
};

fetch("/tasks/move", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        "X-Socket-ID": currentSocketId
    },
    body: JSON.stringify({ task_id: 12, to_column: "done" })
});

Released under the MIT License.