Real-Time ჩატის აპლიკაციის შექმნა Laravel WebSocket

ჩატის real-time აპლიკაცია შესანიშნავი მაგალითია იმისა, თუ როგორ WebSocket შეიძლება მოახდინოს რევოლუცია real-time ინტერნეტში ინტერაქტიული კომუნიკაციისთვის. ამ სტატიაში, ჩვენ განვიხილავთ მარტივი ჩეთის აპლიკაციის შექმნას, გამოყენებით Laravel და ინტეგრირებით WebSocket, laravel-websockets package რათა მივაწოდოთ საპასუხო და ინტერაქტიული კომუნიკაციის გამოცდილება მომხმარებლებს.

აპლიკაციის მიზნები

ჩვენ ავაშენებთ real-time ჩატის აპლიკაციას შემდეგი მახასიათებლებით:

შეტყობინებების მყისიერად გაგზავნა და მიღება: მომხმარებლებს შეუძლიათ მყისიერად გაგზავნონ და მიიღონ შეტყობინებები გვერდის განახლების საჭიროების გარეშე.

ონლაინ მომხმარებელთა სია: აპლიკაცია აჩვენებს ონლაინ მომხმარებელთა სიას და მათ ჩეთის სტატუსს.

სურათებისა და ფაილების გაგზავნა: მომხმარებლებს შეუძლიათ სურათებისა და ფაილების გაზიარება ჩატის ფარგლებში.

ინსტალაციისა და კონფიგურაციის დაწყება

დასაწყებად, ჩვენ უნდა დავაინსტალიროთ laravel-websockets package და დააკონფიგურიროთ იგი WebSocket ინტეგრირებისთვის Laravel. Მიყევი ამ ნაბიჯებს:

დააინსტალირეთ laravel-websockets package: დაიწყეთ ინსტალაციის package გამოყენებით Composer.

composer require pusher/pusher-php-server

კონფიგურაციის ფაილის გამოქვეყნება: ინსტალაციის შემდეგ გამოაქვეყნეთ კონფიგურაციის ფაილი პარამეტრების მოსარგებად.

php artisan vendor:publish --tag=websockets-config

გაშვება migration: შექმენით საჭირო მონაცემთა ბაზის ცხრილები WebSocket.

php artisan migrate

სერვერის დაწყება WebSocket: გაუშვით სერვერი კავშირების WebSocket დასამუშავებლად real-time

php artisan websockets:serve

მომხმარებლის ინტერფეისის შექმნა

ჩვენ შევქმნით მარტივ მომხმარებლის ინტერფეისს HTML, CSS და JavaScript-ის გამოყენებით შეტყობინებების სიის, შეყვანის ველისა და ონლაინ მომხმარებელთა სიის საჩვენებლად.

<!-- resources/views/chat.blade.php -->  
  
<div id="app">  
    <div class="chat-container">  
        <div class="chat-box">  
            <div class="chat-messages">  
                <div class="message" v-for="message in messages":key="message.id">  
                    {{ message.user }}: {{ message.content }}  
                </div>  
            </div>  
            <div class="input-box">  
                <input v-model="newMessage" @keydown.enter="sendMessage" placeholder="Enter your message...">  
            </div>  
        </div>  
    </div>  
</div>  

ინტეგრირება WebSocket და Broadcasting

ჩვენ გამოვიყენებთ აპლიკაციასთან Laravel Broadcasting ინტეგრაციისთვის. WebSocket

ინსტალაცია Pusher: დააინსტალირეთ, pusher/pusher-php-server package რომ გამოიყენოთ Pusher როგორც Broadcasting დრაივერი.

composer require pusher/pusher-php-server

კონფიგურაცია Broadcasting: ფაილში config/broadcasting.php დააკონფიგურირეთ დრაივერი და მიაწოდეთ თქვენი Pusher რწმუნებათა სიგელები.

'pusher' => [  
    'driver' => 'pusher',  
    'key' => env('PUSHER_APP_KEY'),  
    'secret' => env('PUSHER_APP_SECRET'),  
    'app_id' => env('PUSHER_APP_ID'),  
    'options' => [  
        'cluster' => env('PUSHER_APP_CLUSTER'),  
        'encrypted' => true,  
    ],  
],  

ღონისძიების შექმნა და ტრანსლირება: შექმენით ChatMessageSent ღონისძიება და გაავრცელეთ იგი, როდესაც მომხმარებელი აგზავნის შეტყობინებას.

// app/Events/ChatMessageSent.php  
  
public function broadcastOn()  
{  
    return new Channel('chat');  
}  

JavaScript Script: გამოიყენეთ JavaScript სერვერიდან მოვლენების მოსასმენად და მომხმარებლის ინტერფეისის განახლებისთვის.

// resources/js/app.js  
  
require('./bootstrap');  
  
import Vue from 'vue';  
import Chat from './components/Chat.vue';  
  
const app = new Vue({  
    el: '#app',  
    components: {  
        Chat  
    }  
});  

დასკვნა

ამ სახელმძღვანელოს დასრულებით, თქვენ წარმატებით შექმენით real-time ჩეთის აპლიკაცია WebSocket ში Laravel. მომხმარებლებს შეუძლიათ გაგზავნონ და მიიღონ შეტყობინებები მყისიერად, და თქვენ მოწმე ხართ, თუ როგორ WebSocket უზრუნველყოფს საპასუხო და ინტერაქტიული კომუნიკაციის გამოცდილებას.