Laravelを使って簡単なチャットルームを作成する方法

Laravel は、Web アプリケーションの開発を迅速かつ簡単にするさまざまなツールと機能を提供する人気のある PHP フレームワークです。便利なアプリケーションの 1 つは、オンライン チャット ルームです。この記事では、Laravelを使った簡単なチャットルームの作成方法を解説します。

環境セットアップ

開始する前に、コンピューターに PHP、Laravel、Composer、および Web サーバーがインストールされていることを確認してください。これらのソフトウェアをまだお持ちでない場合は、まずインストールする必要があります。 LaravelとComposerのインストール方法は公式ドキュメントに記載されています。

プロジェクトの作成

まず、Laravel プロジェクトを作成する必要があります。ターミナルを開き、その中に新しいディレクトリを作成し、次のコマンドを使用して新しいプロジェクトを作成します。

laravel new chatroom

これにより、chatroom という名前の新しい Laravel プロジェクトが作成されます。次に、そのディレクトリに移動して、次のコマンドを実行します。

php artisan serve

このコマンドは、組み込み Web サーバーを起動し、ローカルホストのポート 8000 でサービスを提供します。

モデルとデータベースの作成

コードを書き始める前に、チャット記録を保存するデータベース テーブルを作成する必要があります。これを行うには、モデルと移行を作成する必要があります。

次のコマンドを実行してモデルと移行を作成します:

php artisan make:model Message -m

上記のコマンドは、Message という名前のモデルと create_messages_table という名前の移行を作成します。移行ファイルを編集してデータテーブルを作成します。移行ファイルでは、メッセージの構造を定義する必要があります。以下に例を示します。

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

この移行では、ID、作成者、メッセージ、およびタイムスタンプのフィールドを含むメッセージ テーブルが作成されます。次に、次のコマンドを実行して移行を実行します。

php artisan migrate

コントローラーとビューの作成

チャット ルームのコントローラーとビューを作成する必要があります。 Laravel には、美しい Web ページを簡単に作成できる非常に強力な Blade テンプレート エンジンが付属しています。これを行うには、コントローラーといくつかのビューを作成する必要があります。

次のコマンドを実行してコントローラーを作成します:

php artisan make:controller ChatController

これにより、ChatController という名前のコントローラーが作成されます。次に、コントローラーを編集して、チャット ルーム ページのロジックを処理するコードを追加します。基本的な例を次に示します。

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

このコントローラには 3 つのメソッドがあります。最初のメソッド Index() は、チャット ルーム ページのビューを返すために使用されます。 2 番目のメソッド store() は、メッセージをデータベースに保存するために使用されます。 3 番目のメソッドmessages()は、すべてのメッセージの JSON 応答を返すために使用されます。

次に、ビューを作成する必要があります。 resource/views ディレクトリに新しいディレクトリ チャットを作成し、その中にindex.blade.php という名前のファイルを作成します。このファイルには、ユーザーがメッセージを送信できるようにするだけでなく、以下のすべてのメッセージを表示できるようにするフォームを追加する必要があります。以下に例を示します。

@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

ビューは、フォームとメッセージ リストの 2 つの部分で構成されます。このフォームでは、ユーザーが自分の名前と送信するメッセージを入力できます。メッセージ リストには、チャット ルームに以前に送信されたすべてのメッセージが表示されます。

完了

これで、メッセージを保存できるデータベース テーブル、すべてのメッセージを表示できるビュー、新しいメッセージを受け入れるコントローラー メソッドを含む、基本的なチャット ルーム アプリケーションが正常に作成されました。それらをデータベースに保存します。これで、チャット ルームに入るには、Web ブラウザで http://localhost:8000/chat にアクセスするだけで済みます。

以上がLaravelを使って簡単なチャットルームを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。