So erstellen Sie mit Laravel einen einfachen Chatroom

Laravel ist ein beliebtes PHP-Framework, das verschiedene Tools und Funktionen bereitstellt, die die Entwicklung von Webanwendungen schnell und einfach machen. Eine nützliche Anwendung ist ein Online-Chatroom. In diesem Artikel erklären wir, wie man mit Laravel einen einfachen Chatroom erstellt.

Umgebungseinrichtung

Bevor Sie beginnen, stellen Sie bitte sicher, dass auf Ihrem Computer PHP, Laravel, Composer und ein Webserver installiert sind. Wenn Sie diese Software noch nicht haben, müssen Sie sie zuerst installieren. Wie Sie Laravel und Composer installieren, finden Sie in der offiziellen Dokumentation.

Projekt erstellen

Zuerst müssen wir ein Laravel-Projekt erstellen. Öffnen Sie ein Terminal, erstellen Sie darin ein neues Verzeichnis und erstellen Sie ein neues Projekt mit dem folgenden Befehl:

laravel new chatroom

Dadurch wird ein neues Laravel-Projekt namens Chatroom erstellt. Gehen Sie nun in dieses Verzeichnis und führen Sie den folgenden Befehl aus:

php artisan serve

Dieser Befehl startet den integrierten Webserver und stellt ihn auf Port 8000 auf localhost bereit.

Modell und Datenbank erstellen

Bevor wir mit dem Schreiben von Code beginnen, müssen wir eine Datenbanktabelle zum Speichern von Chat-Datensätzen erstellen. Dazu müssen wir ein Modell erstellen und migrieren.

Führen Sie den folgenden Befehl aus, um das Modell und die Migration zu erstellen:

php artisan make:model Message -m

Der obige Befehl erstellt ein Modell mit dem Namen „Message“ und eine Migration mit dem Namen „create_messages_table“. Erstellen Sie die Datentabelle, indem Sie die Migrationsdatei bearbeiten. In der Migrationsdatei müssen wir die Struktur der Nachricht definieren. Hier ist ein Beispiel:

public function up()
{
    Schema::create('messages', function (Blueprint $table) {
        $table->id();
        $table->string('author');
        $table->string('message');
        $table->timestamps();
    });
}

Diese Migration erstellt eine Nachrichtentabelle mit den Feldern ID, Autor, Nachricht und Zeitstempel. Führen Sie als Nächstes den folgenden Befehl aus, um die Migration auszuführen:

php artisan migrate

Controller und Ansicht erstellen

Wir müssen den Controller und die Ansicht für den Chatroom erstellen. Laravel verfügt über eine sehr leistungsstarke Blade-Vorlagen-Engine, mit der Sie ganz einfach schöne Webseiten erstellen können. Dazu müssen wir einen Controller und einige Ansichten erstellen.

Führen Sie den folgenden Befehl aus, um einen Controller zu erstellen:

php artisan make:controller ChatController

Dadurch wird ein Controller namens ChatController erstellt. Bearbeiten Sie als Nächstes den Controller, um Code hinzuzufügen, der die Logik für die Chatroom-Seite verwaltet. Hier ist ein einfaches Beispiel:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Message;

class ChatController extends Controller
{
    public function index()
    {
        return view('chat.index');
    }

    public function store(Request $request)
    {
        $message = new Message();
        $message->author = $request->input('author');
        $message->message = $request->input('message');
        $message->save();

        return response()->json(['status' => 'success']);
    }

    public function messages()
    {
        $messages = Message::all();

        return response()->json($messages);
    }
}

Dieser Controller verfügt über drei Methoden. Die erste Methode index() wird verwendet, um die Ansicht der Chatroom-Seite zurückzugeben. Die zweite Methode store() wird verwendet, um die Nachricht in der Datenbank zu speichern. Die dritte Methode „messages()“ wird verwendet, um die JSON-Antwort aller Nachrichten zurückzugeben.

Als nächstes müssen wir die Ansicht erstellen. Erstellen Sie ein neues Verzeichnis chat im Verzeichnis resources/views und erstellen Sie darin eine Datei mit dem Namen index.blade.php. In dieser Datei müssen wir ein Formular hinzufügen, damit Benutzer Nachrichten senden und alle Nachrichten unten anzeigen können. Hier ein Beispiel:

@extends('layouts.master')

@section('content')
    <div class="card">
        <div class="card-header">Chat Room</div>

        <div class="card-body">
            <form id="chat-form">
                <div class="form-group">
                    <label for="author">Name:</label>
                    <input type="text" id="author" name="author" class="form-control" required>
                </div>

                <div class="form-group">
                    <label for="message">Message:</label>
                    <textarea id="message" name="message" rows="5" class="form-control" required></textarea>
                </div>

                <button type="submit" class="btn btn-primary">Send</button>
            </form>

            <hr>

            <ul id="messages">
                
            </ul>
        </div>
    </div>

    <script>
        // 使用 jQuery 来处理表单提交事件
        $('#chat-form').submit(function (event) {
            event.preventDefault();

            $.post('/messages', $(this).serialize(), function (data) {
                console.log(data);

                if (data.status === 'success') {
                    $('#chat-form')[0].reset();
                }
            });
        });

        // 从服务器获取消息并添加到列表中
        function getMessagesFromServer() {
            $.get('/messages', function (data) {
                var html = '';

                $.each(data, function (index, message) {
                    html += '<li><strong>' + message.author + '</strong>: ' + message.message + '</li>';
                });

                $('#messages').html(html);
            });
        }

        // 每隔一秒钟从服务器获取消息
        setInterval(function () {
            getMessagesFromServer();
        }, 1000);
    </script>
@endsection

Die Ansicht besteht aus zwei Teilen: dem Formular und der Nachrichtenliste. Das Formular ermöglicht es Benutzern, ihren Namen und eine zu sendende Nachricht einzugeben. In der Nachrichtenliste werden alle zuvor an den Chatroom gesendeten Nachrichten angezeigt.

Fertig

Jetzt haben wir erfolgreich eine grundlegende Chatroom-Anwendung erstellt, die eine Datenbanktabelle enthält, in der Nachrichten gespeichert werden können, eine Ansicht, in der alle Nachrichten angezeigt werden können, und eine Ansicht, in der neue Nachrichten akzeptiert und in Controller-Methoden in der Datenbank gespeichert werden können . Jetzt müssen wir nur noch in einem Webbrowser auf http://localhost:8000/chat zugreifen, um unseren Chatraum zu betreten.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit Laravel einen einfachen Chatroom. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!