Comment créer une salle de discussion simple avec Laravel

Laravel est un framework PHP populaire qui fournit divers outils et fonctionnalités qui rendent le développement d'applications Web rapide et facile. Une application utile est un salon de discussion en ligne. Dans cet article, nous expliquerons comment créer une salle de discussion simple à l'aide de Laravel.

Configuration de l'environnement

Avant de commencer, assurez-vous que PHP, Laravel, Composer et un serveur Web sont installés sur votre ordinateur. Si vous ne disposez pas encore de ces logiciels, vous devrez d'abord les installer. Comment installer Laravel et Composer peut être trouvé dans la documentation officielle.

Créer un projet

Tout d'abord, nous devons créer un projet Laravel. Ouvrez un terminal et créez-y un nouveau répertoire et créez un nouveau projet avec la commande suivante :

laravel new chatroom

Cela créera un nouveau projet Laravel appelé chatroom. Maintenant, allez dans ce répertoire et exécutez la commande suivante :

php artisan serve

Cette commande démarrera le serveur Web intégré et le servira sur le port 8000 sur localhost.

Créer un modèle et une base de données

Avant de commencer à écrire du code, nous devons créer une table de base de données pour stocker les enregistrements de discussion. Pour ce faire, nous devons créer un modèle et une migration.

Exécutez la commande suivante pour créer le modèle et la migration :

php artisan make:model Message -m

La commande ci-dessus créera un modèle nommé Message et une migration nommée create_messages_table. Créez la table de données en modifiant le fichier de migration. Dans le fichier de migration, nous devons définir la structure du message. Voici un exemple :

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

Cette migration crée une table de messages avec les champs identifiant, auteur, message et horodatage. Ensuite, exécutez la commande suivante pour exécuter la migration :

php artisan migrate

Créer un contrôleur et une vue

Nous devons créer le contrôleur et la vue pour la salle de discussion. Laravel est livré avec un moteur de modèles Blade très puissant qui peut facilement créer de belles pages Web. Pour ce faire, nous devons créer un contrôleur et quelques vues.

Exécutez la commande suivante pour créer un contrôleur :

php artisan make:controller ChatController

Cela créera un contrôleur appelé ChatController. Ensuite, modifiez le contrôleur pour ajouter du code permettant de gérer la logique de la page du salon de discussion. Voici un exemple simple :

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);
    }
}

Ce contrôleur dispose de trois méthodes. La première méthode index() est utilisée pour renvoyer la vue de la page du salon de discussion. La deuxième méthode store() est utilisée pour enregistrer le message dans la base de données. La troisième méthode messages() est utilisée pour renvoyer la réponse JSON de tous les messages.

Ensuite, nous devons créer la vue. Créez un nouveau répertoire chat dans le répertoire resources/views et créez-y un fichier nommé index.blade.php. Dans ce fichier, nous devons ajouter un formulaire pour permettre aux utilisateurs d'envoyer des messages, ainsi que d'afficher tous les messages ci-dessous. Voici un exemple :

@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

La vue se compose de deux parties : le formulaire et la liste des messages. Le formulaire permet aux utilisateurs de saisir leur nom et un message à envoyer. La liste des messages affiche tous les messages précédemment envoyés au salon de discussion.

Terminé

Maintenant, nous avons créé avec succès une application de salle de discussion de base qui comprend une table de base de données pouvant enregistrer des messages, une vue pouvant afficher tous les messages et une vue pouvant accepter de nouveaux messages et les enregistrer dans les méthodes du contrôleur dans la base de données. . Désormais, il nous suffit d'accéder à http://localhost:8000/chat dans un navigateur Web pour accéder à notre salle de discussion.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!