WebSockets 和 Socket.IO：與 Node.js 即時通信

채팅 앱, 온라인 게임, 실시간 협업 도구와 같은 최신 애플리케이션에서는 실시간 커뮤니케이션이 필수적입니다. WebSocket은 단일 TCP 연결을 통해 전이중 통신 채널을 제공하므로 클라이언트와 서버 간에 실시간으로 데이터를 교환할 수 있습니다. 이 기사에서는 WebSocket과 그 사용 사례, Node.js에서 구현하는 방법을 설명합니다. 추가적으로, WebSocket 통신을 단순화하는 인기 라이브러리인 Socket.IO와 실제 예제를 함께 살펴보겠습니다.

이 기사에서 다룰 내용은 다음과 같습니다.

1. 웹소켓이란 무엇인가요?
2. WebSocket과 HTTP: 주요 차이점
3. Node.js에서 WebSocket 서버 설정
4. Socket.IO는 무엇이고 왜 사용해야 하나요?
5. Socket.IO를 사용하여 실시간 채팅 애플리케이션을 설정합니다.
6. WebSocket 및 Socket.IO 사용 사례.
7. WebSocket 연결을 보호합니다.

WebSocket이란 무엇입니까?

WebSocket은 서버와 클라이언트가 언제든지 데이터를 보낼 수 있는 양방향 통신 프로토콜을 제공합니다. 클라이언트가 모든 통신을 시작하고 서버에서 데이터를 요청하는 HTTP와 달리 WebSocket은 지속적인 연결을 지원하므로 연결을 다시 설정하지 않고도 두 당사자가 지속적으로 데이터를 교환할 수 있습니다.

주요 특징:

• 낮은 대기 시간: WebSocket은 연결이 열린 상태로 유지되어 대기 시간이 줄어들기 때문에 HTTP에 비해 오버헤드가 낮습니다.
• 전이중: 서버와 클라이언트 모두 동시에 데이터를 보내고 받을 수 있습니다.
• 지속적 연결: 각 요청이 새 연결을 여는 HTTP와 달리 WebSocket 연결은 일단 설정된 후에는 열린 상태로 유지됩니다.

WebSocket과 HTTP: 주요 차이점

두 프로토콜 모두 TCP를 통해 실행되지만 상당한 차이점이 있습니다.

Feature	WebSockets	HTTP
Connection	Persistent, full-duplex	Stateless, new connection for each request
Directionality	Bi-directional (server and client communicate)	Client to server only (server responds)
Overhead	Low after connection establishment	Higher due to headers with every request
Use Case	Real-time applications (chats, games)	Traditional websites, API requests

특징 웹소켓 HTTP 연결 지속적, 전이중 상태 비저장, 각 요청에 대한 새로운 연결 방향성 양방향(서버와 클라이언트 통신) 클라이언트에서 서버로만(서버가 응답) 오버헤드 연결 설정 후 낮음 모든 요청의 헤더로 인해 더 높아짐 사용 사례 실시간 애플리케이션(채팅, 게임) 기존 웹사이트, API 요청

Setting Up a WebSocket Server in Node.js

To create a WebSocket server, Node.js provides a built-in ws library that allows you to create a WebSocket server and establish communication with clients.

Installation:

npm install ws

WebSocket Server Example:

const WebSocket = require('ws');

// Create a WebSocket server on port 8080
const wss = new WebSocket.Server({ port: 8080 });

