จัดการ 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