WebSocket: คืออะไร โปรโตคอลการสื่อสารแบบสองทิศทางเต็มรูปแบบและทำงานอย่างไร

WebSocket คืออะไร?

WebSocket เป็นโปรโตคอลการสื่อสารที่ทำงานบน TCP และให้ช่องสัญญาณแบบสองทิศทางเต็มรูปแบบระหว่างไคลเอนต์และเซิร์ฟเวอร์ ได้รับการมาตรฐานโดย IETF เป็น RFC 6455 ในปี 2011 และรองรับโดยเบราว์เซอร์สมัยใหม่ แพลตฟอร์มมือถือ และเฟรมเวิร์กเซิร์ฟเวอร์ทั้งหมด

แตกต่างจาก HTTP ที่ไคลเอนต์เริ่มต้นคำขอและได้รับการตอบกลับ WebSocket อนุญาตให้ทั้งสองฝ่ายส่งข้อความได้ตลอดเวลาหลังจากสร้างการเชื่อมต่อแล้ว ทำให้เหมาะสำหรับสถานการณ์ที่ต้องการ การส่งข้อมูลทันที: แชท การแจ้งเตือน การแก้ไขเอกสารร่วมกัน

โปรโตคอล WebSocket ใช้พอร์ต HTTP 80 หรือพอร์ต HTTPS 443 สำหรับการจับมือเริ่มต้น หลังจากนั้นจะสลับไปใช้โปรโตคอลของตัวเองที่มีส่วนหัวน้อยที่สุด — เพียง 2 ไบต์แทนที่ 800+ ไบต์ใน HTTP คุณสมบัตินี้ให้ข้อได้เปรียบด้านประสิทธิภาพอย่างมากเมื่อมีข้อความจำนวนมาก

คุณลักษณะสำคัญของโปรโตคอล

การเชื่อมต่อ WebSocket เริ่มต้นด้วยคำขออัปเกรด HTTP (Upgrade) หลังจากนั้นโปรโตคอลจะเปลี่ยนเป็นรูปแบบเฟรมไบนารี ขนาดของ เฟรม มีตั้งแต่ 2 ไบต์ถึง 2^63 ไบต์ ทำให้สามารถส่งทั้งข้อความสั้นและข้อมูลไบนารีขนาดใหญ่ได้ โปรโตคอลรองรับการแยกส่วนข้อความ การปกปิดข้อมูลจากไคลเอนต์ไปยังเซิร์ฟเวอร์ และ ping/pong สำหรับการรักษาการเชื่อมต่อ

WebSocket ทำงานอย่างไร?

กระบวนการสร้างการเชื่อมต่อ WebSocket ประกอบด้วยสองขั้นตอน: การจับมือและการถ่ายโอนข้อมูล ในขั้นตอนการจับมือ ไคลเอนต์ส่งคำขอ HTTP พร้อมส่วนหัว Upgrade: websocket และเซิร์ฟเวอร์ยืนยันการเปลี่ยนโปรโตคอลด้วยสถานะ 101 Switching Protocols หลังจากนั้น การเชื่อมต่อจะเข้าสู่โหมดการส่งข้อมูลแบบสองทิศทางเต็มรูปแบบ

แต่ละข้อความใน WebSocket จะถูกแบ่งออกเป็นเฟรม เฟรมประกอบด้วย opcode (ข้อความ ข้อมูลไบนารี ปิด ping/pong) ความยาวเพย์โหลด และคีย์การปกปิดสำหรับข้อมูลจากไคลเอนต์ เฟรมสามารถถูกแยกส่วนได้ — เฟรมควบคุม (ping/pong) สามารถส่งระหว่างส่วนของข้อความได้ ป้องกันการหมดเวลาการเชื่อมต่อระหว่างการถ่ายโอนที่ยาวนาน

const ws = new WebSocket('wss://example.com/chat')

ws.addEventListener('open', () => {
    console.log('เชื่อมต่อแล้ว')
    ws.send('สวัสดี เซิร์ฟเวอร์!')
})

ws.addEventListener('message', (event) => {
    console.log('ได้รับ:', event.data)
})

ws.addEventListener('close', () => {
    console.log('การเชื่อมต่อปิดแล้ว')
})

ในตัวอย่างด้านบน ไคลเอนต์สร้างออบเจ็กต์ WebSocket โดยระบุ URL ที่ปลอดภัย wss:// หลังจากเปิดการเชื่อมต่อ จะส่งข้อความต้อนรับ และตัวจัดการข้อความรับการตอบกลับจากเซิร์ฟเวอร์ เมื่อปิด ตัวจัดการการปิดจะทำงาน — ซึ่งสำคัญสำหรับการเชื่อมต่อใหม่ในกรณีที่เครือข่ายขัดข้อง

