หากเราต้องการให้แอพพลิชั่นทำงานแบบ Realtime แน่นอนว่ามี Service หลากหลายให้เราเลือกใช้ อาธิเช่น Firebase Realtime Database บริการของ Google แต่ก็มีค่าใช้จ่ายสำหรับการใช้งาน หากเราต้องการใช้ของฟรี Open Source ขอแนะนำพระเอกของเรา นั่นคือเจ้า socket.io
“Socket.IO enables real-time, bidirectional and event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed.”
socket.io คือ ไลบรารีที่เปิดใช้งานการสื่อสารแบบเรียลไทม์ แบบสองทิศทางระหว่าง Client กับ Server และทำงานตามเหตุการณ์ที่กำหนดไว้ ซึ่งสามารถทำงานได้ทุกระบบปฏิบัติการ ทุกเบราว์เซอร์ หรือทุกอุปกรณ์ โดยมุ่งเน้นไปที่ความน่าเชื่อถือและความเร็ว
สำหรับการใช้งาน socket.io บน Vue.js นั้น สามารถทำได้ง่ายๆ เพียง 5 ขั้นตอนดังนี้
- Install Package
- Connect Socket
- Register Event
- Emit Event
- Disconnect Socket
Install Package
เริ่มจากติดตั้ง package socket.io-client โดยพิมพ์คำสั่งนี้
$ npm i socket.io-clientor$ yarn add socket.io-client
Connect Socket
ในส่วนของการเชื่อมต่อ socket ใช้คำสั่ง
io(<SECKET_IO_URL>, {transports: [“websocket”, “polling”] })
และสามารถ handle สถานะการเชื่อมต่อได้ด้วย event ต่อไปนี้
- disconnect คือ กรณีการเชื่อมต่อถูกตัดขาด
- connect_error คือ กรณีการเชื่อมต่อเกิดความผิดพลาด
// import ไลบราลรี่เข้ามา
import io from "socket.io-client";// เชื่อมต่อกับ socket
let socket = io(<SECKET_IO_URL>, {
transports: ["websocket", "polling"],
});// กรณีการเชื่อมต่อถูกตัดขาด
socket.on("disconnect", (reason) => {
console.log("[socket disconnected]: ", reason);
});// กรณีการเชื่อมต่อเกิดความผิดพลาด
socket.on("connect_error", (error) => {
console.error("[connect error]: ", error);
});
อธิบายเพิ่มเติมเกี่ยวกับพารามิเตอร์ transports จากคำสั่งเชื่อมต่อ socket พารามิเตอร์ transports เป็นการระบุรูปแบบของการรับส่งข้อมูลระหว่าง client กับ server โดยถ้าเลือกเป็น “websocket” จะเหมาะกับกลุ่มผู้ใช้งานบนเบราว์เซอร์แบบใหม่ แต่ถ้าต้องการเน้นผู้ใช้ทั่วไปก็เลือกเป็น “polling” เพราะบางเบราว์เซอร์ยังไม่รองรับ websocket
เพื่อให้ครอบคลุมทุกกลุ่มผู้ใช้ แนะนำให้เลือกทั้งสองแบบ ซึ่งตัว socket.io จะเลือกเองหากแบบไหนใช้ได้ก็จะใช้งานแบบนั้นในการรับส่งข้อมูล โดยเลือกตามลำดับ
*** เพิ่มเติม
กรณีที่การเชื่อมต่อถูกตัดขาด จะมี 2 กรณีเท่านั้น ที่ socket.io จะไม่พยายามเชื่อมต่อใหม่ (try to reconnect)
"io client disconnect"กรณีที่เกิดจากสั่งคำdisconnectจากฝั่ง client"client namespace disconnect"กรณีที่เกิดจากสั่งคำdisconnectจากฝั่ง server
Register Event
ในส่วนของการ register event คือการเลือกที่จะรอรับข้อมูลจาก event ที่ต้องการโดยใช้คำสั่ง socket.on(“eventName”, (data) => {})
// ลงทะเบียน event ที่ต้องการรับข้อมูล
socket.on("eventName", (data) => {
// Do something
console.error("[data]: ", data);
});Emit Event
ในส่วนของการ emit event คือการส่งข้อมูลไปยัง event ที่ต้องการ โดยใช้คำสั่ง socket.emit(“eventName”, data, (response) => {})
// ส่งข้อมูลไปยัง event ที่ต้องการ
socket.emit("eventName",data, (response) => {
/* Handle response, if any */
console.error("[response]: ", response);
});Disconnect Socket
เมื่อเราไม่ใช้งานแล้วก็ต้องปิดการเชื่อมต่อด้วย เพื่อไม่ให้ connection ค้างอยู่ใน server โดยใช้คำสั่ง
// สำหรับปิดการรอรับข้อมูลเฉพาะ event
socket.removeAllListeners(['eventName'])// สำหรับปิดการรอรับข้อมูลทุก event ที่ลงทะเบียนไว้
socket.removeAllListeners();// สำหรับปิดการเชื่อมต่อ socket
socket.disconnect()
สำหรับส่วนของการเชื่อมต่อ Socket เราสามารถนำมาเขียนรวมกันไว้ที่ mixins ได้ เพื่อให้โค้ดดูง่าย สะอาด และสะดวกต่อการนำไปใช้
ผลลัพธ์จาก Console
- กรณี Connect Socket สำเร็จ
- กรณี Connect Socket เกิดความผิดพลาด
- กรณี Disconnect Socket สำเร็จ
สำหรับการใช้งาน Socket.io กับ Vue.js ก็มีประมาณนี้ ซึ่งเจ้า socket.io นั้นยังมีฟีเจอร์อื่นๆอีกมากมายที่ไม่ได้พูดถึง สำหรับใครที่สนใจศึกษารายละเอียดเพิ่มเติมก็สามารถเข้าไปดูได้จากลิงค์นี้ socket.io สำหรับวันนี้ต้องขอตัวลาไปก่อน สวัสดีครับ ^^
Reference:
