เริ่มต้นใช้งานด่วน (Quick Start)
คู่มือนี้จะพานักพัฒนาเริ่มต้นสร้างและเชื่อมต่อระบบ Real-time กับ RawPush ให้สำเร็จภายใน 5 นาที โดยเราจะทดลองรับส่งข้อความง่ายๆ กัน
ขั้นตอนที่ 1: สร้าง Project และเอา API Keys
- เข้าสู่ระบบ RawPush Dashboard
- กดปุ่ม "Create Project"
- ตั้งชื่อโปรเจกต์ เช่น
MyProject-DevหรือIoT-Monitoring - เมื่อสร้างเสร็จ คุณจะได้กุญแจสำคัญ 2 ดอก (โปรดเก็บไว้ความลับ):
Public Key(pk_...) : สำหรับฝั่ง Frontend / ClientSecret Key(sk_...) : สำหรับฝั่ง Backend ของคุณ (ห้ามเปิดเผย)
ขั้นตอนที่ 2: สร้าง Token สำหรับการเชื่อมต่อ (HMAC)
เพื่อความปลอดภัยสูงสุด ระบบ RawPush จะไม่อนุญาตให้เชื่อมต่อโดยไม่มีลายเซ็นรับรอง (Signature) จาก Secret Key ของคุณ สร้างไฟล์ generateToken.js และรันด้วย Node.js เพื่อสร้าง Token ชั่วคราว:
// generateToken.js
const crypto = require('crypto');
const secretKey = 'sk_your_secret_key_here'; // ใส่ Secret Key
const publicKey = 'pk_your_public_key_here'; // ใส่ Public Key
const tokenPayload = {
v: "v1",
purpose: "ws-auth",
sub: "user_test_01",
aud: "websocket",
iat: Date.now(),
exp: Date.now() + (60 * 60 * 1000), // หมดอายุใน 1 ชั่วโมง
jti: crypto.randomUUID()
};
// นำข้อมูลมาต่อกันด้วย \n
const payloadString = `${tokenPayload.v}\n${tokenPayload.purpose}\n${tokenPayload.sub}\n${tokenPayload.aud}\n${tokenPayload.iat}\n${tokenPayload.exp}\n${tokenPayload.jti}`;
// สร้างลายเซ็น
const signature = crypto.createHmac('sha256', secretKey)
.update(payloadString)
.digest('hex');
console.log("นำค่านี้ไปใช้ในฝั่ง Client:");
console.log(JSON.stringify({ token: tokenPayload, signature }, null, 2));รันคำสั่ง node generateToken.js และเก็บผลลัพธ์ไว้ใช้เชื่อมต่อในขั้นตอนถัดไป
ขั้นตอนที่ 3: เขียนโค้ดฝั่ง Client (HTML/JS)
สร้างไฟล์ index.html เปล่าๆ แล้วคัดลอกโค้ดด้านล่างไปวาง (เปลี่ยนค่า Auth ข้อมูลที่ได้จาก Step 2 มาใส่ให้ครบ):
<!DOCTYPE html>
<html>
<head>
<title>RawPush Quickstart</title>
</head>
<body>
<h1>RawPush Test</h1>
<div id="messages"></div>
<script>
// 1. นำผลลัพธ์จาก generateToken.js มาวางตรงนี้
const publicKey = 'pk_your_public_key_here';
const authData = {
token: { /* วาง token จาก Node.js */ },
signature: "วาง signature จาก Node.js"
};
// 2. เชื่อมต่อ WebSocket
const ws = new WebSocket(`wss://api.rawpush.com/ws?app_key=${publicKey}`);
ws.onopen = () => {
console.log('✅ เชื่อมต่อ WebSocket สำเร็จ! กำลังส่ง Auth...');
// 3. ยืนยันตัวตน (Auth) ทันทีที่เชื่อมต่อติดภายใน 10 วินาที
ws.send(JSON.stringify({
cmd: 'auth',
token: authData.token,
signature: authData.signature
}));
};
ws.onmessage = (event) => {
const msg = JSON.parse(event.data);
console.log('📩 ได้รับข้อความ:', msg);
// เมื่อยืนยันตัวตนผ่าน ระบบจะตอบกลับ type: reply + status: ok
if (msg.type === 'reply' && msg.status === 'ok' && msg.data?.session_id) {
ws.send(JSON.stringify({
"cmd": "subscribe",
"channel": "updates:feed"
}));
}
// นำข้อความที่ Server บอร์ดแคสต์มาแสดงผลบนหน้าเว็บ
if (msg.type === 'event' && msg.event === 'data.info') {
const div = document.createElement('div');
div.innerText = msg.data.text;
document.getElementById('messages').appendChild(div);
}
};
</script>
</body>
</html>ขั้นตอนที่ 4: ส่งข้อมูลเข้า Server
💡 ลองนำโค้ดใน **ขั้นตอนที่ 2** ไปรันเพื่อยิง Event แล้วดูข้อความที่หน้าต่าง Console สิ!
Serverเปิด Terminal ขึ้นมา แล้วทดลองยิง REST API แบบง่ายๆ (อย่าลืมเปลี่ยน YOUR_SECRET_KEY) ข้อความนี้จะส่งทะลุไปโผล่บนหน้าจอเว็บที่คุณเปิดไว้ในขั้นตอนที่ 3 ทันที!
TIP
คุณสามารถเปิดไฟล์ HTML ทิ้งไว้หลายๆ หน้าต่าง เพื่อดูการทำงานของ Real-time Broadcast ได้
curl -X POST https://api.rawpush.com/api/v1/publish \
-H "X-Api-Key: sk_your_secret_key" \
-H "Content-Type: application/json" \
-d '{
"channel": "updates:feed",
"event": "data.info",
"data": { "text": "สวัสดี! นี่คือข้อความจาก RawPush" }
}'🎉 ยินดีด้วย! คุณสามารถส่งและรับข้อมูล Real-time สำเร็จแล้ว ดูวิธีการเชื่อมต่อฉบับเต็มและตั้งค่าความปลอดภัยต่อในบทถัดไป