close

สร้าง WebSocket เซิร์ฟเวอร์พื้นฐานด้วย Node.js

แอ real-time ปพลิเคชันแชทคือตัวอย่างที่ยอดเยี่ยมของวิธีใช้ WebSocket with Node.js เพื่อสร้างประสบการณ์ผู้ใช้แบบโต้ตอบและมีส่วนร่วม ในบทความนี้ เราจะสำรวจวิธีสร้าง แอปพลิเคชันแช ท real-time โดยใช้ WebSocket และ Node.js

ขั้นตอนที่ 1: การตั้งค่าสภาพแวดล้อม

ขั้นแรก ตรวจสอบให้แน่ใจว่าคุณได้ Node.js ติดตั้งบนคอมพิวเตอร์ของคุณแล้ว สร้างโฟลเดอร์ใหม่สำหรับโครงการของคุณและนำทางไปยังโฟลเดอร์โดย ใช้ Terminal หรือ Command Prompt

ขั้นตอนที่ 2: การติดตั้ง WebSocket ไลบรารี

ก่อนหน้านี้ ใช้ไลบรารี "ws" เพื่อติดตั้ง WebSocket ไลบรารี:

npm install ws

ขั้นตอนที่ 3: สร้าง WebSocket เซิร์ฟเวอร์

สร้างไฟล์ชื่อ server.js  และเขียนรหัสต่อไปนี้:

// Import the WebSocket library  
const WebSocket = require('ws');  
  
// Create a WebSocket server  
const server = new WebSocket.Server({ port: 8080 });  
  
// List of connections(clients)  
const clients = new Set();  
  
// Handle new connections  
server.on('connection',(socket) => {  
    console.log('Client connected.');  
  
    // Add connection to the list  
    clients.add(socket);  
  
    // Handle incoming messages from the client  
    socket.on('message',(message) => {  
        // Send the message to all other connections  
        for(const client of clients) {  
            if(client !== socket) {  
                client.send(message);  
            }  
        }  
    });  
  
    // Handle connection close  
    socket.on('close',() => {  
        console.log('Client disconnected.');  
        // Remove the connection from the list  
        clients.delete(socket);  
    });  
});

ขั้นตอนที่ 4: การสร้างส่วนติดต่อผู้ใช้(ไคลเอนต์)

สร้างไฟล์ชื่อ index.html และเขียนรหัสต่อไปนี้:

<!DOCTYPE html>  
<html>  
<head>  
    <title>Real-Time Chat</title>  
</head>  
<body>  
    <input type="text" id="message" placeholder="Type a message">  
    <button onclick="send()">Send</button>  
    <div id="chat"></div>  
      
    <script>  
        const socket = new WebSocket('ws://localhost:8080');  
        socket.onmessage =(event) => {  
            const chat = document.getElementById('chat');  
            chat.innerHTML += '<p>' + event.data + '</p>';  
        };  
  
        function send() {  
            const messageInput = document.getElementById('message');  
            const message = messageInput.value;  
            socket.send(message);  
            messageInput.value = '';  
        }  
    </script>  
</body>  
</html>

ขั้นตอนที่ 5: เรียกใช้เซิร์ฟเวอร์และเปิดเบราว์เซอร์

ใน Terminal เรียกใช้คำสั่งต่อไปนี้เพื่อเริ่มต้น WebSocket เซิร์ฟเวอร์:

node server.js

เปิดเว็บเบราว์เซอร์และไปที่ " http://localhost:8080 " เพื่อใช้ real-time แอปพลิเคชันแชท

 

บทสรุป

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