Wie erstelle ich eine Echtzeit-Chat-Anwendung mit Laravel?

Richten Sie Laravel ein und installieren Sie Abhängigkeiten wie Laravel Sanctum und Laravel Echo. 2. Konfigurieren Sie Pusher als Broadcast -Treiber in .Env und aktivieren Sie den BroadcastServiceProvider. 3. Erstellen Sie ein Nachrichtenmodell mit einer Migration, die User_id- und Nachrichtenfelder enthält. 4. Implementieren Sie die Authentifizierung mit dem integrierten System von Laravel. 5. Erstellen Sie ein Messagentialereignis, das implementiert wird, und verwendet ein PresencechanNel für Online -Benutzerverfolgung. 6. Erstellen Sie einen ChatController mit Methoden zum Abrufen und Senden von Nachrichten und übertragen Sie das Nachrichtenereignis. 7. Entwerfen Sie ein Frontend mit Blade oder Vue, integrieren Sie Laravel Echo und hören Sie sich Echtzeit-Events an. 8. Kompilieren Sie Assets, führen Sie den Server aus und testen Sie Echtzeit-Messaging über mehrere Benutzer hinweg. Eine Echtzeit-Chat-Anwendung in Laravel wird erfolgreich mit WebSockets über Pusher und Laravel Echo erstellt, wodurch Sofortnachrichtensendungen und dynamische UI-Updates ermöglicht werden.

Der Aufbau einer Echtzeit-Chat-Anwendung mit Laravel ist erreichbar, indem die Backend-Funktionen von Laravel mit Echtzeit-Rundfunk mithilfe von Websockets kombiniert werden. Hier ist eine praktische Anleitung, mit der Sie Schritt für Schritt eine funktionale Echtzeit-Chat-App erstellen können.

1. Richten Sie Laravel und Laravel Echo Server ein

Beginnen Sie mit der Erstellung eines neuen Laravel -Projekts:

 Komponist erstellen project laravel/laravel in Echtzeit-Chat
CD Echtzeit-Chat

Installieren Sie Laravel Sanctum für die API-Authentifizierung (bei Verwendung eines SPA) oder verwenden Sie die integrierte Sitzung von Laravel:

 Der Komponist benötigt Laravel/Sanctum
PHP Artisan Vendor: Publish -Provider = "Laravel \ Sanctum \ SanctumServiceProvider"
PHP Artisan migrieren

Installieren Sie Laravel Echo und Pusher JS für clientseitige Rundfunk:

 NPM Install-Save Laravel-Echo Pusher-Js

Hinweis: Laravel Echo ermöglicht es Ihrem JavaScript, auf Sendung von Ereignissen von Laravel zu hören.

2. Verwenden Sie Pusher für Echtzeit-Rundfunk

Laravel unterstützt mehrere Broadcast -Treiber (Redis, Pusher, Soketi). Pusher ist einer der am einfachsten zu errichtenden Anfänger.

Konfigurieren Sie Rundfunk

In .env , set:

 Broadcast_driver = Pusher
Pusher_app_id = your_app_id
Pusher_app_key = your_app_key
Pusher_app_secret = your_app_secret
Pusher_app_cluster = mt1

Stellen Sie in config/broadcasting.php sicher, dass die Pusher -Einstellungen korrekt sind.

Rundfunk aktivieren

Überzeugen Sie diese Linie in bootstrap/app.php :

 App \ Providers \ BroadcastServiceProvider :: Klasse,

3. Erstellen Sie das Chat -Modell und die Migration

Generieren Sie ein Message :

 PHP Artisan Make: Model Message -m

In der Migrationsdatei:

 Schema :: Create ('Nachrichten', Funktion (Blueprint $ Tabelle) {
    $ table-> id ();
    $ table-> unsignedBigInteger ('user_id');
    $ table-> text ('meldung');
    $ table-> timestemps ();

    $ table-> fremd ('user_id')-> referenzen ('id')-> on ('user')-> ondelete ('kaskade');
});

Migration ausführen:

 PHP Artisan migrieren

4. Authentifizierung einrichten

Verwenden Sie die integrierte Authentifizierung von Laravel:

 PHP Artisan Make: Auth

Für Laravel 8 müssen Sie möglicherweise laravel/ui verwenden:

 Komponist benötigt Laravel/UI
PHP Artisan UI Vue --Auth
NPM Run Dev

5. Erstellen Sie eine Broadcast -Veranstaltung

Erstellen Sie eine neue Veranstaltung:

 PHP Artisan Make: Event Messageent

app/Events/MessageSent.php bearbeiten:

 <? Php

Namespace App \ Ereignisse;

Verwenden Sie Illuminate \ Broadcasting \ Channel;
Verwenden Sie Illuminate \ Broadcasting \ Interactswithsockets;
Verwenden Sie Illuminate \ Broadcasting \ Presencechannel;
Verwenden Sie Illuminate \ Broadcasting \ privatechannel;
Verwenden Sie Illuminate \ Contracts \ Broadcasting \ SHODBROADCast;
Verwenden Sie Illuminate \ Foundation \ Events \ Dispatchable;
Verwenden Sie Illuminate \ Queue \ SerializesModels;
Verwenden Sie App \ Models \ Message;

