Vue3 ต่อ AI API แบบ Streaming: ทำ打字机效果 ง่ายๆ ใน 10 นาที

สวัสดีครับ ผมเพิ่งศึกษาเรื่องนี้ได้ไม่นาน และอยากแบ่งปันสิ่งที่เรียนรู้มาให้เพื่อนๆ ที่ยังไม่เคยทำ API มาก่อน ในบทความนี้เราจะมาลองทำแชทที่พิมพ์ตัวอักษรทีละตัวเหมือนคนพิมพ์จริงๆ ซึ่งเป็นฟีเจอร์ยอดนิยมที่ทำให้เว็บดูน่าสนใจ

Streaming คืออะไร ทำไมต้องใช้?

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

สำหรับคนที่ยังไม่มี API Key ผมแนะนำ สมัครที่นี่ ครับ บริการนี้มีความเร็วต่ำกว่า 50 มิลลิวินาที ราคาถูกมาก แถมลงทะเบียนวันนี้รับเครดิตฟรีทันที รองรับชำระเงินผ่าน WeChat และ Alipay สะดวกมาก

เตรียมโปรเจกต์ Vue3 กันเลย

เริ่มต้นด้วยการสร้างโปรเจกต์ใหม่ ถ้ายังไม่มี ให้พิมพ์คำสั่งนี้ใน Terminal

npm create vue@latest my-ai-chat
cd my-ai-chat
npm install
npm install axios

หลังจากติดตั้งเสร็จ เราจะมาสร้างไฟล์สำหรับใช้งาน API กัน

สร้างไฟล์สำหรับเรียก AI API

ให้สร้างไฟล์ชื่อ useChat.js ในโฟลเดอร์ src ครับ ไฟล์นี้จะดูแลเรื่องการเชื่อมต่อกับ AI

import { ref } from 'vue'
import axios from 'axios'

export function useChat() {
  const messages = ref([])
  const isLoading = ref(false)
  const fullResponse = ref('')

  const sendMessage = async (userMessage) => {
    // เพิ่มข้อความของผู้ใช้เข้าไปในรายการ
    messages.value.push({
      role: 'user',
      content: userMessage
    })

    isLoading.value = true
    fullResponse.value = ''

    // เพิ่ม placeholder สำหรับข้อความ AI
    messages.value.push({
      role: 'assistant',
      content: ''
    })

    try {
      const response = await axios({
        method: 'POST',
        url: 'https://api.holysheep.ai/v1/chat/completions',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_HOLYSHEEP_API_KEY'
        },
        data: {
          model: 'gpt-4o-mini',
          messages: messages.value.slice(0, -1).map(m => ({
            role: m.role,
            content: m.content
          })),
          stream: true
        },
        responseType: 'stream'
      })

      // อ่านข้อมูลทีละส่วนที่ส่งกลับมา
      const reader = response.data.getReader()
      const decoder = new TextDecoder()

      while (true) {
        const { done, value } = await reader.read()
        if (done) break

        const chunk = decoder.decode(value)
        const lines = chunk.split('\n')

        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const data = line.slice(6)
            if (data === '[DONE]') continue

            try {
              const parsed = JSON.parse(data)
              const content = parsed.choices?.[0]?.delta?.content || ''
              if (content) {
                // อัพเดทข้อความ AI ทีละตัว
                messages.value[messages.value.length - 1].content += content
                fullResponse.value += content
              }
            } catch (e) {
              // ข้ามข้อมูลที่ parse ไม่ได้
            }
          }
        }
      }
    } catch (error) {
      console.error('เกิดข้อผิดพลาด:', error)
      messages.value[messages.value.length - 1].content = 
        'ขอโทษครับ เกิดข้อผิดพลาด กรุณาลองใหม่อีกครั้ง'
    } finally {
      isLoading.value = false
    }
  }

  return {
    messages,
    isLoading,
    sendMessage
  }
}

สร้างหน้าจอแชท

ต่อไปเราจะสร้างหน้าจอแชทง่ายๆ ใน App.vue ครับ

<template>
  <div class="chat-container">
    <div class="chat-header">
      <h1>AI Chat พร้อม Streaming</h1>
    </div>

    <div class="messages">
      <div 
        v-for="(msg, index) in messages" 
        :key="index"
        :class="['message', msg.role]"
      >
        <span class="role-label">{{ msg.role === 'user' ? 'ฉัน' : 'AI' }}</span>
        <p>{{ msg.content }}</p>
      </div>
    </div>

    <div class="input-area">
      <input 
        v-model="inputMessage"
        @keyup.enter="handleSend"
        placeholder="พิมพ์ข้อความของคุณ..."
        :disabled="isLoading"
      />
      <button @click="handleSend" :disabled="isLoading">
        {{ isLoading ? 'กำลังตอบ...' : 'ส่ง' }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useChat } from './useChat'

const { messages, isLoading, sendMessage } = useChat()
const inputMessage = ref('')

const handleSend = () => {
  if (inputMessage.value.trim() && !isLoading.value) {
    sendMessage(inputMessage.value)
    inputMessage.value = ''
  }
}
</script>

