🚀 Hướng Dẫn Xây Dựng Ứng Dụng Chat

Hướng dẫn chi tiết để thiết lập và chạy ứng dụng chat React của bạn với xác thực Clerk và Stream Chat. Trong bài viết này, chúng ta sẽ đi qua từng bước cần thiết để tạo ra một ứng dụng chat bảo mật, thời gian thực, phù hợp cho các nhà phát triển Việt Nam.

📋 Yêu Cầu Trước Khi Bắt Đầu

Trước khi bắt đầu, hãy đảm bảo bạn đã có:

• Node.js (phiên bản 14 trở lên) cài đặt trên máy tính của bạn
• Trình quản lý gói npm hoặc yarn
• Một trình soạn thảo mã (khuyến nghị sử dụng VS Code)
• Kiến thức cơ bản về React

🏗️ Cấu Trúc Dự Án

Dự án của bạn nên có cấu trúc như sau:

my-chat-app/
├── src/
│   ├── App.jsx
│   ├── appli.css
│   └── main.jsx
├── .env
├── package.json
└── README.md

🔧 Bước 1: Khởi Tạo Dự Án React

1. Tạo một dự án React mới bằng Vite:

   npm create vite@latest my-chat-app -- --template react
   cd my-chat-app

2. Cài đặt các phụ thuộc cần thiết:

   npm install @clerk/clerk-react stream-chat stream-chat-react

🔑 Bước 2: Thiết Lập Xác Thực (Clerk)

Tạo Tài Khoản Clerk

1. Truy cập clerk.com và đăng ký một tài khoản miễn phí
2. Tạo một ứng dụng mới
3. Sao chép Publishable Key từ bảng điều khiển Clerk

Cấu Hình Clerk trong Ứng Dụng của Bạn

1. Bọc thành phần App chính của bạn bằng ClerkProvider trong src/main.jsx:

   import React from 'react'
   import ReactDOM from 'react-dom/client'
   import { ClerkProvider } from '@clerk/clerk-react'
   import App from './App.jsx'

   const CLERK_PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

   ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>
       <ClerkProvider publishableKey={CLERK_PUBLISHABLE_KEY}>
         <App />
       </ClerkProvider>
     </React.StrictMode>,
   )

💬 Bước 3: Thiết Lập Chat (Stream)

Tạo Tài Khoản Stream

1. Truy cập getstream.io và đăng ký một tài khoản miễn phí
2. Tạo một ứng dụng Chat mới
3. Ghi lại API Key từ bảng điều khiển

Tạo Token Người Dùng Thủ Công

Stream yêu cầu token người dùng để xác thực. Do mã của bạn đã xử lý hai người dùng cụ thể (alice và bob dựa trên email), bạn sẽ cần tạo token cho các ID người dùng này.

Sử Dụng Trình Tạo JWT của Stream

Bạn có thể tạo một token thủ công bằng cách sử dụng trình tạo JWT từ tài liệu của Stream.

1. Truy cập Trình Tạo Token của Stream:

   • Truy cập: https://getstream.io/chat/docs/react/token_generator/

2. Tạo token cho "alice":

   • Nhập Secret Key của bạn vào trường "Your Secret"
   • Nhập alice vào trường "User ID"
   • Để "Set Expiration?" không được chọn cho các token không hết hạn
   • Nhấn tạo để lấy token của Alice

3. Tạo token cho "bob":

   • Giữ nguyên Secret Key của Stream
   • Thay đổi User ID thành bob
   • Nhấn tạo để lấy token của Bob

4. Sao chép cả hai token - bạn sẽ sử dụng chúng trong các biến môi trường của bạn

Tại Sao Lại Là Những ID Người Dùng Cụ Thể Này?

Mã React của bạn xác định người dùng dựa trên email:

const isAlice = user.primaryEmailAddress?.emailAddress === "alice@example.com";
const streamUserId = isAlice ? STREAM_USER_ID_ALICE : STREAM_USER_ID_BOB;

• Nếu email của người dùng đã đăng nhập là alice@example.com, nó sẽ sử dụng ID người dùng "alice"
• Đối với bất kỳ email nào khác, nó sẽ sử dụng ID người dùng "bob"

Vì vậy, bạn cần token cụ thể cho:

• User ID: alice
• User ID: bob

🔐 Bước 4: Biến Môi Trường

Tạo một tệp .env trong thư mục gốc của dự án với các biến sau:

VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key_here
VITE_STREAM_API_KEY=your_stream_api_key_here
VITE_STREAM_USER_ID_ALICE=alice
VITE_STREAM_USER_TOKEN_ALICE=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiYWxpY2UifQ.generated_token_here
VITE_STREAM_USER_ID_BOB=bob
VITE_STREAM_USER_TOKEN_BOB=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiYm9iIn0.generated_token_here

Thay thế các giá trị token bằng các token mà bạn đã tạo bằng Secret Key của Stream.

⚠️ Lưu Ý An Ninh Quan Trọng:

• Không bao giờ cam kết tệp .env của bạn vào hệ thống kiểm soát phiên bản
• Thêm .env vào tệp .gitignore
• Giữ Secret Key của Stream an toàn và không bao giờ công khai nó trong mã phía khách hàng
• Các token được hiển thị ở trên chỉ là ví dụ - hãy sử dụng các token bạn đã tạo của riêng mình
• Thay thế tất cả các giá trị ví dụ bằng thông tin xác thực thực tế của bạn

📁 Bước 5: Thêm Tệp Ứng Dụng Của Bạn

1. Tạo src/App.jsx

Sao chép mã thành phần React đã cung cấp vào tệp này.

2. Tạo src/appli.css

Sao chép các kiểu CSS đã cung cấp vào tệp này.

🚀 Bước 6: Chạy Ứng Dụng của Bạn

1. Khởi động máy chủ phát triển:

   npm run dev

2. Mở trình duyệt của bạn và truy cập vào:

   http://localhost:5173

🎯 Cách Hoạt Động

Quy Trình Xác Thực

1. Trạng Thái Đăng Xuất: Người dùng thấy một màn hình chào mừng với nút "Đăng Nhập"
2. Quy Trình Đăng Nhập: Nhấp vào nút mở ra hộp thoại xác thực của Clerk
3. Trạng Thái Đã Đăng Nhập: Người dùng đã xác thực có thể truy cập giao diện chat

Hệ Thống Chat

1. Phát Hiện Người Dùng: Ứng dụng xác định xem người dùng đã đăng nhập là Alice hay Bob dựa trên email của họ
2. Kết Nối Stream: Kết nối với Stream Chat bằng thông tin xác thực người dùng phù hợp
3. Nhắn Tin Thời Gian Thực: Người dùng có thể gửi và nhận tin nhắn trong thời gian thực

👥 Kiểm Tra Ứng Dụng của Bạn

Để kiểm tra chức năng chat:

1. Thiết lập người dùng thử nghiệm trong Clerk:

   • Tạo hai tài khoản thử nghiệm với email: alice@example.com và bất kỳ email nào khác cho Bob

2. Kiểm tra chat:

   • Đăng nhập với tư cách Alice trong một trình duyệt/tab
   • Đăng nhập với tư cách Bob trong một trình duyệt/tab khác (chế độ ẩn danh)
   • Bắt đầu trò chuyện giữa hai người dùng

🔍 Khắc Phục Sự Cố

Các Vấn Đề Thường Gặp và Giải Pháp

1. Các Biến Môi Trường Không Tải

• Đảm bảo tệp .env của bạn nằm trong thư mục gốc của dự án
• Khởi động lại máy chủ phát triển của bạn sau khi thêm các biến môi trường
• Kiểm tra rằng tên biến bắt đầu bằng VITE_

2. Xác Thực Clerk Không Hoạt Động

• Xác minh rằng khóa publishable của bạn là chính xác
• Kiểm tra rằng ClerkProvider đang bao bọc đúng thành phần App của bạn

3. Vấn Đề Kết Nối Stream Chat

• Đảm bảo API Key của bạn là hợp lệ
• Xác minh rằng token người dùng được tạo đúng cho Alice và Bob
• Kiểm tra console của trình duyệt để tìm lỗi kết nối

🔐 Ghi Chú An Ninh

Cho Sản Xuất:

• Không bao giờ công khai token người dùng trong mã phía khách hàng
• Triển khai tạo token phía máy chủ
• Sử dụng biến môi trường cho tất cả dữ liệu nhạy cảm

Giới Hạn Của Cài Đặt Hiện Tại:

• Đây là cài đặt phát triển với các token người dùng mã hóa cứng
• Phù hợp cho việc học và thử nghiệm
• Không được khuyến nghị cho sử dụng sản xuất

📚 Bước Tiếp Theo

Khi ứng dụng chat cơ bản của bạn hoạt động, hãy xem xét:

1. Cải Thiện Xác Thực:
   • Tạo người dùng động
   • Tạo token phía máy chủ
   • Kiểm soát quyền truy cập dựa trên vai trò

Chúc Bạn Chat Vui Vẻ! 🎉