← บล็อก

เพิ่ม WebSocket แบบเรียลไทม์ด้วย Claude Code ในสิบนาที

· Hibira

เชื่อม Claude Code กับเซิร์ฟเวอร์ MCP ของ Hibira แล้วให้มันสร้างแอป กรอก .env เชื่อม pusher-js และยืนยันว่าอีเวนต์แรกมาถึงจริง

การเพิ่มเรียลไทม์ให้แอปส่วนใหญ่เป็นงานเชื่อมท่อ: สร้างข้อมูลรับรอง ใส่ลงในไฟล์ env ที่ถูกต้อง ตั้งค่าไลบรารีไคลเอนต์ ยืนยันสิทธิ์ช่องส่วนตัว แล้วตรวจสอบว่าอีเวนต์มาถึงจริง นี่คืองานที่เอเจนต์เขียนโค้ด AI ทำได้ดี ตราบใดที่เข้าถึงบริการได้ เซิร์ฟเวอร์ MCP ของ Hibira ช่วยให้เข้าถึงได้

บทความนี้ใช้ Claude Code ส่วน Cursor, VS Code, Claude และ ChatGPT ใช้วิธีเดียวกัน หน้าเซิร์ฟเวอร์ MCP มีวิธีตั้งค่าของแต่ละตัว

เอเจนต์ทำอะไรได้บ้าง

ผ่าน Model Context Protocol Hibira มีเครื่องมือเก้ารายการ เอเจนต์อ่านแพ็กเกจและแอปของคุณ สร้างและแก้ไขแอป อ่านการใช้งาน เผยแพร่อีเวนต์ทดสอบ เฝ้าดูคอนโซลดีบัก และดึงคู่มือการเชื่อมต่อสำหรับเฟรมเวิร์กของคุณพร้อม ID และ key ของแอปที่กรอกไว้แล้วได้ เอเจนต์ลบแอปหรือเปลี่ยน secret ไม่ได้ และไม่เห็น secret ของแอปที่มีอยู่เลย

ขั้นตอนที่ 1: เพิ่มเซิร์ฟเวอร์

คุณต้องมีบัญชี Hibira แพ็กเกจฟรี ก็เพียงพอ ในโฟลเดอร์โปรเจกต์ ให้รัน:

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

ครั้งแรกที่ Claude Code ใช้เซิร์ฟเวอร์ จะเปิดหน้า Hibira ในเบราว์เซอร์ของคุณ ลงชื่อเข้าใช้ เลือก อ่านอย่างเดียว หรือ อ่านและเขียน แล้วอนุมัติ หากหน้าไม่เปิดเอง ให้รัน /mcp ใน Claude Code แล้วเลือกยืนยันตัวตนกับเซิร์ฟเวอร์ hibira การตั้งค่าแอปใหม่ต้องใช้สิทธิ์เขียน

ขั้นตอนที่ 2: ขอสิ่งที่คุณต้องการ

ระบุสแตกและที่ที่จะรันให้ชัดเจน สำหรับแอป Laravel ที่มีฟรอนต์เอนด์ Vite:

เพิ่ม Hibira realtime ให้แอป Laravel นี้ สร้างแอปชื่อ "shop-dev" ที่อนุญาต http://localhost:5173 ใส่ key ไว้ใน .env ตั้งค่า Laravel Echo และบรอดแคสต์ OrderShipped บนช่องส่วนตัว orders

สิ่งที่เกิดขึ้นต่อจากนี้เป็นแผนของเอเจนต์เอง แต่โดยมากจะเป็นแบบนี้:

  1. get_account เพื่อดูแพ็กเกจและโฮสต์ WebSocket
  2. create_app พร้อมชื่อและ origin ที่อนุญาต secret จะส่งกลับมาครั้งเดียว และเครื่องมือจะบอกให้เอเจนต์เขียนลงใน .env ที่ git ไม่ติดตามทันที
  3. get_integration_guide สำหรับ laravel ซึ่งส่งคืนการตั้งค่า Echo, key ใน .env และขั้นตอนสำหรับช่องส่วนตัว พร้อมค่าของคุณที่กรอกไว้แล้ว
  4. แก้ไข .env, config/broadcasting.php, resources/js/echo.js และ routes/channels.php และเพิ่มอีเวนต์บรอดแคสต์ใหม่

