Web Socket

Web Socket

ในยุคของเทคโนโลยีที่เติบโตอย่างรวดเร็ว การสื่อสารแบบเรียลไทม์เป็นสิ่งสำคัญที่ช่วยเพิ่มประสิทธิภาพในการทำงานและการเชื่อมต่อระหว่างอุปกรณ์และแอปพลิเคชันต่างๆ Web Socket เป็นโปรโตคอลที่ออกแบบมาเพื่อการสื่อสารแบบเรียลไทม์โดยเฉพาะ ซึ่งมีความสามารถในการเชื่อมต่อที่รวดเร็วและมีประสิทธิภาพมากกว่าโปรโตคอล HTTP ทั่วไปโดยเป็นการสื่อสารในลักษณะการสื่อสารแบบสองทิศทาง (full-duplex) ซึ่งช่วยให้การส่งข้อมูลระหว่าง Client และ Server เป็นไปอย่างรวดเร็วโดยไม่ต้องมีการเปิดปิดการเชื่อมต่อซ้ำๆ

ตัวอย่างการใช้งาน Web Socket

1. การสนทนาแบบเรียลไทม์ (Real-time Chat Applications) Web Socket ช่วยให้การส่งข้อความระหว่างผู้ใช้ในแอปพลิเคชันสนทนาเป็นไปอย่างรวดเร็วและทันที ตัวอย่างเช่น แอปพลิเคชัน Chat เช่น Slack หรือ Facebook Messenger ใช้ WebSocket เพื่อให้การสนทนาเป็นไปอย่างราบรื่น

2. การติดตามข้อมูลแบบเรียลไทม์ (Real-time Data Feeds) การติดตามข้อมูลตลาดหุ้น ข่าว หรือการแจ้งเตือนต่างๆ ที่ต้องการข้อมูลที่อัปเดตแบบเรียลไทม์ ตัวอย่างเช่น การติดตามราคาหุ้นหรือการแจ้งเตือนข่าวสารในระบบการเงิน

3. การควบคุมเกมแบบเรียลไทม์ (Real-time Gaming) Web Socket ช่วยให้การส่งข้อมูลระหว่างเซิร์ฟเวอร์เกมและผู้เล่นเป็นไปอย่างรวดเร็ว เช่น การควบคุมตัวละคร การอัปเดตสถานะของเกม ตัวอย่างเช่น เกมออนไลน์ที่มีการโต้ตอบแบบเรียลไทม์ เช่น เกมแนว MOBA หรือ MMORPG

4. การควบคุมอุปกรณ์ IoT (IoT Device Control) การควบคุมและรับข้อมูลจากอุปกรณ์ IoT ที่ต้องการการสื่อสารแบบเรียลไทม์ เช่น การควบคุมบ้านอัจฉริยะ การตรวจสอบเซ็นเซอร์ ตัวอย่างเช่น ระบบบ้านอัจฉริยะที่ควบคุมผ่านแอปพลิเคชันมือถือ

5. การแสดงผลข้อมูลแบบเรียลไทม์ (Real-time Dashboards) การแสดงผลข้อมูลที่ต้องการการอัปเดตแบบเรียลไทม์ ตัวอย่างเช่น แดชบอร์ดการแสดงผลข้อมูลการผลิตหรือการวิเคราะห์ข้อมูล แดชบอร์ดที่แสดงผลข้อมูลการผลิตในโรงงาน แดชบอร์ดแจ้งเตือนเหตุฉุกเฉิน

รูปแบบการทำงาน

การเริ่มต้นเชื่อมต่อ การเชื่อมต่อ WebSocket จะเริ่มต้นด้วยการส่งคำร้องขอ HTTP แบบพิเศษ (HTTP handshake) จากไคลเอนต์ไปยังเซิร์ฟเวอร์ หากเซิร์ฟเวอร์ตอบสนองด้วยการยืนยันการเชื่อมต่อ (HTTP 101 Switching Protocols) การเชื่อมต่อ WebSocket จะถูกสร้างขึ้น

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

การจัดการกับข้อความ ข้อมูลที่ส่งผ่าน WebSocket จะถูกจัดการในรูปแบบของข้อความ (message) ซึ่งสามารถเป็นได้ทั้งข้อความ (text) และข้อมูลไบนารี (binary)

การปิดการเชื่อมต่อ การเชื่อมต่อ WebSocket สามารถถูกปิดได้ทั้งจากไคลเอนต์และเซิร์ฟเวอร์ โดยจะมีการส่งข้อความ close frame เพื่อยืนยันการปิดการเชื่อมต่อ

สร้างและใช้งาน Web Socket

1, สร้าง folder ชื่อว่า web-socket-demo 2. ทำการสร้าง nodejs project ผ่าน termial โดยใช้คำสั่ง ใน Folder

npm init -y

3. จะได้ไฟล์ชื่อว่า Package.json ใน folder 4. ทำการติดตั้ง Package ที่มีชื่อว่า ws สำหรับใช้งาน Web Socket

npm install ws --save5. สร้างไฟล์​ server.js ใน folder และเพิ่ม Code ด้างล่าง

const WebSocket = require("ws");
const server = new WebSocket.Server({ port: 8080 });

server.on("connection", (ws) => {
  console.log("Client connected");

  ws.on("message", (message) => {
    console.log(`Received: ${message} at ${new Date().toISOString()}`);
  });
  ws.on("close", () => {
    console.log("Client disconnected");
  });
});

console.log("WebSocket server is running on ws://localhost:8080");

1. สร้างไฟล์ client.js ใน folder และเพิ่ม Code ด้านล่าง

const WebSocket = require("ws");
const ws = new WebSocket("ws://localhost:8080");
ws.on("open", () => {
  console.log("Connected to server");
  setInterval(() => {
    const random = Math.floor(Math.random() * 100);
    ws.send(`Random number: ${random}`);
  }, 5000);
});
ws.on("message", (message) => {
  console.log(`Received from server: ${message}`);
});
ws.on("close", () => {
  console.log("Disconnected from server");
});

7. ทำการ Run Code server.js และ client.js แยกกัน (แยก Terminal)

node server.js

node client.js

หน้าจอการ Run Code

จาก Code server.js จะเป็น web socket server และ Code client.js จะทำหน้าที่เป็น web scoket client ที่จะทำการสุ่มตัวเลข 0-100 และจะส่งไปยัง server ทุกๆ 5 วินาที