WebSocket: що це таке і як працює

WebSocket — це протокол, який дозволяє встановити постійне з’єднання між клієнтом і сервером для обміну даними в реальному часі.

На відміну від HTTP, де кожен запит є окремим, WebSocket працює через одне довготривале з’єднання.

Приклад: WebSocket на фронтенді (JavaScript)

const socket = new WebSocket('ws://localhost:3000');

socket.onopen = () => {
    console.log('Підключено');
    socket.send('Hello');
};

socket.onmessage = (event) => {
    console.log('Повідомлення:', event.data);
};

Приклад: WebSocket сервер на Node.js

npm install ws

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 3000 });

Приклад: WebSocket у Laravel (PHP)

Laravel не працює з WebSocket "з коробки", але має зручну систему Broadcasting.

Найпопулярніші варіанти:

• Laravel WebSockets (self-hosted)

• Pusher (SaaS)

Розглянемо self-hosted варіант.

Крок 1: Встановлення пакету

composer require beyondcode/laravel-websockets

Крок 2: Публікація конфігурації

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider"

Крок 3: Запуск сервера

php artisan websockets:serve

Крок 4: Створення події (Event)

php artisan make:event MessageSent

use Illuminate\Broadcasting\Channel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class MessageSent implements ShouldBroadcast
{
public $message;
public function __construct($message)
{
    $this->message = $message;
}

public function broadcastOn()
{
    return new Channel('chat');
}

Крок 5: Відправка події

event(new MessageSent('Привіт з Laravel'));

Крок 6: Підключення на фронтенді (Laravel Echo)

npm install laravel-echo pusher-js

import Echo from "laravel-echo";
import Pusher from "pusher-js";
window.Pusher = Pusher;
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'local',
wsHost: window.location.hostname,
wsPort: 6001,
forceTLS: false,
disableStats: true,
});

Коли використовувати Laravel + WebSocket

Цей стек ідеально підходить для:

• чатів у CRM

• live-нотифікацій

• адмін-панелей

• real-time оновлення статусів замовлень

Важливі нюанси

• Laravel використовує Broadcasting, а не "чистий" WebSocket

• потрібен окремий WebSocket сервер

• для продакшену часто додають Redis

WebSocket vs HTTP

Висновок

WebSocket відкриває можливості для створення дійсно інтерактивних веб-додатків. У зв’язці з Laravel він дозволяє швидко реалізувати real-time функціонал без складної низькорівневої логіки.

Головне — використовувати його там, де це дійсно виправдано.