如何使用Laravel創建一個簡單的聊天室-Laravel-PHP中文網

Laravel是一個流行的PHP框架，它提供了各種工具和功能，使得開發網路應用程式變得快速和簡單。一個很有用的應用程式是線上聊天室。在本文中，我們將介紹如何使用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、author、message和timestamps欄位的訊息表。接下來，執行以下命令來運行遷移：

php artisan migrate

登入後複製

建立控制器和視圖

我們需要為聊天室建立控制器和視圖。 Laravel自備了一個非常強大的Blade模板引擎，可以輕鬆地創建漂亮的Web頁面。為此，我們需要建立一個控制器和一些視圖。

執行下列指令建立控制器：

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

登入後複製

此控制器有三個方法。第一個方法index()用來傳回聊天室頁面的視圖。第二個方法store()用於將訊息儲存到資料庫中。第三個方法messages()用於傳回所有訊息的JSON回應。

接下來，我們需要建立視圖。在resources/views目錄中建立一個新目錄chat，並在其中建立一個名為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

登入後複製

此檢視由兩部分組成：表單和訊息清單。表單允許使用者輸入他們的名稱和要發送的訊息。訊息清單顯示所有先前發送到聊天室的訊息。