Node.js คือ ตอนที่ 5 : การทำแอพแบบ Real-time ด้วย Socket.io

17มิ.ย. 2023 by รับทำแอพ สบายไอที
  1. ทำความเข้าใจเกี่ยวกับ WebSockets
  2. เบื้องต้นเกี่ยวกับ Socket.io
    2.1 การติดตั้ง
  3. ทำแอพแชท
    ขั้นตอนที่ 1: การตั้งค่าเซิร์ฟเวอร์
    ขั้นตอนที่ 2: การใช้เหตุการณ์ซ็อกเก็ต (Socket Events)
    ขั้นตอนที่ 3: การตั้งค่าไคลเอนต์
    ขั้นตอนที่ 4: ให้บริการไคลเอนต์

ลักษณะเฉพาะอย่างหนึ่งของ Node.js คือความสามารถในการจัดการข้อมูลแบบเรียลไทม์และการสื่อสารแบบโต้ตอบ ซึ่งส่วนใหญ่ทำให้เกิดขึ้นได้ด้วยโปรโตคอล WebSocket แอปพลิเคชันตามเวลาจริงคือโปรแกรมที่ทำงานภายในกรอบเวลาที่ผู้ใช้สัมผัสได้ทันทีหรือเป็นปัจจุบัน แอปพลิเคชันแชท อัปเดตสด เกมที่มีผู้เล่นหลายคน เครื่องมือแก้ไขร่วมกันเป็นตัวอย่างบางส่วนของการทำแอพแบบเรียลไทม์

Socket.IO ซึ่งเป็นไลบรารี JavaScript ทำให้กระบวนการทำงานกับ WebSockets ง่ายขึ้นในระดับที่มีนัยสำคัญ ในบทความนี้ เราจะเจาะลึกขอบเขตของแอปพลิเคชันแบบเรียลไทม์ด้วยการทำแอพแชทอย่างง่ายโดยใช้ Socket.io ใน Node.js

1. ทำความเข้าใจเกี่ยวกับ WebSockets

ก่อนที่เราจะเจาะลึกถึง Socket.IO สิ่งสำคัญคือต้องเข้าใจว่า WebSockets คืออะไร WebSocket เป็นโปรโตคอลการสื่อสารที่ให้การสื่อสารแบบฟูลดูเพล็กซ์ระหว่างไคลเอนต์และเซิร์ฟเวอร์ผ่านการเชื่อมต่อแบบถาวร โปรโตคอลนี้เอาชนะข้อจำกัดของโปรโตคอล HTTP ทำให้สามารถถ่ายโอนข้อมูลแบบเรียลไทม์โดยมีเวลาแฝงต่ำ

2. เบื้องต้นเกี่ยวกับ Socket.io

Socket.IO เป็นไลบรารี JavaScript ที่เปิดใช้งานการสื่อสารตามเวลาจริง สองทิศทาง และตามเหตุการณ์ระหว่างเบราว์เซอร์และเซิร์ฟเวอร์ โดยหลักแล้วจะใช้โปรโตคอล WebSocket สำหรับการสื่อสารแบบเรียลไทม์ แต่สามารถถอยกลับไปใช้เทคนิคอื่นๆ สำหรับเว็บเบราว์เซอร์ที่ยังไม่รองรับ WebSockets

2.1 การติดตั้ง

หากต้องการใช้ Socket.IO ก่อนอื่นเราต้องติดตั้งผ่าน npm ซึ่งเป็นตัวจัดการแพ็กเกจเริ่มต้นสำหรับ Node.js

npm install socket.io

3. ทำแอพแชท

ตอนนี้มาดำดิ่งสู่การสร้างแอปพลิเคชันแชทของเรากัน แอพแชทที่เรียบง่ายนี้จะช่วยให้ผู้ใช้หลายคนสามารถเข้าร่วมและส่งข้อความหากันได้

ขั้นตอนที่ 1: การตั้งค่าเซิร์ฟเวอร์

ก่อนอื่น เราต้องตั้งค่าเซิร์ฟเวอร์ Node.js และรวม Socket.io สำหรับสิ่งนี้ เราจำเป็นต้องติดตั้ง Express และ Socket.io

npm install express socket.io

สร้างไฟล์ใหม่ server.js และเพิ่มโค้ดต่อไปนี้:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/', (req, res) => {
  res.send('Server is up and running');
});

server.listen(3000, () => {
  console.log('Listening on port 3000');
});

ในโค้ดนี้ เราได้เริ่มแอปพลิเคชัน Express ใหม่และส่งต่อไปยัง http โมดูล ในตัวของโหนด จากนั้น เราได้ส่งต่ออินสแตนซ์ของเซิร์ฟเวอร์เพื่อ socket.io เปิดใช้งานการสื่อสารตามเหตุการณ์แบบสองทิศทางแบบเรียลไทม์

ขั้นตอนที่ 2: การใช้เหตุการณ์ซ็อกเก็ต (Socket Events)

