# WebSocket คืออะไร? คู่มือสร้าง Real-time App ด้วย Next.js และ Laravel สำหรับนักพัฒนา SME ปี 2026
ในยุคที่ผู้ใช้งานต้องการข้อมูลแบบ Real-time มากขึ้น ไม่ว่าจะเป็นการแชท การแจ้งเตือนสด หรือ Dashboard ที่อัปเดตตัวเองโดยอัตโนมัติ WebSocket คือเทคโนโลยีที่ตอบโจทย์ความต้องการเหล่านี้ได้อย่างมีประสิทธิภาพ
ปัญหาของ HTTP แบบดั้งเดิมคือการที่ Client ต้องส่ง Request ไปยัง Server ทุกครั้งที่ต้องการข้อมูล ซึ่งทำให้เกิดความล่าช้าและสิ้นเปลืองทรัพยากร แต่ WebSocket แก้ปัญหานี้ด้วยการเปิดช่องทางสื่อสารแบบ Two-way ที่คงอยู่ตลอดเวลา
ในบทความนี้ คุณจะได้เรียนรู้ว่า WebSocket คืออะไร ทำงานอย่างไร และวิธีนำ WebSocket ไปใช้จริงในโปรเจกต์ Next.js และ Laravel สำหรับธุรกิจ SME ไทยในปี 2026
WebSocket คืออะไร?
WebSocket เป็นโปรโตคอลการสื่อสารที่ช่วยให้ Client (เช่น เบราว์เซอร์) และ Server สามารถส่งข้อมูลหากันได้แบบ Real-time ผ่านการเชื่อมต่อที่คงอยู่ตลอดเวลา (Persistent Connection)
ต่างจาก HTTP ที่เปิด-ปิด Connection ทุกครั้งที่มีการส่งข้อมูล WebSocket จะเปิด Connection เพียงครั้งเดียว แล้วรักษาช่องทางสื่อสารนั้นไว้จนกว่าฝ่ายใดฝ่ายหนึ่งจะปิด ทำให้ส่งข้อมูลได้เร็ว มีประสิทธิภาพ และ Latency ต่ำมาก
ความแตกต่างระหว่าง HTTP และ WebSocket
| Feature | HTTP | WebSocket |
|---------|------|-----------|
| ทิศทางการสื่อสาร | One-way (Client → Server) | Two-way (Full-duplex) |
| การเชื่อมต่อ | เปิด-ปิดทุก Request | คงอยู่ตลอดเวลา |
| Latency | สูง | ต่ำมาก |
| Overhead | สูง (Headers ทุก Request) | ต่ำ |
| Use Case | โหลดหน้าเว็บ, API | แชท, Game, Dashboard |
Use Case ของ WebSocket ในธุรกิจ
WebSocket เหมาะสำหรับสถานการณ์ที่ต้องการข้อมูลแบบ Real-time เช่น:
วิธีใช้ WebSocket กับ Next.js
Next.js รองรับ WebSocket ได้ผ่านหลายวิธี แต่ที่นิยมที่สุดคือการใช้ Socket.IO ร่วมกับ Next.js API Routes หรือ Custom Server
ขั้นตอนที่ 1: ติดตั้ง Dependencies
```bash
npm install socket.io socket.io-client
```
ขั้นตอนที่ 2: สร้าง Socket.IO Server
สร้างไฟล์ `pages/api/socket.js` สำหรับ API Route:
```javascript
import { Server } from 'socket.io'
export default function handler(req, res) {
if (res.socket.server.io) {
res.end()
return
}
const io = new Server(res.socket.server)
res.socket.server.io = io
io.on('connection', (socket) => {
socket.on('message', (data) => {
io.emit('message', data)
})
socket.on('disconnect', () => {
console.log('Client disconnected:', socket.id)
})
})
res.end()
}
```
ขั้นตอนที่ 3: เชื่อมต่อ Socket จาก Client
```javascript
import { useEffect, useState } from 'react'
import io from 'socket.io-client'
let socket
export default function Chat() {
const [messages, setMessages] = useState([])
const [input, setInput] = useState('')
useEffect(() => {
fetch('/api/socket')
socket = io()
socket.on('message', (msg) => {
setMessages(prev => [...prev, msg])
})
return () => socket.disconnect()
}, [])
const sendMessage = () => {
socket.emit('message', { text: input, time: new Date() })
setInput('')
}
return (
<div>
{messages.map((msg, i) => <p key={i}>{msg.text}</p>)}
<input value={input} onChange={e => setInput(e.target.value)} />
<button onClick={sendMessage}>ส่ง</button>
</div>
)
}
```
วิธีใช้ WebSocket กับ Laravel (Broadcasting)
Laravel มี Broadcasting ที่รองรับ WebSocket ผ่าน Laravel Echo และ Pusher หรือ Laravel WebSockets (Self-hosted)
ขั้นตอนที่ 1: ติดตั้ง Broadcasting
```bash
composer require pusher/pusher-php-server
npm install --save laravel-echo pusher-js
```
ขั้นตอนที่ 2: ตั้งค่า .env
```
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_app_secret
PUSHER_APP_CLUSTER=ap1
```
ขั้นตอนที่ 3: สร้าง Event และ Broadcast
```php
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class OrderStatusUpdated implements ShouldBroadcast
{
public $order;
public function __construct($order) {
$this->order = $order;
}
public function broadcastOn() {
return new Channel('orders');
}
}
```
ขั้นตอนที่ 4: รับฟัง Event บน Frontend
```javascript
import Echo from 'laravel-echo'
import Pusher from 'pusher-js'
window.Pusher = Pusher
const echo = new Echo({
broadcaster: 'pusher',
key: process.env.NEXT_PUBLIC_PUSHER_KEY,
cluster: 'ap1',
})
echo.channel('orders')
.listen('OrderStatusUpdated', (e) => {
console.log('Order updated:', e.order)
})
```
เปรียบเทียบตัวเลือก WebSocket สำหรับ SME
| ตัวเลือก | ราคา | ความง่าย | Scalability | เหมาะสำหรับ |
|----------|------|----------|-------------|-------------|
| Pusher (Cloud) | ฟรี 200 connections | ง่ายมาก | สูงมาก | Startup, SME |
| Laravel WebSockets | ฟรี (Self-hosted) | ปานกลาง | ปานกลาง | ต้องการ Control |
| Socket.IO | ฟรี | ง่าย | สูง | Node.js Projects |
| Ably | ฟรี 6M messages/เดือน | ง่าย | สูงมาก | Enterprise |
Best Practice สำหรับการใช้ WebSocket ในโปรดักชัน
การนำ WebSocket ไปใช้งานจริงควรคำนึงถึงเรื่องต่อไปนี้:
สรุปและคำแนะนำ
WebSocket เป็นเทคโนโลยีที่ช่วยให้แอปพลิเคชันของคุณมีความสามารถ Real-time ที่ผู้ใช้ยุคใหม่คาดหวัง ไม่ว่าจะเป็นระบบแชท การแจ้งเตือน หรือ Dashboard แบบ Live
Key Takeaways:
หากคุณต้องการให้ ADS FIT ช่วยพัฒนาระบบ Real-time สำหรับธุรกิจของคุณ [ติดต่อเราได้เลย](/contact) ทีมนักพัฒนาของเราพร้อมช่วยคุณตั้งแต่ออกแบบสถาปัตยกรรมไปจนถึง Deploy จริง