WebSocket AI กับ Streaming Response: Content-Type และ Transfer-Encoding ที่ถูกต้อง

การสร้างระบบ AI ที่ตอบสนองแบบ real-time เป็นสิ่งสำคัญมากในยุคปัจจุบัน ไม่ว่าจะเป็นแชทบอทร้านค้าออนไลน์ ระบบค้นหาข้อมูลองค์กร หรือแอปพลิเคชันที่ต้องการ UX ลื่นไหล บทความนี้จะพาคุณเข้าใจ technical detail ที่สำคัญเกี่ยวกับ HTTP headers ที่ถูกต้องสำหรับ AI streaming และวิธีแก้ปัญหาที่พบบ่อย

กรณีศึกษา: ระบบแชทสนับสนุนลูกค้าอีคอมเมิร์ซ

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

ที่ สมัครที่นี่ HolySheep AI ให้บริการ API ที่รองรับ streaming response ด้วยความเร็วตอบกลับต่ำกว่า 50ms ทำให้เหมาะกับงานลักษณะนี้มาก ราคาเริ่มต้นที่ $0.42 ต่อล้าน tokens สำหรับ DeepSeek V3.2 ซึ่งประหยัดมากเมื่อเทียบกับผู้ให้บริการอื่น

Content-Type ที่ถูกต้องสำหรับ AI Streaming

เมื่อส่ง request ไปยัง AI API แบบ streaming ต้องกำหนด Content-Type ใน request header ให้ถูกต้อง และใน response ก็ต้องส่ง Content-Type ที่เหมาะสมกลับมาด้วย

// Request Header - การเรียก streaming API
fetch('https://api.holysheep.ai/v1/chat/completions', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_HOLYSHEEP_API_KEY'
  },
  body: JSON.stringify({
    model: 'gpt-4.1',
    messages: [
      { role: 'user', content: 'แนะนำ laptop สำหรับนักศึกษาสาย IT ราคาไม่เกิน 25000 บาท' }
    ],
    stream: true
  })
})

สำหรับ response ที่เป็น streaming จาก WebSocket หรือ SSE (Server-Sent Events) ควรใช้ Content-Type ที่แตกต่างกันตาม format ที่เลือกใช้

• text/event-stream — ใช้สำหรับ SSE ซึ่งเป็นมาตรฐานที่ browser เข้าใจได้โดยตรง
• application/x-ndjson — ใช้สำหรับ newline-delimited JSON ซึ่ง parse ง่ายในฝั่ง client
• application/octet-stream — ใช้เมื่อส่งข้อมูลแบบ raw binary ผ่าน WebSocket

Transfer-Encoding: chunked คืออะไร

Transfer-Encoding: chunked เป็น HTTP header ที่บอกว่า response จะถูกส่งมาเป็นส่วนๆ ไม่ใช่ทั้งหมดในครั้งเดียว สิ่งนี้สำคัญมากสำหรับ AI streaming เพราะ AI ประมวลผลทีละ token และส่งผลลัพธ์ออกมาทีละส่วน

// Node.js Server - การตั้งค่า streaming response ที่ถูกต้อง
const http = require('http');

const server = http.createServer((req, res) => {
  // ตั้งค่า headers สำหรับ streaming
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
    'Transfer-Encoding': 'chunked',
    'Access-Control-Allow-Origin': '*'
  });

  // ส่งข้อมูลเป็น chunk
  const sendChunk = (data) => {
    res.write(data: ${JSON.stringify(data)}\n\n);
  };

  // ตัวอย่างการ stream ผ่าน WebSocket
  let accumulatedText = '';

  // เมื่อได้รับ chunk ใหม่จาก AI
  const onTokenReceived = (token) => {
    accumulatedText += token;
    sendChunk({ 
      token: token,
      fullText: accumulatedText,
      timestamp: Date.now()
    });
  };

  // ส่ง heartbeat ทุก 30 วินาทีเพื่อรักษา connection
  const heartbeat = setInterval(() => {
    res.write(': heartbeat\n\n');
  }, 30000);

  req.on('close', () => {
    clearInterval(heartbeat);
  });
});

