Kuunda Real-Time Maombi ya Gumzo na Laravel WebSocket

Programu real-time ya gumzo ni mfano bora wa jinsi gani WebSocket inaweza kuleta mapinduzi katika real-time mawasiliano shirikishi kwenye wavuti. Katika makala haya, tutapitia kuunda programu rahisi ya gumzo kwa kutumia Laravel na kuunganisha WebSocket kwa kutumia laravel-websockets package kuwasilisha hali ya mawasiliano inayoitikia na inayoingiliana kwa watumiaji.

Malengo ya Maombi

Tutaunda real-time programu ya gumzo na huduma zifuatazo:

Tuma na Upokee Ujumbe Papo Hapo: Watumiaji wanaweza kutuma na kupokea ujumbe papo hapo bila kuhitaji kuonyesha upya ukurasa.

Orodha ya Watumiaji Mtandaoni: Programu itaonyesha orodha ya watumiaji wa mtandaoni na hali yao ya gumzo.

Tuma Picha na Faili: Watumiaji wanaweza kushiriki picha na faili ndani ya gumzo.

Anza na Ufungaji na Usanidi

Ili kuanza, tunahitaji kusakinisha laravel-websockets package na kusanidi ili kuunganishwa WebSocket na Laravel. Fuata hatua hizi:

Sakinisha laravel-websockets package: Anza kwa kusakinisha package kutumia Composer.

composer require pusher/pusher-php-server

Chapisha faili ya usanidi: Baada ya usakinishaji, chapisha faili ya usanidi ili kubinafsisha mipangilio.

 

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

Run migration: Unda majedwali muhimu ya hifadhidata ya WebSocket.

php artisan migrate

Anza WebSocket seva: Zindua WebSocket seva ili kushughulikia real-time miunganisho

php artisan websockets:serve

Kuunda Kiolesura cha Mtumiaji

Tutaunda kiolesura rahisi kwa kutumia HTML, CSS, na JavaScript ili kuonyesha orodha ya ujumbe, kisanduku cha ingizo na orodha ya watumiaji wa mtandaoni.

<!-- 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>  

Kuunganisha WebSocket na Broadcasting

Tutatumia Laravel Broadcasting kuunganisha WebSocket na programu.

Sakinisha Pusher: Sakinisha pusher/pusher-php-server package kutumia Pusher kama Broadcasting kiendeshaji.

composer require pusher/pusher-php-server

Sanidi Broadcasting: Katika config/broadcasting.php faili, sanidi dereva na upe Pusher sifa zako.

'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,  
    ],  
],  

Unda tukio na utangaze: Unda tukio la ChatMessageSent na ulitangaze mtumiaji anapotuma ujumbe.

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

Hati ya JavaScript: Tumia JavaScript kusikiliza matukio kutoka kwa seva na kusasisha kiolesura cha mtumiaji.

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

Hitimisho

Kwa kukamilisha mafunzo haya, umefanikiwa kuunda real-time programu ya gumzo kwa kutumia WebSocket katika Laravel. Watumiaji wanaweza kutuma na kupokea ujumbe papo hapo, na umeshuhudia jinsi WebSocket inavyotoa hali ya mawasiliano yenye mwitikio na mwingiliano.