<style>
.chat-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.messages {
  min-height: 400px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.message {
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 8px;
}

.message.user {
  background: #e3f2fd;
  margin-left: 20%;
}

.message.assistant {
  background: #f5f5f5;
  margin-right: 20%;
}

.role-label {
  font-weight: bold;
  font-size: 12px;
  color: #666;
}

.input-area {
  display: flex;
  gap: 10px;
}

.input-area input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.input-area button {
  padding: 12px 24px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.input-area button:disabled {
  background: #ccc;
}
</style>

วิธีการทดสอบ

เมื่อเขียนโค้ดเสร็จแล้ว ให้รันคำสั่งนี้

npm run dev

จากนั้นเปิดเบราว์เซอร์ไปที่ http://localhost:5173 คุณจะเห็นหน้าจอแชท ให้ลองพิมพ์คำถามดู ถ้าทำถูกต้อง ข้อความตอบจะปรากฏทีละตัวอักษรแบบเต่าพิมพ์เลยครับ

ข้อมูลราคา HolySheep ปี 2026

สำหรับคนที่สนใจเรื่องค่าใช้จ่าย บริการนี้มีอัตราแลกเปลี่ยนที่คุ้มค่ามาก 1 หยวนเท่ากับ 1 ดอลลาร์ ประหยัดได้ถึง 85% เลยทีเดียว ราคาต่อล้าน Token ในปี 2026 มีดังนี้

• GPT-4.1: 8 ดอลลาร์ ต่อล้าน Token
• Claude Sonnet 4.5: 15 ดอลลาร์ ต่อล้าน Token
• Gemini 2.5 Flash: 2.50 ดอลลาร์ ต่อล้าน Token
• DeepSeek V3.2: 0.42 ดอลลาร์ ต่อล้าน Token (ถูกที่สุด)

จะเห็นได้ว่าราคาของ DeepSeek V3.2 ถูกมาก คุ้มค่าสำหรับการทดลองเรียนรู้หรืองานที่ไม่ต้องการความซับซ้อนสูงครับ

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

กรณีที่ 1: ข้อความไม่แสดงเลย ไม่มี Error

สาเหตุ: อาจเป็นเพราะ API Key ไม่ถูกต้องหรือยังไม่ได้ใส่ Key จริงๆ

// ตรวจสอบว่า Key ถูกต้องหรือไม่
// เปลี่ยน YOUR_HOLYSHEEP_API_KEY เป็น Key จริงที่ได้จากเว็บ
const response = await axios({
  // ... ส่วนอื่นๆ เหมือนเดิม
  headers: {
    'Authorization': 'Bearer YOUR_HOLYSHEEP_API_KEY'  // แก้ตรงนี้
  }
})

// วิธีตรวจสอบ: ลอง console.log Key ออกมาดู
console.log('API Key:', 'YOUR_HOLYSHEEP_API_KEY')

กรณีที่ 2: ข้อความขึ้นเป็นบรรทัดเดียว ไม่แสดงทีละตัว

สาเหตุ: ไม่ได้ตั้งค่า responseType เป็น stream

// เพิ่ม responseType: 'stream' ในส่วน axios config
const response = await axios({
  method: 'POST',
  url: 'https://api.holysheep.ai/v1/chat/completions',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_HOLYSHEEP_API_KEY'
  },
  data: {
    model: 'gpt-4o-mini',
    messages: messagesArray,
    stream: true  // ต้องเป็น true ด้วย
  },
  responseType: 'stream'  // บรรทัดนี้สำคัญมาก!
})

กรณีที่ 3: ข้อผิดพลาด CORS หรือ Network Error

สาเหตุ: Browser บล็อกการเรียก API จาก localhost ไปที่ server ภายนอก

// วิธีแก้ไขที่ 1: ใช้ Proxy (สร้างไฟล์ vite.config.js)
// หรือวิธีที่ 2: ใช้ CORS proxy

const response = await axios({
  method: 'POST',
  url: 'https://api.holysheep.ai/v1/chat/completions',
  // เพิ่ม proxy config
  proxy: {
    host: '127.0.0.1',
    port: 8080
  }
})

// หรือวิธีที่ 3: ใช้ server-side เรียก API แทน
// สร้าง API endpoint ขึ้นมาเองแล้วเรียกจาก frontend

กรณีที่ 4: ข้อความ AI ซ้ำกันหลายรอบ

สาเหตุ: เรียก API หลายครั้งโดยไม่รู้ตัว หรือ Logic ในการอัพเดท messages ผิดพลาด

// เพิ่มตรวจสอบก่อนส่ง
const sendMessage = async (userMessage) => {
  if (isLoading.value) return  // ป้องกันเรียกซ้ำ
  
  isLoading.value = true
  
  // ตรวจสอบว่ามี placeholder กี่อัน
  const lastMessage = messages.value[messages.value.length - 1]
  if (lastMessage?.role === 'assistant' && lastMessage.content === '') {
    // ถ้ามี placeholder อยู่แล้ว ให้อัพเดทตัวเดิม
    // ไม่ต้อง push ข้อความใหม่เพิ่ม
  }
}

กรณีที่ 5: Response ดูเพี้ยนๆ อ่านไม่ออก

สาเหตุ: การ decode ข้อมูลผิดพลาด หรือข้อมูลมากระปุก

// ใช้ TextDecoder อย่างถูกต้อง
const reader = response.data.getReader()
const decoder = new TextDecoder('utf-8')

while (true) {
  const { done, value } = await reader.read()
  if (done) break
  
  // ตรวจสอบว่าข้อมูลไม่ว่าง
  if (value && value.length > 0) {
    const chunk = decoder.decode(value, { stream: true })
    // ประมวลผล chunk ที่ได้
    processChunk(chunk)
  }
}

สรุป

การทำ Streaming Chat ใน Vue3 ไม่ยากเลยใช่ไหมครับ สิ่งสำคัญคือต้องตั้งค่า responseType เป็น stream และใช้ Reader ในการอ่านข้อมูลทีละส่วน ถ้า