server.listen(3000, () => {
  console.log('Streaming server running on port 3000');
});

การใช้งาน WebSocket กับ AI Streaming

WebSocket เหมาะกับกรณีที่ต้องการ two-way communication เช่น ระบบแชทที่ต้องส่งข้อความไปมาหลายรอบ หรือแอปพลิเคชันที่ต้องการ process ข้อมูลระหว่างทาง ต่างจาก SSE ที่เป็น one-way จาก server ไป client เท่านั้น

// WebSocket Server - รับข้อความและ stream กลับ
const WebSocket = require('ws');
const { Readable } = require('stream');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', async (ws) => {
  console.log('Client connected');

  ws.on('message', async (message) => {
    try {
      const request = JSON.parse(message);
      
      // เรียก HolySheep AI streaming API
      const response = await fetch('https://api.holysheep.ai/v1/chat/completions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_HOLYSHEEP_API_KEY'
        },
        body: JSON.stringify({
          model: request.model || 'gpt-4.1',
          messages: request.messages,
          stream: true
        })
      });

      // ตรวจสอบว่า response เป็น streaming
      if (!response.body) {
        ws.send(JSON.stringify({ error: 'No response body' }));
        return;
      }

      // อ่าน stream และส่งไปยัง WebSocket client
      const reader = response.body.getReader();
      const decoder = new TextDecoder();

      while (true) {
        const { done, value } = await reader.read();
        
        if (done) {
          ws.send(JSON.stringify({ type: 'done' }));
          break;
        }

        const chunk = decoder.decode(value);
        // HolySheep API ส่งมาเป็น SSE format
        const lines = chunk.split('\n');
        
        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const data = line.slice(6);
            if (data !== '[DONE]') {
              const parsed = JSON.parse(data);
              ws.send(JSON.stringify({
                content: parsed.choices?.[0]?.delta?.content || '',
                done: false
              }));
            }
          }
        }
      }

    } catch (error) {
      ws.send(JSON.stringify({ error: error.message }));
    }
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

ความแตกต่างระหว่าง SSE กับ WebSocket

ในการเลือกใช้เทคโนโลยี ต้องพิจารณาจากความต้องการที่แท้จริงของแอปพลิเคชัน

• SSE (Server-Sent Events) — เหมาะกับกรณีที่ server ต้องส่งข้อมูลให้ client เป็นหลัก เช่น การแสดงผลการประมวลผล AI ใช้ง่าย ไม่ต้องตั้งค่า protocol ซับซ้อน และรองรับโดย browser ทุกตัว
• WebSocket — เหมาะกับกรณีที่ต้องมีการสื่อสารสองทิศทาง เช่น แชทบอทที่ต้องรับข้อความใหม่จากผู้ใช้ระหว่างที่ AI กำลังตอบ หรือเกมออนไลน์

สำหรับการใช้งาน AI streaming ในองค์กร HolySheep AI มี latency เฉลี่ยต่ำกว่า 50ms ทำให้ทั้ง SSE และ WebSocket ทำงานได้ราบรื่น ราคาเริ่มต้นที่ $8 ต่อล้าน tokens สำหรับ GPT-4.1 และ $2.50 สำหรับ Gemini 2.5 Flash

ข้อผิดพลาดที่พบบ่อยและวิธีแก้ไข

1. Response ถูกตัดก่อนที่ AI จะตอบเสร็จ

สาเหตุ: ไม่ได้ตั้งค่า Transfer-Encoding: chunked หรือ connection ถูกปิดก่อนเวลา

