close

Bini ta Real-Time ' Applikazzjoni ta' Chat ma' Laravel WebSocket

Applikazzjoni real-time ta' chat hija eżempju eċċellenti ta' kif WebSocket tista' tirrivoluzzjona real-time l-komunikazzjoni interattiva fuq il-web. F'dan l-artikolu, aħna ser nimxu permezz tal-bini ta 'applikazzjoni ta' chat sempliċi bl-użu Laravel u l-integrazzjoni WebSocket bl-użu ta ' laravel-websockets package biex inwasslu esperjenzi ta' komunikazzjoni reattivi u interattivi lill-utenti.

Għanijiet ta' l-Applikazzjoni

Aħna se nibnu real-time applikazzjoni ta' chat bil-karatteristiċi li ġejjin:

Ibgħat u Irċievi Messaġġi istantanjament: L-utenti jistgħu jibagħtu u jirċievu messaġġi istantanjament mingħajr il-bżonn li jġedded il-paġna.

Lista ta' Utenti Online: L-applikazzjoni se turi lista ta' utenti onlajn u l-istatus taċ-chat tagħhom.

Ibgħat Stampi u Fajls: L-utenti jistgħu jaqsmu immaġini u fajls fi ħdan iċ-chat.

Nibdew bl-Installazzjoni u l-Konfigurazzjoni

Biex nibdew, irridu ninstallaw laravel-websockets package u kkonfigurawha biex tintegraw WebSocket mal- Laravel. Segwi dawn il-passi:

Installa l- laravel-websockets package: Ibda billi tinstalla l package -użu Composer.

composer require pusher/pusher-php-server

Ippubblika l-fajl tal-konfigurazzjoni: Wara l-installazzjoni, ippublika l-fajl tal-konfigurazzjoni biex tippersonalizza s-settings.

 

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

Mexxi migration: Oħloq it-tabelli tad-database meħtieġa għal WebSocket.

php artisan migrate

Ibda WebSocket s-server: Ibda s- WebSocket server biex jimmaniġġja real-time l-konnessjonijiet 

php artisan websockets:serve

Bini tal-Interface tal-Utent

Aħna ser noħolqu interface għall-utent sempliċi billi tuża HTML, CSS, u JavaScript biex turi l-lista tal-messaġġi, il-kaxxa tal-input, u l-lista tal-utenti onlajn.

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

Jintegra WebSocket u Broadcasting

Aħna ser nużaw Laravel Broadcasting biex nintegraw WebSocket mal-applikazzjoni.

Installa Pusher: Installa l pusher/pusher-php-server package -użu Pusher bħala s Broadcasting -sewwieq.

composer require pusher/pusher-php-server

Ikkonfigura Broadcasting: Fil- config/broadcasting.php fajl, ikkonfigura s-sewwieq u agħti Pusher l-kredenzjali tiegħek.

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

Oħloq avveniment u xxandar: Oħloq avveniment ChatMessageSent u xandarh meta utent jibgħat messaġġ.

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

JavaScript Script: Uża JavaScript biex tisma' għal avvenimenti mis-server u taġġorna l-interface tal-utent.

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

Konklużjoni

Billi tlesti dan it-tutorja, bnejt b'suċċess real-time applikazzjoni ta' chat bl-użu WebSocket fi Laravel. L-utenti jistgħu jibagħtu u jirċievu messaġġi istantanjament, u int rat kif WebSocket tipprovdi esperjenza ta 'komunikazzjoni reattiva u interattiva.