Skip to content

การเชื่อมต่อ WebSocket ครั้งแรก (First Connection)

เมื่อโปรเจกต์ของคุณถูกสร้างและมี Public Key (pk_xxx) เรียบร้อยแล้ว ก็ถึงเวลาพา Client (ในที่นี้คือฝั่งที่มี User ต้นทาง เช่น หน้าเว็บไซต์เบราว์เซอร์, แอปมือถือ) มาเชื่อมต่อรับข้อมูลแบบ Real-time (WebSocket) กัน

1. จุดศูนย์กลางการเชื่อมต่อ Endpoint

text
wss://api.rawpush.com/ws

นี่คือ URL หลักของ RawPush คุณแค่เปิด WebSocket connection มาที่นี่ พร้อมแนบ Public Key เพื่อบอกระบบว่า Client นี้อยู่ในโปรเจกต์ไหน

โค้ดตัวอย่างการต่อเบื้องต้น (JavaScript):

javascript
const publicKey = 'pk_your_project_public_key';
const websocketUrl = `wss://api.rawpush.com/ws?app_key=${publicKey}`;

const ws = new WebSocket(websocketUrl);

// callback เมื่อ connect สำเร็จ
ws.onopen = () => {
  console.log('✅ Pipeline connected! (รอการ Authentication)');
};

// callback เมื่อ disconnect
ws.onclose = (event) => {
  console.log(`❌ Disconnected! Code: ${event.code}`);
};

⚠️ คำเตือนเรื่อง 4001 Timeout

เมื่อ ws.onopen ทำงาน แปลว่า WebSocket connect สำเร็จแล้ว แต่ ฝั่ง Server รู้ว่ายังไม่ได้ authenticate หากคุณไม่ส่ง auth command กลับไปภายใน 10 วินาที (Auth Timeout) connection จะถูก close ด้วย code 4001 ทันที

2. ยืนยันตัวตน (Authentication)

หลัง connect สำเร็จใน onopen ให้ส่ง Token ที่ Backend ของคุณ sign ไว้ด้วย HMAC-SHA256 ขึ้นไปทันที:

javascript
ws.onopen = () => {
    
  // 1. นำ Token จาก Backend (ที่ Backend sign ด้วย HMAC)
  const userTokenPayload = {
     v: "v1",
     purpose: "ws-auth",
     sub: "usr_123456",
     aud: "websocket",
     iat: 1718000000000,
     exp: 1718000600000,
     jti: "random_uuid"
  };
  
  // 2. สร้าง Command = "auth" สำหรับการ Login  
  const authPayload = {
    cmd: "auth",
    token: userTokenPayload,
    signature: "signature_from_your_backend" // Signature ที่ Backend สร้างให้
  };
  
  // 3. ส่งไปให้ Server เพื่อ authenticate
  ws.send(JSON.stringify(authPayload));
};

3. รับ Response จาก Server

ทันทีที่ WebSocket connect สำเร็จ RawPush จะส่ง Welcome Message มาให้เลย (ก่อนที่คุณจะส่ง auth ด้วยซ้ำ):

json
{
  "v": 1,
  "type": "system",
  "event": "connection.established",
  "data": {
    "session_id": "conn_01HGW...",
    "project_id": "prj_d93k2...",
    "auth_required": true
  }
}

จากนั้นเมื่อคุณส่ง cmd: "auth" กลับไป ระบบจะตอบกลับ type: "reply" ว่าสำเร็จหรือไม่:

javascript
ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  
  // Welcome message (ก่อน Auth)
  if (msg.type === 'system' && msg.event === 'connection.established') {
       console.log("✅ Connected! รีบส่ง Auth เลย");
       console.log("Session ID:", msg.data.session_id);
       // ... ส่ง auth command ที่นี่
  }
  
  // Auth result (หลังส่ง auth)
  if (msg.type === 'reply' && msg.status === 'ok') {
       console.log("✅ ยืนยันตัวตน (Auth) สำเร็จ!");
       console.log("User ID:", msg.data.user_id);
       // ... สามารถสั่ง subscribe ต่อได้เลย
  }
};

💡 ตัวอย่างการนำไปใช้จริง

สมมติว่าคุณทำแอปพลิเคชันเกี่ยวกับ สถิติ Dashboard, กระดานราคาหุ้น (Ticker), หรือระบบแจ้งเตือนรวม (Global Alerts) คุณสามารถใช้ public: ได้เลย เพราะใครๆ ก็สามารถเข้ามาดูอัปเดตเหล่านั้นได้

Released under the MIT License.