จัดการ websocket บน node js ด้วย libs ws #v6w47Sjo46–3

ติดตั้ง package ws: ก่อนอื่นคุณต้องติดตั้ง package ws ผ่าน npm ด้วยคำสั่ง

npm install ws

WS SERVER

สร้างไฟล์ wsserver.js

สร้าง WebSocket Server: เพื่อสร้าง WebSocket server ใช้คำสั่ง require เพื่อนำเข้า module ws และสร้าง instance ของ WebSocket.Server ดังนี้:

const WebSocket = require("ws");

สร้าง server instance ระบุพอร์ท ที่จะใช้ อันนี้เป็น 8080

const wss = new WebSocket.Server({ port: 8080 });

สร้าง websocket server และ เขียน event handler เพื่อรองรับ เวลา event เกิดขึ้น

wss.on("connection", (ws) => {
  console.log("Client connected");
  ws.send('Im am server');
  ws.on("close", () => {
    console.log("Client disconnected");
  });
  ws.on("error", (error) => {
    console.log("error:");
  });
  ws.on("message",(data)=> {
    console.log("received: %s", data);
  });
});

wss.on("connection", (ws) => { เมื่อมีการเชื่อมต่อเข้ามาใหม่ผ่าน WebSocket ให้ทำการเรียกฟังก์ชันที่ถูกนิยามข้างใน และส่ง WebSocket object (ws) เข้าไปให้เพื่อจัดการกับการสื่อสารกับ client ที่เชื่อมต่อเข้ามา

ws.on(“close”, () => { เมื่อการเชื่อมต่อกับ client ถูกปิด (disconnected) ให้ทำการเรียกฟังก์ชันที่ถูกนิยามข้างใน

ws.on("error", (error) => { หากเกิดข้อผิดพลาดในการเชื่อมต่อหรือการสื่อสารกับ client ให้ทำการเรียกฟังก์ชันที่ถูกนิยามข้างใน และส่ง error object เข้าไปในฟังก์ชัน

ws.on("message",(data)=>{ เมื่อมีข้อความถูกส่งมาจาก client ผ่าน WebSocket ให้ทำการเรียกฟังก์ชันที่ถูกนิยามข้างใน และรับข้อมูลที่ถูกส่งมาเป็น parameter ในฟังก์ชันสร้างไฟล์ wsclient.js

วิธีส่งข้อมูลผ่าน WebSocket: เพื่อส่งข้อมูลจากเซิร์ฟเวอร์ไปยัง clients สามารถใช้เมธอด send() ที่ WebSocket object ได้ เช่น:

ws.send('Im am server');

เมื่อ client เชื่อมต่อเข้ามา ตัว client object จะถูกเก็บแบบ Set<WebSocket> ใน wss.clients

วิธี broadcast ข้อมูล หรือ ส่งข้อมูลให้ทุก clients ที่เชื่อมต่ออยู่ทำได้โดยใช้ foreach เข้าถึง wss.clients สามารถใช้เมธอด send() ที่ WebSocket object ได้ เช่น:

wss.clients.forEach(async function each(client) {
  if (client.readyState === WebSocket.OPEN) {
    let res = await read(mbc, 0, 1);
    // console.log(res);
    client.send(JSON.stringify(res));
  }
});

เขียน function ทดสอบส่งข้อมูลให้ clients ทุก 1 วินาที

//wsserver.js
const WebSocket = require("ws");
const wss = new WebSocket.Server({ port: 8080 });

wss.on("connection", (ws) => {
  console.log("Client connected");
  ws.send('Im am server');
  ws.on("close", () => {
    console.log("Client disconnected");
  });
  ws.on("error", (error) => {
    console.log("error:");
  });
  ws.on("message", function message(data) {
    console.log("received: %s", data);
  });
});

setInterval(() => {
  wss.clients.forEach(async function each(client) {
    if (client.readyState === WebSocket.OPEN) {     
      client.send(new Date().toLocaleString());
    }
  });
}, 1000);

WS CLIENT

สร้างไฟล์ wsclient.js

import package ws

สร้าง client instance ด้วย new WebSocket(“ws://127.0.0.1:8080”);

“ws://” + ไอพีของเซิพเวอร์ + “:” + พอร์ทของเซิพเวอร์

wsc = new WebSocket("ws://127.0.0.1:8080");

สร้าง websocket client และ เขียน event handler เพื่อรองรับ เวลา event เกิดขึ้น

ws.on("open", function (info) {
  console.log("open:");
  ws.send("Im am client");
});
ws.on("close", (error) => {
  console.log("close:");
});
ws.on("error", (error) => {
  console.log("error:");
});
ws.on("message", function message(data) {
  console.log("received: %s", data);
});

ws.on("open", function (info) { เมื่อการเชื่อมต่อกับเซิร์ฟเวอร์ผ่าน WebSocket ถูกเปิดขึ้น ให้ทำการเรียกฟังก์ชันที่ถูกนิยามข้างใน และส่งข้อมูลที่เกี่ยวข้องกับการเชื่อมต่อเป็น parameter

วิธีส่งข้อมูลผ่าน WebSocket: เพื่อส่งข้อมูลจาก client ไปยัง เซิร์ฟเวอร์ สามารถใช้เมธอด send() ที่ WebSocket object ได้ เช่น:

 ws.send("Im am client");

//wsclient.js
const WebSocket = require("ws");
ws = new WebSocket("ws://127.0.0.1:8080");

ws.on("open", function (info) {
  console.log("open:");
  ws.send("Im am client");
});
ws.on("close", (error) => {
  console.log("close:");
});
ws.on("error", (error) => {
  console.log("error:");
});
ws.on("message", function message(data) {
  console.log("received: %s", data);
});

ทดสอบ run wsserver ด้วย คำสั่งnode wsserver.js ที่ terminal เปิด terminal ที่สองขึ้นมา run wsclient ด้วย คำสั่งnode wsclient.js ก็จะได้ผลลัพท์แบบนี้ เอาไปประยุกต์ สำหรับการส่งข้อมูล เรียลไทม์ต่อไป

received: Im am server
received: 8/17/2023, 1:47:47 PM
received: 8/17/2023, 1:47:48 PM
received: 8/17/2023, 1:47:49 PM
received: 8/17/2023, 1:47:50 PM
received: 8/17/2023, 1:47:51 PM
received: 8/17/2023, 1:47:52 PM