// Listen for incoming connections
wss.on('connection', (ws) => {
    console.log('Client connected');

    // Send a message to the client
    ws.send('Welcome to the WebSocket server!');

    // Listen for messages from the client
    ws.on('message', (message) => {
        console.log(`Received: ${message}`);
        ws.send(`Echo: ${message}`);
    });

    // Handle connection closure
    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

console.log('WebSocket server running on ws://localhost:8080');

In this example:

• A WebSocket server is created that listens on port 8080.
• When a client connects, the server sends a welcome message and listens for messages from the client.
• The server responds with an echo of the message received from the client.

Client-Side WebSocket:

On the client side, you can connect to the WebSocket server using JavaScript:

const socket = new WebSocket('ws://localhost:8080');

// Event listener for when the connection is established
socket.addEventListener('open', (event) => {
    socket.send('Hello Server!');
});

// Listen for messages from the server
socket.addEventListener('message', (event) => {
    console.log(`Message from server: ${event.data}`);
});

What is Socket.IO, and Why Should You Use It?

Socket.IO is a library that makes WebSocket communication easier by providing:

• Automatic fallback to long polling if WebSockets aren’t supported.
• Built-in reconnection and error handling mechanisms.
• Support for rooms and namespaces, which allow for segmented communication channels.

Installation:

npm install socket.io

Setting Up a Socket.IO Server:

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);

// Listen for incoming connections
io.on('connection', (socket) => {
    console.log('New client connected');

    // Listen for messages from the client
    socket.on('message', (msg) => {
        console.log(`Message from client: ${msg}`);
        socket.emit('response', `Server received: ${msg}`);
    });

    // Handle disconnection
    socket.on('disconnect', () => {
        console.log('Client disconnected');
    });
});

// Start the server
server.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

In this code:

• A basic Express server is created, and Socket.IO is integrated to handle real-time communication.
• The server listens for client connections and responds to any messages sent.

Setting Up a Real-Time Chat Application Using Socket.IO

Let's build a simple real-time chat application using Socket.IO to demonstrate its power.

Server Code:

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.sendFile(__dirname + '/index.html');
});

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

    // Broadcast when a user sends a message
    socket.on('chat message', (msg) => {
        io.emit('chat message', msg);
    });

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

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

Client Code (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket.IO Chat</title>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
    <h1>Real-time Chat</h1>
    <ul id="messages"></ul>
    <form id="chatForm">
        <input id="message" autocomplete="off" /><button>Send</button>
    </form>

    <script>
        const socket = io();

        // Listen for incoming chat messages
        socket.on('chat message', (msg) => {
            const li = document.createElement('li');
            li.textContent = msg;
            document.getElementById('messages').appendChild(li);
        });

        // Send chat message
        const form = document.getElementById('chatForm');
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            const message = document.getElementById('message').value;
            socket.emit('chat message', message);
            document.getElementById('message').value = '';
        });
    </script>
</body>
</html>

This simple chat application allows multiple users to connect and exchange messages in real-time. Messages sent by one user are broadcast to all other users connected to the server.

Use Cases for WebSockets and Socket.IO

WebSockets and Socket.IO are perfect for scenarios requiring real-time communication, including:

• Chat Applications: Real-time messaging is made possible by WebSockets or Socket.IO.
• Online Gaming: Multiplayer online games where players need to see updates in real-time.
• Collaborative Editing: Applications like Google Docs use WebSockets to allow multiple users to edit documents simultaneously.
• Live Dashboards: Real-time updates in dashboards for stock markets, sports scores, etc.

Securing WebSocket Connections

Like HTTP, WebSocket connections should be secured to protect sensitive data. This can be done by using wss:// (WebSocket Secure), which is essentially WebSockets over TLS (Transport Layer Security).

Steps to Secure WebSocket with TLS:

1. Obtain an SSL Certificate from a Certificate Authority (CA).
2. Update WebSocket Server to listen on wss:// instead of ws://.
3. Configure NGINX or another reverse proxy to terminate the SSL and forward traffic to your WebSocket server.

Example NGINX configuration:

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /etc/ssl/certs/yourdomain.crt;
    ssl_certificate_key /etc/ssl/private/yourdomain.key;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

This ensures that all WebSocket traffic is encrypted, protecting it from eavesdropping and tampering.

Conclusion

WebSockets and Socket.IO enable real-time communication between clients and servers, which is essential for modern applications requiring instant updates. By implementing WebSocket or Socket.IO-based solutions, you can build responsive and efficient applications such as chat systems, collaborative tools, and live dashboards.

In this article, we've covered the basics of WebSockets, the advantages of using Socket.IO, and how to create real-time applications in Node.js. Additionally, we've explored how to secure WebSocket connections to ensure data safety during transmission.

Mastering these technologies will open up numerous possibilities for building powerful, interactive, and scalable web applications.

以上是WebSockets 和 Socket.IO：與 Node.js 即時通信的詳細內容。更多資訊請關注PHP中文網其他相關文章！