Laravel 10.x WebSocketni ishga tushirish

Bunday bloglar tarmoqlarda ko’p, lekin yangi boshlovchilar uchun bular to’liq tushintirish emas. ChatGPT ham to’liq to’liq tushintirish ber olmayapti. Laravel versiyalari bo’yicha chalkashliklar yuzaga kelmoqda. Shuning uchun aynan laravel 10.x da ishlaydigan to’liq tushintirilgan blog tuzishga kirishdim.

Backend qismini sozlashni boshlaymiz

Laravel projectni yarating:

composer create-project laravel/laravel:^10.0 websocket-app

Projectga kirib oling

cd websocket-app

VsCode ni ochib oling va .env faylni oching va database ni to’g’rilab oling.

Endi laravel-websocket ni o’rnatib oling

composer require beyondcode/laravel-websockets

Agar xatolik yuz bersa quyidagi commandni ishga tushiring (Agar xatolik chiqsa)

composer require beyondcode/laravel-websockets -w

Laravel-WebSocket ni migration va config ini publish qilib olamiz va migrate qilamiz.

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"
php artisan migrate

Endi Event yaratib olamiz

php artisan make:event SendMessageToClientEvent

SendMessageToClientEvent ni tahrilab oling

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class SendMessageToClientEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    public function __construct($message = 'Hello, this is a message!')
    {
        $this->message = $message;
    }

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

    public function broadcastAs()
    {
        return 'SendMessageToClientEvent';
    }
}

Yana .env faylni tahrirlashimiz kerak. Pusher ni tahrirlab olamiz. Pusher saytidan ro’yhatdan o’tib PUSHER_APP_ID, PUSHER_APP_KEY, PUSHER_APP_SECRET o’zgaruvchilarni qabul qilamiz

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=1234
PUSHER_APP_KEY=ab12345
PUSHER_APP_SECRET=1848ccd
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1

Frontendni sozlab olamiz

Biz eventlarni tinglash uchun Laravel bilan integratsiyalashgan Laravel Echo paketidan foydalanamiz.

Client side uchun biz quyidagi bog’liqliklarni o’rnatishimiz kerak:

npm install --save-dev laravel-echo pusher-js

Keling, endi bootstrap.js ga qo’shamiz (resurslar/js ichida)

import Echo from "laravel-echo"
import Pusher from "pusher-js"
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: import.meta.env.VITE_PUSHER_PORT,
    forceTLS: false,
    disableStats: true,
    cluster:import.meta.env.VITE_PUSHER_APP_CLUSTER,
});

WebSocket ni start qilamiz

Quyidagi commandni consoleda ishga tushiring

php artisan websockets:serve

Client qismiga listen event ni qo’shamiz

Istalgan x.blade.php ga quyidagi kodni qo’shing.

    @vite('resources/js/app.js')
    <script type="module">
        // the dot before the event name is not an error!
        Echo.channel('test').listen('.SendMessageToClientEvent',(e) => {
            alert(e.message)
        })
    </script>

Channelga malumot yuborish uchun route qo’yamiz

routes/web.php ga quyidagi codeni qo’ying

Route::get('/try-websocket', function() {
    $event = new SendMessageToClientEvent('Test message');
    broadcast($event);
    return response()->json(['status' => 'Event dispatched', 'event' => $event]);
});

Frontend qismini ishga tushiramiz

Quyidagi buyruqni console ga kiriting

npm run dev

PHP Serverni ishga tushiring

Quyidagi buyruqni console ga kiriting

php artisan serve

Hammasi tayyor! Endi sinab ko’ring

Asosiy sahifani oching: http://127.0.0.1:8000/

Channelga malumot qo’shamiz: http://127.0.0.1:8000/try-websocket

Ikkala sahifaga ketma-ket kirganingizdan so’ng asosiy sahifada alert xabar keladi.