# 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 เพื่อยืนยันการปิดการเชื่อมต่อ

<figure><img src="/files/vxIJQWN5Od1WILhOHsTC" alt=""><figcaption></figcaption></figure>

## สร้างและใช้งาน 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 --save`5.  สร้างไฟล์​ server.js ใน folder และเพิ่ม Code ด้างล่าง

```javascript
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");
```

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

```javascript
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`

<figure><img src="/files/sOmVb6qZItefHMTCkFa7" alt=""><figcaption><p>หน้าจอการ Run Code</p></figcaption></figure>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aic-eec.com/iot-development-with-infineon-psoc-tm-6-and-bdh-platform/bdh-iot-connectivity/web-socket.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.