WebSocket เทียบกับ HTTP: การเปรียบเทียบ

ความแตกต่างหลักระหว่าง WebSocket และ HTTP อยู่ในรูปแบบการโต้ตอบ HTTP ทำงานตามรูปแบบ คำขอ-การตอบกลับ: ไคลเอนต์เริ่มต้นคำขอ เซิร์ฟเวอร์ส่งคืนการตอบกลับ และการเชื่อมต่อถูกปิด ในทางกลับกัน WebSocket สร้างช่องสัญญาณถาวรที่ทั้งสองฝ่ายสามารถเริ่มต้นการส่งข้อมูลได้ตลอดเวลา

สำหรับแอปพลิเคชันที่ต้องการความหน่วงต่ำและกระแสข้อมูลต่อเนื่อง WebSocket มีประสิทธิภาพมากกว่าอย่างมาก HTTP Long Polling — ทางเลือกที่เซิร์ฟเวอร์เก็บคำขอไว้จนกว่าข้อมูลจะพร้อม — สร้างภาระมากเกินไปบนเซิร์ฟเวอร์และเพิ่ม การใช้หน่วยความจำ เนื่องจากการเชื่อมต่อพร้อมกันหลายรายการ

ตาม High Performance Browser Networking (Grigorik, O'Reilly) WebSocket ลดความหน่วงของเครือข่ายในสถานการณ์เรียลไทม์ได้ 40-60% เมื่อเทียบกับ HTTP Long Polling ในขณะที่ภาระเซิร์ฟเวอร์ลดลง 3-5 เท่าเนื่องจากการกำจัดการจับมือซ้ำ

WebSocket ใช้ที่ไหน?

ด้วยความหน่วงต่ำและการสื่อสารสองทิศทาง WebSocket ถูกใช้ในแอปพลิเคชันที่หลากหลาย สถานการณ์หลักรวมถึงการส่งข้อความทันที การซิงโครไนซ์สถานะในเกม และการส่งข้อมูลตลาดในระบบการเงิน

แชทและแอปส่งข้อความ

WebSocket กลายเป็นมาตรฐานโดยพฤตินัยสำหรับแอปพลิเคชันแชท แพลตฟอร์มอย่าง Slack, Telegram Web และ WhatsApp Web ใช้ WebSocket สำหรับการส่งข้อความทันที โปรโตคอลอนุญาตให้ส่งทั้งข้อความและไฟล์ผ่านช่องทางเดียว ในขณะที่กลไก ping/pong รักษาการเชื่อมต่อให้ทำงานอยู่แม้ในช่วงที่ไม่มีการใช้งาน

เกมออนไลน์

เกมเบราว์เซอร์และมือถือแบบหลายผู้เล่นต้องการความหน่วงน้อยที่สุดในการซิงโครไนซ์สถานะของผู้เล่น WebSocket ส่งพิกัด การกระทำ และเหตุการณ์ในเวลาจริงโดยไม่มีความล่าช้าของคำขอ HTTP เฟรมเวิร์กอย่าง Socket.IO และ Colyseus ทำให้การทำงานระดับต่ำของโปรโตคอลเป็นนามธรรม เพิ่มการเชื่อมต่ออัตโนมัติและห้อง

แอปพลิเคชันทางการเงิน

เทอร์มินัลการซื้อขายและแพลตฟอร์มเทรดใช้ WebSocket เพื่อรับราคาแบบเรียลไทม์ ความล่าช้าเพียงไม่กี่มิลลิวินาทีอาจมีค่าใช้จ่ายหลายล้านดอลลาร์ ดังนั้น API ทางการเงิน — เช่น Binance WebSocket Streams, Coinbase Pro — ให้อินเทอร์เฟซ WebSocket สำหรับข้อมูลตลาด

แอปพลิเคชันมือถือและ IoT

ในการพัฒนามือถือ WebSocket ถูกใช้ผ่าน API ดั้งเดิม: URLSessionWebSocketTask บน iOS และ OkHttp WebSocket บน Android สำหรับ Flutter มีไลบรารี web_socket_channel และสำหรับ React Native — react-native-websocket อุปกรณ์ IoT ใช้ WebSocket สำหรับส่งข้อมูลเทเลเมทรีและรับคำสั่งควบคุม เนื่องจากโปรโตคอลใช้พลังงานน้อยกว่า HTTP polling อย่างต่อเนื่อง

ตัวอย่างโค้ด WebSocket

มาดูตัวอย่างฝั่งเซิร์ฟเวอร์โดยใช้ Node.js กับไลบรารี ws — การใช้งาน WebSocket ที่ได้รับความนิยมมากที่สุดสำหรับ JavaScript เซิร์ฟเวอร์รับการเชื่อมต่อ ประมวลผลข้อความ และกระจายข้อความไปยังไคลเอนต์ที่เชื่อมต่อทั้งหมด

const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 8080 })

