← Blog

Thêm WebSocket thời gian thực bằng Claude Code trong mười phút

· Hibira

Kết nối Claude Code với máy chủ MCP của Hibira và để nó tạo ứng dụng, điền .env, nối pusher-js và kiểm chứng sự kiện đầu tiên thực sự đến nơi.

Thêm thời gian thực vào một ứng dụng phần lớn là việc nối ống: tạo thông tin xác thực, đặt chúng vào đúng tệp env, cấu hình thư viện client, xác thực kênh riêng tư, rồi kiểm tra một sự kiện thực sự đến nơi. Đó chính là loại việc mà AI agent lập trình làm tốt, miễn là nó truy cập được dịch vụ. Máy chủ MCP của Hibira cho nó quyền truy cập đó.

Bài viết này dùng Claude Code. Cursor, VS Code, Claude và ChatGPT hoạt động tương tự; trang máy chủ MCP có cách thiết lập cho từng công cụ.

Agent làm được gì

Qua Model Context Protocol, Hibira cung cấp chín công cụ. Agent có thể đọc gói và ứng dụng của bạn, tạo và cập nhật ứng dụng, đọc mức sử dụng, publish một sự kiện thử, theo dõi bảng gỡ lỗi, và lấy hướng dẫn tích hợp cho framework của bạn với ID và key của ứng dụng đã điền sẵn. Nó không thể xóa ứng dụng hay đổi secret, và không bao giờ thấy secret của ứng dụng hiện có.

Bước 1: thêm máy chủ

Bạn cần một tài khoản Hibira; gói miễn phí là đủ. Trong thư mục dự án, chạy:

claude mcp add --transport http hibira https://hibira.io/mcp

Lần đầu Claude Code dùng máy chủ, nó mở một trang Hibira trong trình duyệt. Đăng nhập, chọn chỉ đọc hoặc đọc và ghi, rồi phê duyệt. Nếu trang không tự mở, hãy chạy /mcp trong Claude Code và chọn xác thực máy chủ hibira. Thiết lập ứng dụng mới cần quyền ghi.

Bước 2: yêu cầu điều bạn muốn

Hãy nói rõ stack và nơi bạn sẽ chạy. Với một ứng dụng Laravel có front end Vite:

Thêm Hibira realtime vào ứng dụng Laravel này. Tạo một ứng dụng tên "shop-dev" cho phép http://localhost:5173, đặt các key vào .env, thiết lập Laravel Echo, và broadcast OrderShipped trên kênh riêng tư orders.

Điều xảy ra tiếp theo là kế hoạch riêng của agent, nhưng thường diễn ra như sau:

  1. get_account để xem gói và host WebSocket.
  2. create_app với tên và origin được phép. Secret được trả về một lần, và công cụ bảo agent ghi thẳng vào .env được git bỏ qua.
  3. get_integration_guide cho laravel, trả về cấu hình Echo, các key .env và các bước cho kênh riêng tư, với giá trị của bạn đã điền sẵn.
  4. Sửa .env, config/broadcasting.php, resources/js/echo.js và routes/channels.php, và thêm một sự kiện broadcast mới.

Hãy xem diff như mọi thay đổi khác. Các chỉnh sửa là Laravel thông thường; sau đó mã của bạn không phụ thuộc gì vào agent.

Bước 3: chứng minh sự kiện đến nơi

Đây là lúc bảng gỡ lỗi phát huy tác dụng. Hãy hỏi:

Mở ứng dụng trong trình duyệt, rồi gửi một sự kiện thử OrderShipped tới private-orders.1 và cho tôi biết có người đăng ký nào nhận được không.

Agent gọi send_test_event, publish giống như máy chủ của bạn, và watch_debug_events, lắng nghe bảng gỡ lỗi của ứng dụng tối đa 30 giây và báo cáo kết nối, đăng ký và tin nhắn. Nếu không có ai đăng ký, nó cũng thấy được, và điều đó thường chỉ ra endpoint xác thực hoặc origin được phép.

Với gói Free, bảng gỡ lỗi hiển thị kết nối, đăng ký và tin nhắn đã publish; các gói trả phí thêm sự kiện client, webhook và lỗi.

Câu hỏi hằng ngày

Khi đã kết nối, máy chủ hữu ích không chỉ cho việc thiết lập:

  • "Các ứng dụng của tôi còn cách giới hạn tin nhắn ngày bao xa?" dùng get_usage.
  • "Vì sao trình duyệt trên staging.example.com bị từ chối?" dùng get_app để đọc origin được phép, và update_app để sửa nếu bạn đồng ý.
  • "Bật sự kiện client cho shop-dev để chỉ báo đang gõ hoạt động" là một lệnh gọi update_app.

Giữ an toàn

  • Chỉ đọc khi có thể. Cấp quyền đọc và ghi khi thiết lập, và chỉ đọc cho các câu hỏi hằng ngày.
  • Mã truy cập cho agent không có trình duyệt. Job CI và agent từ xa có thể dùng mã truy cập cá nhân thay vì đăng nhập. Tạo mã trên trang AI agent, giới hạn cho một ứng dụng và đặt ngày hết hạn:
claude mcp add --transport http hibira https://hibira.io/mcp \
  --header "Authorization: Bearer hkb_pat_..."
  • Thu hồi bất cứ lúc nào. Trang AI agent liệt kê mọi agent và mã đã kết nối; thu hồi có hiệu lực ngay lập tức.
  • Sự kiện thử là tin nhắn thật. Chúng được tính vào giới hạn ngày của gói như mọi lần publish khác, và máy chủ chỉ cho phép vài lần mỗi giây cho mỗi tài khoản.

Dùng thử

Đăng ký gói miễn phí, thêm máy chủ, và nhờ agent tích hợp framework bạn dùng. Nếu nó gặp khó, hướng dẫn tích hợp trình bày cùng thiết lập theo cách thủ công.