×

Xây dựng hệ thống chat đơn giản với PHP và WebSocket

Avatar of admin
admin 3 Views

Phát triển một hệ thống chat trực tuyến không còn là điều xa lạ trong thời đại công nghệ số hiện nay. Nhờ việc sử dụng PHP và WebSocket, việc xây dựng một hệ thống chat trở nên dễ dàng và hiệu quả hơn bao giờ hết. Dưới đây là hướng dẫn chi tiết giúp bạn thực hiện điều này.

Cài đặt môi trường

Trước khi bắt đầu, bạn cần chuẩn bị một số công cụ và phần mềm cần thiết:

  1. Server Apache: Để chạy mã PHP.
  2. PHP: Phiên bản tối thiểu là PHP 7.0.
  3. Composer: Trình quản lý gói để cài đặt các thư viện PHP cần thiết.
  4. Ratchet: Một thư viện WebSocket dành cho PHP.

Cấu hình Project

Tạo file cấu hình Composer

Trước tiên, bạn cần tạo một file composer.json để cấu hình các thư viện của project:

{
    "require": {
        "cboden/ratchet": "^0.4"
    }
}

Sau đó, chạy lệnh composer install để cài đặt Ratchet.

Tạo Server WebSocket

Tiếp theo, bạn tạo một file server.php để thiết lập máy chủ WebSocket:

<?php
require __DIR__ . '/vendor/autoload.php';

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class Chat implements MessageComponentInterface {
    protected $clients;

    public function __construct() {
        $this->clients = new \SplObjectStorage;
    }

    public function onOpen(ConnectionInterface $conn) {
        $this->clients->attach($conn);
        echo "New connection! ({$conn->resourceId})\n";
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        foreach ($this->clients as $client) {
            if ($from !== $client) {
                $client->send($msg);
            }
        }
    }

    public function onClose(ConnectionInterface $conn) {
        $this->clients->detach($conn);
        echo "Connection {$conn->resourceId} has disconnected\n";
    }

    public function onError(ConnectionInterface $conn, \Exception $e) {
        echo "An error has occurred: {$e->getMessage()}\n";
        $conn->close();
    }
}

use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;

$server = IoServer::factory(
    new HttpServer(
        new WsServer(
            new Chat()
        )
    ),
    8080
);

$server->run();

Chạy server WebSocket bằng lệnh:

php server.php

Tạo giao diện khách hàng

Tạo một file HTML index.html để người dùng có thể truy cập và tương tác với hệ thống chat:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat Room</title>
</head>
<body>
    <div id="chat">
        <div id="messages"></div>
        <input type="text" id="message" />
        <button onclick="sendMessage()">Send</button>
    </div>

    <script>
        var conn = new WebSocket('ws://localhost:8080');
        conn.onopen = function(e) {
            console.log("Connection established!");
        };

        conn.onmessage = function(e) {
            var messages = document.getElementById('messages');
            var message = document.createElement('div');
            message.textContent = e.data;
            messages.appendChild(message);
        };

        function sendMessage() {
            var input = document.getElementById("message");
            conn.send(input.value);
            input.value = '';
        }
    </script>
</body>
</html>

Hoạt động của hệ thống

Khi người dùng truy cập trang web, họ có thể nhập tin nhắn và nhấn nút "Send". Tin nhắn này sẽ được gửi tới máy chủ WebSocket, sau đó máy chủ sẽ chuyển tiếp tin nhắn đó đến tất cả các khách hàng đang kết nối. Tất cả khách hàng sẽ nhận được tin nhắn này và hiển thị nó lên giao diện.

Kết luận

Với sự kết hợp của PHP và WebSocket, bạn có thể dễ dàng xây dựng một hệ thống chat đơn giản nhưng hiệu quả. Bằng cách làm theo các bước trên, bạn sẽ sở hữu một hệ thống chat trực tuyến cơ bản nhưng đầy đủ chức năng, giúp bạn và người dùng giao tiếp một cách nhanh chóng và tiện lợi. Khả năng mở rộng và tuỳ biến của hệ thống này là rất lớn, đáp ứng nhu cầu phát triển của bất kỳ dự án nào.

Comments

Bài viết liên quan