WebSockets et Socket.IO : communication en temps réel avec Node.js

La communication en temps réel est essentielle dans les applications modernes telles que les applications de chat, les jeux en ligne et les outils de collaboration en direct. Les WebSockets fournissent un canal de communication full-duplex sur une seule connexion TCP, permettant d'échanger des données entre le client et le serveur en temps réel. Cet article expliquera les WebSockets, leurs cas d'utilisation et comment les implémenter dans Node.js. De plus, nous plongerons dans Socket.IO, une bibliothèque populaire qui simplifie la communication WebSocket, ainsi que des exemples pratiques.

Dans cet article, nous aborderons :

1. Que sont les WebSockets ?
2. WebSockets vs HTTP : principales différences.
3. Configuration d'un serveur WebSocket dans Node.js.
4. Qu'est-ce que Socket.IO et pourquoi devriez-vous l'utiliser ?
5. Mise en place d'une application de chat en temps réel à l'aide de Socket.IO.
6. Cas d'utilisation pour WebSockets et Socket.IO.
7. Sécurisation des connexions WebSocket.

Que sont les WebSockets ?

WebSockets fournissent un protocole de communication bidirectionnel qui permet au serveur et au client d'envoyer des données à tout moment. Contrairement à HTTP, où le client initie toutes les communications et demande des données au serveur, les WebSockets permettent des connexions persistantes, permettant aux deux parties d'échanger des données en continu sans rétablir la connexion.

Principales caractéristiques :

• Faible latence : les WebSockets ont une surcharge inférieure à celle de HTTP, car la connexion reste ouverte, réduisant ainsi la latence.
• Full-Duplex : le serveur et le client peuvent envoyer et recevoir des données simultanément.
• Connexion persistante : Une fois établie, la connexion WebSocket reste ouverte, contrairement à HTTP, où chaque requête ouvre une nouvelle connexion.

WebSockets vs HTTP : principales différences

Bien que les deux protocoles fonctionnent sur TCP, ils présentent des différences significatives :

Node.js에서 WebSocket 서버 설정

WebSocket 서버를 생성하기 위해 Node.js는 WebSocket 서버를 생성하고 클라이언트와 통신을 설정할 수 있는 내장 ws 라이브러리를 제공합니다.

설치:

npm install ws

WebSocket 서버 예:

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

이 예에서는:

• 포트 8080에서 수신 대기하는 WebSocket 서버가 생성됩니다.
• 클라이언트가 연결되면 서버는 환영 메시지를 보내고 클라이언트의 메시지를 듣습니다.
• 서버는 클라이언트로부터 받은 메시지의 에코로 응답합니다.

클라이언트측 WebSocket:

클라이언트 측에서는 JavaScript를 사용하여 WebSocket 서버에 연결할 수 있습니다.

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

Socket.IO란 무엇이며 왜 사용해야 합니까?

Socket.IO는 다음을 제공하여 WebSocket 통신을 더 쉽게 만드는 라이브러리입니다.

• WebSocket이 지원되지 않는 경우 긴 폴링으로 자동 대체됩니다.
• 재연결 및 오류 처리 메커니즘이 내장되어 있습니다.
• 분할된 커뮤니케이션 채널을 허용하는 룸 및 네임스페이스를 지원합니다.

설치:

npm install socket.io

Socket.IO 서버 설정:

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

이 코드에서는:

• 기본 Express 서버가 생성되고, Socket.IO가 통합되어 실시간 통신을 처리합니다.
• 서버는 클라이언트 연결을 수신하고 전송된 모든 메시지에 응답합니다.

Socket.IO를 사용하여 실시간 채팅 애플리케이션 설정

Socket.IO를 사용하여 간단한 실시간 채팅 애플리케이션을 구축하여 그 성능을 입증해 보겠습니다.

서버 코드:

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

클라이언트 코드(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>

이 간단한 채팅 애플리케이션을 사용하면 여러 사용자가 실시간으로 연결하고 메시지를 교환할 수 있습니다. 한 사용자가 보낸 메시지는 서버에 연결된 다른 모든 사용자에게 방송됩니다.

WebSocket 및 Socket.IO 사용 사례

WebSocket과 Socket.IO는 다음을 포함하여 실시간 통신이 필요한 시나리오에 적합합니다.

• 채팅 애플리케이션: WebSocket 또는 Socket.IO를 통해 실시간 메시징이 가능합니다.
• 온라인 게임: 플레이어가 실시간으로 업데이트를 확인해야 하는 멀티플레이어 온라인 게임
• 공동 편집: Google Docs와 같은 애플리케이션은 WebSocket을 사용하여 여러 사용자가 동시에 문서를 편집할 수 있도록 합니다.
• 라이브 대시보드: 주식 시장, 스포츠 경기 결과 등을 대시보드에서 실시간 업데이트

WebSocket 연결 보안

HTTP와 마찬가지로 WebSocket 연결은 민감한 데이터를 보호하기 위해 보안을 유지해야 합니다. 이는 기본적으로 TLS(전송 계층 보안)를 통한 WebSocket인 wss://(WebSocket Secure)를 사용하여 수행할 수 있습니다.

TLS를 사용하여 WebSocket을 보호하는 단계:

1. 인증 기관(CA)에서 SSL 인증서를 받으세요.
2. ws:// 대신 wss://를 수신하도록 WebSocket 서버를 업데이트하세요.
3. NGINX 또는 다른 역방향 프록시를 구성하여 SSL을 종료하고 WebSocket 서버로 트래픽을 전달하세요.

NGINX 구성 예:

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";
    }
}

이렇게 하면 모든 WebSocket 트래픽이 암호화되어 도청 및 변조로부터 보호됩니다.

결론

WebSocket과 Socket.IO를 사용하면 클라이언트와 서버 간의 실시간 통신이 가능하며 이는 즉각적인 업데이트가 필요한 최신 애플리케이션에 필수적입니다. WebSocket 또는 Socket.IO 기반 솔루션을 구현하면 채팅 시스템, 협업 도구, 라이브 대시보드와 같은 반응성이 뛰어나고 효율적인 애플리케이션을 구축할 수 있습니다.

이 기사에서는 WebSocket의 기본 사항, Socket.IO 사용의 장점, Node.js에서 실시간 애플리케이션을 만드는 방법을 다루었습니다. 또한 전송 중 데이터 안전을 보장하기 위해 WebSocket 연결을 보호하는 방법을 살펴보았습니다.

이러한 기술을 익히면 강력하고 대화형이며 확장 가능한 웹 애플리케이션을 구축할 수 있는 수많은 가능성이 열립니다.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!