เขียนเว็บตรวจสอบสถานะของ Switch, Server, IP แบบเรียลไทม์ Realtime ด้วย NodeJS, Socket.IO, ReactJS
รอยไถ พัฒนา รอยไถ พัฒนา
4.33K subscribers
2,069 views
65

 Published On Aug 2, 2023

สวัสดีครับ ก่อนอื่นผมก็ต้องขอขอบพระคุณมากๆ เลยนะครับที่ให้เกียรติเข้ามารับชมช่อง "รอยไถ พัฒนา" @roitai-dev ‪@roitai-dev‬ ช่องเกษตรอินทรีย์นะครับ

/*-------SETUP SERVER-------*/
npm init -y
npm install express socket.io ping nodemon

/*-------SETUP CLIENT-------*/
npx create-react-app client
npm install socket.io-client

URL Socket.IO สำหรับศึกษาเพิ่มเติม
https://socket.io/
https://www.npmjs.com/package/socket....

/*------- CSS ------*/
.status-circle {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 5px;
}

.up {
background-color: green;
}

.down {
background-color: red;
}
/*------- CSS ------*/


ในคลิปนี้ เราจะเขียนเว็บไซต์ แสดงวิธีดูสถานะของ Switch แบบเรียลไทม์ด้วย NodeJS, ExpressJS, WebSocket - Socket.IO และ ReactJS เราจะใช้ NodeJS เพื่อสร้างเซิร์ฟเวอร์ที่รับการ Ping จาก IP ของ Switch จากนั้นเราจะใช้ ExpressJS เพื่อส่งการตอบกลับไปยังเซิร์ฟเวอร์

เราจะใช้ Socket.IO เพื่อส่งการตอบกลับแบบเรียลไทม์ไปยังฝั่ง ReactJS และเราจะใช้ ReactJS เพื่อแสดงผลสถานะของ Switch แบบเรียลไทม์ คลิปนี้เหมาะสำหรับผู้ที่ต้องการเรียนรู้วิธีดูสถานะของ Switch แบบเรียลไทม์ด้วย NodeJS, ExpressJS, Socket.IO และ ReactJS

คลิปนี้จะเริ่มด้วยการแนะนำ NodeJS, ExpressJS, Socket.IO และ ReactJS จากนั้นเราจะสร้างเซิร์ฟเวอร์ NodeJS ที่จะรับการ Ping จาก IP ของ Switch

จากนั้นเราจะสร้างแอป ReactJS ที่จะแสดงผลสถานะของ Switch แบบเรียลไทม์ สุดท้ายเราจะรวมแอป ReactJS เข้ากับเซิร์ฟเวอร์ NodeJS เพื่อให้เราสามารถดูสถานะของ Switch แบบเรียลไทม์ได้

สามารถนำไปประยุกต์ใช้ในการ ตรวจสอบระบบเครือข่าย IP Address ต่างๆ เช่น Switch, Server, Camera, CCTV เรียกได้ว่าอะไรที่สามารถ Ping ด้วย ไอพี Ip ได้ เราสามารถเขียนตรวจสอบได้หมดเลยนะครับ

คลิปนี้เหมาะสำหรับผู้ที่ต้องการเรียนรู้วิธีดูสถานะของ Switch แบบเรียลไทม์ด้วย การ Ping Check เช็ค IP Address ทางฝั่ง NodeJS, ExpressJS, Socket.IO และ ReactJS

คลิปนี้ยังเหมาะสำหรับผู้ที่ต้องการเรียนรู้เกี่ยวกับ NodeJS, ExpressJS, Socket.IO และ ReactJS นะครับ

ขอบพระคุณมากๆ เลยนะครับที่เขามารับชม
ถ้าถูกใจ สามารถร่วมบริจาคได้ตามกำลังศรัทธาเลยนะครับ

Donate
Promptpay พร้อมเพย์ : 0984106002
พงศ์พัฒน์

Support me:
https://www.buymeacoffee.com/tamphimai

#socketio
#fullstack
#nodejs

เช็คสถานะเซิฟเวอร์ Server up or down ตรวจสอบสถานะ Server Up, down
websocket, socketio, react, nodejs, expressjs

show more

Share/Embed