Klassenmeldung implementiert Sollte Breadcast
{
    Verwenden Sie Versand, Interactswithsockets, serializesModels;

    öffentliche $ message;

    Öffentliche Funktion __construct (Nachricht $ message)
    {
        $ this-> message = $ message;
    }

    öffentliche Funktion Broadcaston ()
    {
        Neue Presencechannel zurückgeben (&#39;Chat&#39;);
    }

    öffentliche Funktion BroadcastWith ()
    {
        zurückkehren [
            &#39;id&#39; => $ this-> message-> id,
            &#39;user_id&#39; => $ this-> message-> user_id,
            &#39;meldung&#39; => $ this-> message-> meldung,
            &#39;created_at&#39; => $ this-> message-> erstellt_at,
        ];
    }
}

Mithilfe von PresenceChannel können Sie sehen, wer online ist. Sie können auch PrivateChannel oder Channel je nach Ihren Anforderungen verwenden.

6. Erstellen Sie den Chat -Controller

 Php Artisan Make: Controller Chatcontroller

Fügen Sie Methoden hinzu, um Nachrichten abzurufen und eine Nachricht zu senden:

 Verwenden Sie App \ Models \ Message;
Verwenden Sie App \ Ereignisse \ messagesent;

öffentliche Funktionen FetchMessages ()
{
    Rückgabenachricht :: mit ('user')-> last ()-> limit (100)-> get ()-> reverse ();
}

Öffentliche Funktion sendMessage (Anfrage $ Anfrage)
{
    $ message = auth ()-> user ()-> message ()-> create ([
        'meldung' => $ request-> meldung
    ]);

    Broadcast (New Message ($ message))-> toothers ();

    return ['Status' => 'Nachricht gesendet!'];
}

Fügen Sie die Routen in routes/web.php hinzu:

 Verwenden Sie App \ http \ Controller \ ChatController;

Route :: Middleware (['Auth'])-> Gruppe (function () {
    Route :: get ('/chat', function () {
        Rückgabeansicht ('Chat');
    });
    Route :: get ('/message', [chatController :: class, 'fetchMessages']);
    Route :: post ('/messages', [chatController :: class, 'sendMessage']);
});

7. Bauen Sie die Frontend (Blade oder Vue)

Erstellen Sie einen einfachen chat.blade.php :

 <div id = "App">
    <ul id = "message">
        <li v-für = "Nachricht in Nachrichten">
            <strong>@{{message.user.name}}: </strong>
            @{{message.message}}
        </li>
    </ul>

    <Eingabe
        V-Model = "NewMessage"
        @keyup.enter = "sendMessage"
        Placeholder = "Geben Sie eine Nachricht ein ..."
        Typ = "Text"
    >
</div>

<script src = "{{asset (&#39;js/app.js&#39;)}}"> </script>

Initialisieren Sie Laravel -Echo in resources/js/bootstrap.js oder app.js :

 Import echo von 'laravel-echo';

window.pusher = required ('pusher-js');

window.echo = new echo ({{{
    Sender: 'Pusher',
    Schlüssel: process.env.mix_pusher_app_key,
    Cluster: process.env.mix_pusher_app_cluster,
    forcetls: wahr,
    Authendpoint: '/Broadcasting/Auth',,
});

Stellen Sie sicher, dass Sie den Pusher -Schlüssel in .env offenlegen:

 Mix_pusher_app_key = "$ {pusher_app_key}"
Mix_pusher_app_cluster = "$ {pusher_app_cluster}"

Dann in Ihrer Vue/JS -Logik:

 const app = new Vue ({{{
    EL: '#App',
    Daten: {
        Nachrichten: [],
        NewMessage: ''
    },
    montiert () {
        this.fetchMessages ();

        window.echo.join ('chat')
            .here ((Benutzer) => {
                console.log ('Benutzer online:', Benutzer);
            })
            .Listen ('messagent', (e) => {
                this.messages.push (e.message);
            });
    },
    Methoden: {
        fetchMessages () {
            axios.get ('/message'). Dann (response => {
                this.messages = response.data;
            });
        },
        Nachricht senden() {
            axios.post ('/message', {message: this.newMessage})
                .then (response => {
                    this.newmessage = '';
                });
        }
    }
});

8. Rennen und testen

Vermögenswerte kompilieren:

 NPM Run Dev

Starten Sie den Laravel Development Server:

 PHP Artisan Serve

Öffnen Sie zwei Browserfenster, melden Sie sich als verschiedene Benutzer an und testen Sie Echtzeit-Nachrichten.

Letzte Notizen

• Sichern Sie sich zur Produktion mit Authentifizierung.
• Berücksichtigen Sie die Rate -Beschränkung beim Senden von Nachrichten.
• Verwenden Sie PresenceChannel , um Online-Benutzer oder PrivateChannel für 1-zu-1-Chats anzuzeigen.
• Für selbst gehostete WebSocket-Server sollten Sie Soketi anstelle von Pusher verwenden.

Das Erstellen einer Echtzeit-Chat-App in Laravel ist nicht übermäßig komplex, wenn Sie den Fluss verstehen:
Der Benutzer sendet eine Nachricht → Controller speichert es → Ereignisübertragung IT → Echo hört und aktualisiert die Benutzeroberfläche.

Mit Laravel Echo und Pusher wird der größte Teil der harten Arbeit abstrahiert, sodass Sie sich auf UI und Benutzererfahrung konzentrieren können.

Grundsätzlich ist das es-Sie haben einen arbeitenden Echtzeit-Chat.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Echtzeit-Chat-Anwendung mit Laravel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!