wss.on('connection', (ws) => {
    console.log('ไคลเอนต์ใหม่เชื่อมต่อแล้ว')

    ws.on('message', (data) => {
        console.log('ได้รับ:', data.toString())
        ws.send('เซิร์ฟเวอร์ได้รับข้อความของคุณแล้ว')
    })

    ws.on('close', () => {
        console.log('ไคลเอนต์ตัดการเชื่อมต่อแล้ว')
    })
})

console.log('เซิร์ฟเวอร์ WebSocket เริ่มทำงานบนพอร์ต 8080')

เซิร์ฟเวอร์สร้างอินสแตนซ์ WebSocket.Server บนพอร์ต 8080 และรอการเชื่อมต่อ ไคลเอนต์ใหม่แต่ละรายจะได้รับออบเจ็กต์ ws แยกต่างหากซึ่งเซิร์ฟเวอร์สามารถส่งข้อความแต่ละรายการได้ การกระจายข้อความไปยังไคลเอนต์ทั้งหมดทำได้โดยการวนซ้ำผ่านอาร์เรย์การเชื่อมต่อ ด้วยจำนวนไคลเอนต์ที่มาก (มากกว่า 1,000) แนะนำให้ใช้ไลบรารีที่รองรับคลัสเตอร์เช่น Socket.IO ซึ่งเพิ่มการปรับขนาดด้วย Redis และการเชื่อมต่ออัตโนมัติ

ส่งข้อความถึงไคลเอนต์ทั้งหมด

wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
        client.send('ข้อความสำหรับผู้เข้าร่วมทั้งหมด')
    }
})

การตรวจสอบ readyState ก่อนส่งเป็นสิ่งที่จำเป็น: หากไคลเอนต์ตัดการเชื่อมต่อแล้ว การเรียก send จะทำให้เกิดข้อผิดพลาด แฟล็ก WebSocket.OPEN รับประกันว่าการเชื่อมต่อทำงานอยู่และข้อความจะถูกส่ง

สำหรับแอปพลิเคชันมือถือ iOS WebSocket ถูกใช้งานผ่าน URLSessionWebSocketTask ซึ่งพร้อมใช้งานตั้งแต่ iOS 13 เซสชันสร้างงานด้วย URL โปรโตคอล wss:// หลังจากนั้นเรียกเมธอด send และ receive การรับข้อความสามารถจัดระเบียบผ่านการเรียกซ้ำ receive อย่างต่อเนื่อง ซึ่งรอข้อความถัดไปหลังจากประมวลผลข้อความก่อนหน้า เพื่อให้แน่ใจว่ามีการรับข้อมูลอย่างต่อเนื่องโดยไม่ต้องเชื่อมต่อใหม่ สำหรับ Android ใช้ OkHttp WebSocket ซึ่งให้อินเทอร์เฟซที่คล้ายกันกับ callback onOpen, onMessage, onClosing และ onClosed พร้อมกับการเชื่อมต่ออัตโนมัติเมื่อการเชื่อมต่อขาด

เมื่อทำงานกับ WebSocket ในแอปพลิเคชันมือถือ สิ่งสำคัญคือต้องพิจารณาการจัดการวงจรชีวิต: เมื่อแอปทำงานในพื้นหลัง ระบบอาจยุติการเชื่อมต่อ บน iOS ต้องสร้างการเชื่อมต่อใหม่เมื่อกลับมาที่พื้นหน้าผ่านดีลิเกต sceneDidBecomeActive บน Android ควรใช้คอมโพเนนต์ Lifecycle-aware หรือ Service เพื่อรักษาการเชื่อมต่อ นอกจากนี้ แนะนำให้ใช้ exponential backoff สำหรับการเชื่อมต่อใหม่ — เพิ่มช่วงเวลาระหว่างการลองจาก 1 ถึง 30 วินาที — เพื่อหลีกเลี่ยงการสร้างภาระมากเกินไปบนเซิร์ฟเวอร์ระหว่างปัญหาเครือข่ายชั่วคราว