ตรวจดู diff เหมือนการเปลี่ยนแปลงอื่นๆ การแก้ไขเป็น Laravel ธรรมดา หลังจากนั้นไม่มีส่วนใดในโค้ดของคุณที่ต้องพึ่งเอเจนต์

ขั้นตอนที่ 3: พิสูจน์ว่าอีเวนต์มาถึง

นี่คือจุดที่คอนโซลดีบักแสดงคุณค่า ให้ถามว่า:

เปิดแอปในเบราว์เซอร์ แล้วส่งอีเวนต์ทดสอบ OrderShipped ไปที่ private-orders.1 และบอกฉันว่ามีผู้สมัครรับข้อมูลได้รับหรือไม่

เอเจนต์จะเรียก send_test_event ซึ่งเผยแพร่แบบเดียวกับเซิร์ฟเวอร์ของคุณ และ watch_debug_events ซึ่งฟังคอนโซลดีบักของแอปนานสูงสุด 30 วินาที และรายงานการเชื่อมต่อ การสมัครรับข้อมูล และข้อความ หากไม่มีใครสมัครรับข้อมูล เอเจนต์ก็จะเห็นเช่นกัน ซึ่งมักชี้ไปที่ endpoint การยืนยันสิทธิ์หรือ origin ที่อนุญาต

ในแพ็กเกจ Free คอนโซลดีบักแสดงการเชื่อมต่อ การสมัครรับข้อมูล และข้อความที่เผยแพร่ แพ็กเกจแบบชำระเงินเพิ่มอีเวนต์ฝั่งไคลเอนต์ webhook และข้อผิดพลาด

คำถามในการใช้งานประจำวัน

เมื่อเชื่อมต่อแล้ว เซิร์ฟเวอร์มีประโยชน์มากกว่าการตั้งค่า:

  • "แอปของฉันใกล้ถึงขีดจำกัดข้อความรายวันแค่ไหนแล้ว?" ใช้ get_usage
  • "ทำไมเบราว์เซอร์บน staging.example.com ถูกปฏิเสธ?" ใช้ get_app อ่าน origin ที่อนุญาต และ update_app แก้ไขหากคุณเห็นด้วย
  • "เปิดอีเวนต์ฝั่งไคลเอนต์ให้ shop-dev เพื่อให้สถานะกำลังพิมพ์ทำงาน" คือการเรียก update_app ครั้งเดียว

ใช้อย่างปลอดภัย

  • ใช้อ่านอย่างเดียวเมื่อทำได้ ให้สิทธิ์อ่านและเขียนระหว่างตั้งค่า และใช้อ่านอย่างเดียวสำหรับคำถามประจำวัน
  • โทเค็นสำหรับเอเจนต์ที่ไม่มีเบราว์เซอร์ งาน CI และเอเจนต์ระยะไกลใช้โทเค็นการเข้าถึงส่วนบุคคลแทนการลงชื่อเข้าใช้ได้ สร้างโทเค็นในหน้าเอเจนต์ AI จำกัดไว้ที่แอปเดียว และกำหนดวันหมดอายุ:
claude mcp add --transport http hibira https://hibira.io/mcp \
  --header "Authorization: Bearer hkb_pat_..."
  • เพิกถอนได้ทุกเมื่อ หน้าเอเจนต์ AI แสดงทุกเอเจนต์และโทเค็นที่เชื่อมต่อ การเพิกถอนมีผลทันที
  • อีเวนต์ทดสอบเป็นข้อความจริง นับรวมในขีดจำกัดรายวันของแพ็กเกจเหมือนการเผยแพร่อื่น และเซิร์ฟเวอร์อนุญาตเพียงไม่กี่ครั้งต่อวินาทีต่อบัญชี

ลองใช้

สมัครแพ็กเกจฟรี เพิ่มเซิร์ฟเวอร์ แล้วขอให้เอเจนต์เชื่อมเฟรมเวิร์กที่คุณใช้ หากติดขัด คู่มือการเชื่อมต่อ แสดงการตั้งค่าเดียวกันแบบทำด้วยมือ