close

Erstellen einer Real-Time Chat-Anwendung mit Laravel WebSocket

Eine real-time Chat-Anwendung ist ein hervorragendes Beispiel dafür, wie die interaktive Kommunikation im Web WebSocket revolutioniert werden kann. real-time In diesem Artikel gehen wir Schritt für Schritt durch die Erstellung einer einfachen Chat-Anwendung mit Laravel und deren Integration WebSocket, laravel-websockets package um Benutzern reaktionsfähige und interaktive Kommunikationserlebnisse zu bieten.

Ziele der Anwendung

Wir werden eine real-time Chat-Anwendung mit den folgenden Funktionen erstellen:

Nachrichten sofort senden und empfangen: Benutzer können Nachrichten sofort senden und empfangen, ohne die Seite aktualisieren zu müssen.

Online-Benutzerliste: Die Anwendung zeigt eine Liste der Online-Benutzer und deren Chat-Status an.

Bilder und Dateien senden: Benutzer können Bilder und Dateien im Chat teilen.

Erste Schritte mit Installation und Konfiguration

Um zu beginnen, müssen wir das installieren und für laravel-websockets package die Integration konfigurieren. Folge diesen Schritten: WebSocket Laravel

Installieren Sie laravel-websockets package: Beginnen Sie mit der Installation package von Composer.

composer require pusher/pusher-php-server

Veröffentlichen Sie die Konfigurationsdatei: Veröffentlichen Sie nach der Installation die Konfigurationsdatei, um die Einstellungen anzupassen.

 

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

Ausführen migration: Erstellen Sie die erforderlichen Datenbanktabellen für WebSocket.

php artisan migrate

Server starten WebSocket: Starten Sie den WebSocket Server, um real-time Verbindungen zu verwalten 

php artisan websockets:serve

Erstellen der Benutzeroberfläche

Wir erstellen eine einfache Benutzeroberfläche mit HTML, CSS und JavaScript, um die Nachrichtenliste, das Eingabefeld und die Liste der Online-Benutzer anzuzeigen.

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

Integrieren WebSocket und Broadcasting

Wir werden es verwenden Laravel Broadcasting, um es in die Anwendung zu integrieren WebSocket.

Installieren Pusher: Installieren Sie das, um es als Treiber pusher/pusher-php-server package zu verwenden. Pusher Broadcasting 

composer require pusher/pusher-php-server

Konfigurieren Broadcasting: Konfigurieren Sie in der config/broadcasting.php Datei den Treiber und geben Sie Ihre Pusher Anmeldeinformationen ein.

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

Erstellen Sie ein Ereignis und senden Sie es: Erstellen Sie ein ChatMessageSent-Ereignis und senden Sie es, wenn ein Benutzer eine Nachricht sendet.

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

JavaScript-Skript: Verwenden Sie JavaScript, um auf Ereignisse vom Server zu warten und die Benutzeroberfläche zu aktualisieren.

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

Abschluss

Durch den Abschluss dieses Tutorials haben Sie erfolgreich eine real-time Chat-Anwendung WebSocket mit in erstellt Laravel. Benutzer können Nachrichten sofort senden und empfangen, und Sie haben gesehen, wie WebSocket eine reaktionsfähige und interaktive Kommunikationserfahrung entsteht.