ต่อไป เราต้องใช้เหตุการณ์ Socket.io ที่จะจัดการการเชื่อมต่อไคลเอ็นต์และการเผยแพร่ข้อความ เราสามารถฟังการเชื่อมต่อบนเซิร์ฟเวอร์กับ connection เหตุการณ์และใช้ socket วัตถุเพื่อปล่อยและฟังเหตุการณ์ เพิ่มโค้ดต่อไปนี้ในserver.js ไฟล์ของคุณ:

io.on('connection', (socket) => {
  console.log('New user connected');

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });

  socket.on('message', (message) => {
    io.emit('message', message);
  });
});

ในโค้ดนี้ เรากำลังฟังเหตุการณ์ connection ซึ่งถูกเรียกใช้เมื่อใดก็ตามที่ไคลเอนต์ใหม่เชื่อมต่อกับเซิร์ฟเวอร์ เรายังฟัง disconnect และ message กิจกรรม เมื่อเซิร์ฟเวอร์ได้รับข้อความจากไคลเอ็นต์ เซิร์ฟเวอร์จะกระจายข้อความไปยังไคลเอนต์อื่นทั้งหมด

ขั้นตอนที่ 3: การตั้งค่าไคลเอนต์

ต่อไป เราต้องตั้งค่าแอปพลิเคชันไคลเอ็นต์ของเรา สร้าง index.html ไฟล์ในรูทโปรเจ็กต์ของคุณ Socket.IO ช่วยให้เราสามารถใช้ฟังก์ชันในส่วนหน้าโดยรวมสคริปต์ใน HTML ของเรา:

<!DOCTYPE html>
<html>
  <head>
    <title>Chat App</title>
  </head>
  <body>
    <input id="message" type="text" />
    <button id="send">Send</button>
    <ul id="messages"></ul>

    <script src="/socket.io/socket.io.js"></script>
    <script src="client.js"></script>
  </body>
</html>

จากนั้นสร้าง client.js ไฟล์:

const socket = io();

socket.on('message', (message) => {
  const li = document.createElement('li');
  li.textContent = message;
  document.querySelector('#messages').appendChild(li);
});

document.querySelector('#send').onclick = () => {
  const message = document.querySelector('#message').value;
  socket.emit('message', message);
};

ในโค้ดนี้ เรากำลังเริ่มต้นการเชื่อมต่อ Socket.IO และฟังเหตุการณ์ ‘message’ จากเซิร์ฟเวอร์ เมื่อได้รับเหตุการณ์ ‘message’ เราจะเพิ่มข้อความนั้นลงในรายการข้อความของเรา เมื่อคลิกปุ่ม ‘send’ เราจะส่งเหตุการณ์ ‘message’ ไปยังเซิร์ฟเวอร์ด้วยค่าของฟิลด์อินพุต

ขั้นตอนที่ 4: ให้บริการไคลเอนต์

เราจำเป็นต้องแก้ไขเซิร์ฟเวอร์ของเราเพื่อให้บริการแอปพลิเคชันไคลเอ็นต์ express.static เราสามารถใช้ ฟังก์ชันมิดเดิลแวร์ของ Express เพื่อให้บริการ index.html ไฟล์ คงที่ของเรา

const path = require('path');
//...

app.use(express.static(path.join(__dirname, '.')));

//...

ตอนนี้ หากคุณเริ่มต้นเซิร์ฟเวอร์ของคุณ ( node server.js) และนำทางไป localhost:3000 ยังเบราว์เซอร์ของคุณ คุณสามารถส่งและรับข้อความแบบเรียลไทม์ได้

นี่คือตัวอย่างพื้นฐานของแอปพลิเคชันแชท คุณสามารถขยายแอปพลิเคชันนี้ด้วยคุณลักษณะต่างๆ เช่น การแพร่ข้อความไปยังผู้ใช้ที่เชื่อมต่อเมื่อมีคนเชื่อมต่อหรือยกเลิกการเชื่อมต่อ เพิ่มการรองรับชื่อเล่น สร้าง “rooms” ที่ผู้ใช้สามารถสนทนาเป็นกลุ่ม และอื่นๆ

ในบทช่วยสอนนี้ เราได้สาธิตวิธีทำแอพแชทแบบเรียลไทม์อย่างง่ายโดยใช้ Socket.IO ใน Node.js แอปพลิเคชันนี้เป็นเพียงการขีดข่วนพื้นผิวของสิ่งที่เป็นไปได้ด้วยเทคโนโลยีเว็บแบบเรียลไทม์ ด้วย Node.js และ Socket.IO คุณสามารถทำแอพเรียลไทม์ที่มีประสิทธิภาพอย่างไม่น่าเชื่อได้อย่างง่ายดาย

โปรดจำไว้ว่าการฝึกฝนเป็นสิ่งสำคัญในการเสริมสร้างทักษะและความรู้ใหม่ ดังนั้น ให้พิจารณาทำแอพแบบเรียลไทม์เพิ่มเติมเพื่อเสริมสร้างความเข้าใจของคุณเกี่ยวกับ Socket.IO, WebSocket และการพัฒนาแอปพลิเคชันแบบเรียลไทม์

Node.js คืออะไร

Node.js คือ ตอนที่ 4 : การใช้งานฐานข้อมูล (Databases)

Node.js คือ ตอนที่ 6 : การ Deployment และประสิทธิภาพ (Performance)