close

기본 WebSocket 서버 구축 Node.js

채팅 응용 프로그램은 대화식의 매력적인 사용자 경험을 만들기 위해 함께 real-time 활용하는 방법에 대한 훌륭한 예입니다. 이 기사에서는 및 를 사용하여 채팅 애플리케이션을 빌드하는 방법을 살펴봅니다. WebSocket 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