close

Xây dựng Ứng dụng Chat Real-Time với Laravel WebSocket

Ứng dụng Chat Real-Time là một ví dụ tuyệt vời để thấy cách WebSocket có thể thay đổi cách chúng ta xây dựng các ứng dụng tương tác Real-Time. Trong bài viết này, chúng ta sẽ xây dựng một ứng dụng Chat đơn giản bằng Laravel và tích hợp WebSocket sử dụng gói laravel-websockets.

Bắt đầu với Cài đặt và Cấu hình

Cài đặt Package laravel-websockets: Bắt đầu bằng việc cài đặt gói thông qua Composer.

composer require pusher/pusher-php-server

Xuất bản tệp cấu hình: Sau khi cài đặt, xuất bản tệp cấu hình để bạn có thể tùy chỉnh các thiết lập.

php artisan vendor:publish --tag=websockets-config

Migration cơ sở dữ liệu: Tạo bảng cơ sở dữ liệu cho WebSocket.

php artisan migrate

Khởi động máy chủ WebSocket: Bắt đầu máy chủ WebSocket để xử lý các kết nối Real-Time.

php artisan websockets:serve

Xây dựng Giao diện Người dùng

Chúng ta sẽ tạo một giao diện đơn giản để người dùng nhập tin nhắn và hiển thị các tin nhắn.

<!-- resources/views/chat.blade.php -->

<div id="app">
    <div class="chat-container">
        <div class="chat-box">
            <div class="chat-messages">
                <div class="message" v-for="message in messages" :key="message.id">
                    {{ message.user }}: {{ message.content }}
                </div>
            </div>
            <div class="input-box">
                <input v-model="newMessage" @keydown.enter="sendMessage" placeholder="Nhập tin nhắn...">
            </div>
        </div>
    </div>
</div>

Tích hợp WebSocket và Broadcasting

Chúng ta sẽ sử dụng Laravel Broadcasting để tích hợp WebSocket vào ứng dụng.

Cài đặt Pusher: Cài đặt gói pusher/pusher-php-server để sử dụng Pusher làm driver Broadcasting.

composer require pusher/pusher-php-server

Cấu hình Broadcasting: Trong tệp config/broadcasting.php, cấu hình driver và thông tin của Pusher.

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'cluster' => env('PUSHER_APP_CLUSTER'),
        'encrypted' => true,
    ],
],

Tạo sự kiện và phát sóng: Tạo một sự kiện và phát sóng nó khi người dùng gửi tin nhắn.

// app/Events/ChatMessageSent.php

public function broadcastOn()
{
    return new Channel('chat');
}

Kịch bản JavaScript: Sử dụng JavaScript để lắng nghe sự kiện từ máy chủ và cập nhật giao diện người dùng.

// resources/js/app.js

require('./bootstrap');

import Vue from 'vue';
import Chat from './components/Chat.vue';

const app = new Vue({
    el: '#app',
    components: {
        Chat
    }
});

Kết luận

Với việc hoàn thành, bạn đã xây dựng thành công một ứng dụng Chat Real-Time sử dụng WebSocket trong Laravel. Người dùng có thể gửi và nhận tin nhắn một cách trực tiếp và thấy cách WebSocket cung cấp trải nghiệm giao tiếp đáp ứng và tương tác.