// วิธีแก้: ตั้งค่า headers อย่างครบถ้วน
res.writeHead(200, {
  'Content-Type': 'text/event-stream',
  'Cache-Control': 'no-cache',
  'Connection': 'keep-alive',
  'Transfer-Encoding': 'chunked',
  'X-Accel-Buffering': 'no'  // สำหรับ Nginx reverse proxy
});

// เพิ่ม heartbeat เพื่อรักษา connection
const keepAlive = setInterval(() => {
  res.write(': keepalive\n\n');
}, 15000);

req.on('close', () => clearInterval(keepAlive));

2. CORS Error เมื่อเรียก API จาก browser

สาเหตุ: Server ไม่ได้ส่ง CORS headers กลับมา

// วิธีแก้: เพิ่ม CORS headers ที่ถูกต้อง
const corsHeaders = {
  'Access-Control-Allow-Origin': 'https://your-frontend.com',
  'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Authorization',
  'Access-Control-Max-Age': '86400'
};

if (req.method === 'OPTIONS') {
  res.writeHead(204, corsHeaders);
  res.end();
  return;
}

// และสำหรับ streaming response
res.writeHead(200, {
  ...corsHeaders,
  'Content-Type': 'text/event-stream',
  'Transfer-Encoding': 'chunked'
});

3. JSON Parse Error เมื่อรับ streaming data

สาเหตุ: SSE data อาจมาหลาย event ใน chunk เดียว หรือมี heartbeat message แทรก

// วิธีแก้: parse อย่างถูกต้อง
const processStream = (reader) => {
  const decoder = new TextDecoder();
  let buffer = '';

  return new ReadableStream({
    async pull(controller) {
      const { done, value } = await reader.read();
      
      if (done) {
        controller.close();
        return;
      }

      buffer += decoder.decode(value, { stream: true });
      const lines = buffer.split('\n');
      buffer = lines.pop() || ''; // เก็บส่วนที่ยังไม่สมบูรณ์ไว้

      for (const line of lines) {
        if (line.startsWith('data: ')) {
          const data = line.slice(6);
          if (data && data !== '[DONE]') {
            try {
              const parsed = JSON.parse(data);
              controller.enqueue(parsed);
            } catch (e) {
              // ข้าม data ที่ parse ไม่ได้
              console.warn('Parse error:', data);
            }
          }
        }
        // ข้าม heartbeat (เริ่มต้นด้วย :)
      }
    }
  });
};

4. Memory หมดเมื่อ stream ข้อมูลจำนวนมาก

สาเหตุ: เก็บข้อมูลทั้งหมดไว้ใน buffer ก่อนส่งออก

// วิธีแก้: stream โดยตรงโดยไม่เก็บใน memory
const streamToResponse = async (aiStream, res) => {
  const reader = aiStream.getReader();
  const writer = res.getWriter();

  try {
    while (true) {
      const { done, value } = await reader.read();
      
      if (done) break;
      
      // ส่งทันทีโดยไม่เก็บใน memory
      await writer.write(value);
    }
  } finally {
    await reader.cancel();
  }
};

สรุป

การตั้งค่า Content-Type และ Transfer-Encoding ที่ถูกต้องเป็นพื้นฐานที่สำคัญในการสร้างระบบ AI streaming ที่มีประสิทธิภาพ ไม่ว่าจะเป็นระบบแชทลูกค้า ระบบค้นหาข้อมูล RAG หรือแอปพลิเคชันอื่นๆ ที่ต้องการ real-time response

HolyShehe AI ให้บริการ API ที่รองรับ streaming แบบ native พร้อม latency ต่ำกว่า 50ms ราคาประหยัดเริ่มต้นที่ $0.42/MTok สำหรับ DeepSeek V3.2 และรองรับทั้ง GPT-4.1, Claude Sonnet 4.5 และ Gemini 2.5 Flash สมัครใช้งานวันนี้รับเครดิตฟรีเมื่อลงทะเบียน

👉 สมัคร HolySheep AI — รับเครดิตฟรีเมื่อลงทะเบียน