Use CLB and WebSocket for real-time messaging - Server Load Balancer

WebSocket est un protocole réseau qui offre un canal de communication bidirectionnel intégral sur une seule connexion TCP. Il établit une connexion persistante entre un client et un serveur, permettant aux deux parties d'envoyer et de recevoir des données de manière proactive. Cette conception réduit la surcharge et la latence liées à l'établissement fréquent de nouvelles connexions, ce qui le rend plus efficace que le modèle traditionnel de requête-réponse HTTP. WebSocket est principalement utilisé pour les applications nécessitant une communication en temps réel. Classic Load Balancer (CLB) prend en charge le protocole WebSocket par défaut.

Présentation de WebSocket

Pourquoi utiliser WebSocket

Avec l'évolution des technologies web, les applications exigent de plus en plus que les serveurs poussent des données en temps réel pour des fonctionnalités telles que les salons de discussion en direct et les commentaires instantanés. La méthode traditionnelle d'interrogation (polling), où le navigateur du client envoie répétitivement des requêtes HTTP au serveur pour récupérer les dernières données, présente des inconvénients majeurs. Les requêtes fréquentes, caractérisées par des en-têtes HTTP volumineux et des charges utiles de données réduites, augmentent la charge du serveur et gaspillent la bande passante.

Pour remédier à ces problèmes, HTML5 a introduit le protocole WebSocket, qui offre une solution plus efficace pour la communication client-serveur. WebSocket prend en charge la communication bidirectionnelle intégrale, ce qui signifie que le serveur et le client peuvent envoyer et recevoir des données simultanément. Cela permet au serveur de pousser proactivement de nouvelles données vers le client sans attendre une requête d'interrogation. Ce mécanisme de communication bidirectionnelle en temps réel améliore l'efficacité du transfert de données, réduit les requêtes réseau inutiles et économise les ressources serveur ainsi que la bande passante, offrant ainsi une expérience utilisateur plus fluide et réactive.

Principales caractéristiques de WebSocket

La communication commence par une poignée de main TCP standard en trois étapes. Le client envoie ensuite une requête HTTP spéciale, connue sous le nom de poignée de main de mise à niveau de protocole. Une fois cette poignée de main réussie, la connexion passe de HTTP à WebSocket. Toutes les communications ultérieures entre le client et le serveur utilisent le protocole WebSocket, permettant un échange de données bidirectionnel sur la même connexion.

Une fois qu'une connexion WebSocket est établie, elle reste active. Cette connexion persistante à faible latence permet un transfert de données continu et bidirectionnel, ce qui améliore l'efficacité des échanges de données.

WebSocket communique à l'aide de trames de données, qui possèdent leur propre format de protocole de trame avec des en-têtes concis. Les données peuvent être transmises sous forme de texte ou binaire. Cette méthode réduit la surcharge protocolaire sur les connexions persistantes, rendant l'interaction réseau plus efficace. Elle économise les ressources serveur et la bande passante tout en offrant une expérience interactive en temps réel plus fluide.

Pour plus d'informations sur le protocole WebSocket, consultez la documentation officielle The WebSocket Protocol.

Cas d'utilisation de WebSocket

WebSocket est idéal pour les applications nécessitant une communication bidirectionnelle rapide et en temps réel, telles que les applications d'IA, les salons de discussion en ligne, les systèmes de notification en temps réel, les jeux multijoueurs en ligne et les flux de données de marché en temps réel.

Scénario d'exemple

Une entreprise souhaite déployer une application de chat en ligne basée sur le web sur Alibaba Cloud. Les utilisateurs peuvent accéder au service backend via un nom de domaine pour une communication en temps réel. En tant qu'application de messagerie instantanée, elle nécessite une faible latence et une communication bidirectionnelle efficace et en temps réel.

Le service web de l'entreprise fait face à des défis liés à la forte concurrence et à la gestion des connexions persistantes. À mesure que le nombre d'utilisateurs augmente, le modèle HTTP traditionnel ne peut pas prendre en charge de nombreux utilisateurs simultanés dans la communication en temps réel, car chaque interaction nécessite une nouvelle connexion. Cela entraîne une augmentation brutale de la charge du serveur et une mauvaise performance.

Dans ce scénario, l'utilisation de CLB avec le protocole WebSocket gère efficacement les connexions persistantes sous forte concurrence. En déployant l'application WebSocket sur plusieurs serveurs backend dans un groupe de serveurs virtuels et en utilisant Redis pour la synchronisation des messages, le service atteint une haute disponibilité. Cela fournit une solution de messagerie en temps réel fiable et efficace pour l'application de chat en ligne.

Remarques d'utilisation

Les écouteurs HTTP sur CLB prennent en charge le protocole WebSocket par défaut. CLB prend en charge les mises à jour à chaud, ce qui signifie que les modifications de configuration n'affectent pas les connexions persistantes existantes.

Tenez compte des points suivants :

Si la connexion entre CLB et les serveurs backend utilise une version HTTP spécifique, telle que HTTP/1,1, un serveur web prenant en charge la même version HTTP doit être utilisé sur les serveurs backend.
Le délai d'expiration par défaut des requêtes de connexion pour un écouteur HTTP est de 60 secondes. Si aucun message n'est échangé entre CLB et un serveur backend pendant plus de 60 secondes, CLB ferme proactivement la connexion.
- Si le délai d'expiration par défaut de 60 secondes est insuffisant pour vos besoins, vous pouvez modifier le paramètre Connection Request Timeout de l'écouteur.
- Pour maintenir la connexion ouverte, vous devez mettre en œuvre un mécanisme de keepalive pour échanger des paquets au moins une fois toutes les 60 secondes.
Les écouteurs HTTP sur CLB prennent en charge le protocole WebSocket par défaut, et les écouteurs HTTPS prennent en charge le protocole WebSocket Secure (WSS) par défaut. Aucune configuration supplémentaire n'est requise.
Lorsque vous utilisez des écouteurs TCP, CLB ne fournit pas de prise en charge intégrée de WebSocket. Vous devez configurer WebSocket sur les serveurs backend. Les éléments de configuration des écouteurs TCP (algorithme de planification, persistance de session, limitation de bande passante et délai d'expiration de connexion) n'incluent pas d'options liées à WebSocket.
Lorsque vous configurez un port d'écoute, évitez les ports vulnérables tels que les ports 25, 135, 139, 444, 445, 5800 et 5900. Cette restriction est imposée par les réseaux des fournisseurs d'accès Internet (FAI), et non par CLB. La console CLB ne bloque pas la configuration de ces ports, mais certains réseaux de FAI bloquent le trafic sur ces ports.

Prérequis

Vous avez créé une instance Classic Load Balancer (CLB).
Trois instances ECS sont requises : ECS01, ECS02 et ECS03.
- ECS01 et ECS02 sont utilisés pour déployer l'application WebSocket, et ECS03 est utilisé pour déployer Redis.
- Dans ce tutoriel, tous les serveurs exécutent CentOS 7.9.
- Nous vous recommandons de placer ECS01, ECS02 et ECS03 dans le même groupe de sécurité. S'ils se trouvent dans des groupes de sécurité différents, assurez-vous de configurer des règles autorisant le trafic sur les ports de communication requis entre les serveurs.
Un nom de domaine enregistré avec un dossier ICP complet est requis. Pour plus d'informations, consultez Enregistrer un nom de domaine Alibaba Cloud et Dossier ICP.

Procédure

Étape 1 : Déployer les services

Vous devez déployer Redis sur votre instance ECS03 et l'application WebSocket sur vos instances ECS01 et ECS02.

Cette rubrique utilise un simple salon de discussion en ligne basé sur Python sur CentOS 7.9 à des fins de démonstration. Cet exemple est fourni à titre de référence uniquement. Dans un environnement de production, utilisez votre propre application.

Déployer Redis sur ECS03

Connectez-vous à l'instance ECS03.

Copiez et exécutez les commandes suivantes pour installer et configurer Redis.

# Install EPEL (Extra Packages for Enterprise Linux)
sudo yum install epel-release -y
# Install Redis
sudo yum install redis -y
# Start and enable the Redis service
sudo systemctl start redis
sudo systemctl enable redis
# Edit the Redis configuration file to allow remote connections
sudo sed -i 's/^bind 127.0.0.1$/bind 0.0.0.0/' /etc/redis.conf
sudo sed -i 's/^protected-mode yes/protected-mode no/' /etc/redis.conf
# Restart the Redis service for the changes to take effect
sudo systemctl restart redis
# Check the Redis status
sudo systemctl status redis

Si les commandes s'exécutent sans erreur et que la sortie indique que le service Redis est dans l'état active (running), le déploiement et la configuration ont réussi.

● redis.service - Redis persistent key-value database
   Loaded: loaded (/usr/lib/systemd/system/redis.service; enabled; vendor preset: disabled)
   Active: active (running) since ...
 Main PID: 12345 (redis-server)
   CGroup: /system.slice/redis.service
           └─12345 /usr/bin/redis-server 0.0.0.0:6379

Déployer WebSocket sur ECS01

Connectez-vous à l'instance ECS01.
Exécutez sudo pip3 install flask flask-socketio flask-cors redis pour installer les dépendances.
Exécutez vi ECS01_ws.py et appuyez sur la touche i pour entrer en mode édition.

Copiez et collez le code suivant :

Exemple de code pour le service de test

Remarque

À la ligne 13, remplacez l'adresse IP dans redis_url par l'adresse IP de votre serveur Redis (ECS03).

import os
import redis
from flask import Flask, render_template, request
from flask_cors import CORS
from flask_socketio import SocketIO, emit, disconnect
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
# Enable Cross-Origin Resource Sharing (CORS)
CORS(app)
# Configure Redis as the message queue and state store
redis_url = "redis://192.168.*.*:6379/0"  # Replace with the IP address of your Redis server
redis_client = redis.StrictRedis.from_url(redis_url)
# Set the log level to DEBUG for easier debugging
socketio = SocketIO(app, message_queue=redis_url, manage_session=True, logger=True, engineio_logger=True, cors_allowed_origins="*")
SESSION_PREFIX = "session:"
def set_session_data(session_id, key, value):
    redis_client.hset(f"{SESSION_PREFIX}{session_id}", key, value)
def get_session_data(session_id, key):
    return redis_client.hget(f"{SESSION_PREFIX}{session_id}", key)
def delete_session_data(session_id):
    redis_client.delete(f"{SESSION_PREFIX}{session_id}")
@app.route('/')
def index():
    return render_template('index.html')
@socketio.on('connect')
def handle_connect():
    try:
        session_id = request.sid  # Get the client's session ID
        print(f"Session {session_id} connected.")
        welcome_message = "You have entered the chat room!"
        emit('message', welcome_message)
        set_session_data(session_id, "username", '')  # Initialize the username as empty
    except Exception as e:
        print(f"Error during connection: {str(e)}")
@socketio.on('disconnect')
def handle_disconnect():
    try:
        session_id = request.sid
        username = get_session_data(session_id, "username")
        if username:
            username = username.decode()
            leave_message = f"{username} has left the chat room."
            emit('message', leave_message, broadcast=True)
            print(leave_message)
        delete_session_data(session_id)
        print(f"Session {session_id} disconnected.")
    except Exception as e:
        print(f"Error during disconnection: {str(e)}")
@socketio.on('set_username')
def handle_set_username(username):
    session_id = request.sid
    set_session_data(session_id, "username", username)
    print(f"Username for client {session_id} set to {username}")
    emit('message', f"Your username has been set to: {username}")
@socketio.on('message')
def handle_message(msg):
    session_id = request.sid
    username = get_session_data(session_id, "username")
    if username:
        username = username.decode()
        formatted_message = f"{username}: {msg}"
        emit('message', formatted_message, broadcast=True)
        print(formatted_message)
    else:
        warning_message = "Failed to send message: Please set a username first."
        emit('message', warning_message)
        print(warning_message)
if __name__ == '__main__':
    # Make sure the templates directory exists
    if not os.path.exists('templates'):
        os.makedirs('templates')
    # Use the Flask template (index.html)
    html_code = '''<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Room</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        h1 {
            color: #333;
        }
        .chat-container {
            width: 90%;
            max-width: 600px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .user-container, .message-container {
            display: flex;
            margin-bottom: 10px;
        }
        .user-container input, .message-container input {
            flex: 1;
            padding: 10px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .message-container {
            margin-top: 10px;
        }
        button {
            padding: 10px;
            background-color: #0056b3;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #004099;
        }
        #messages {
            border: 1px solid #ccc;
            padding: 10px;
            height: 300px;
            overflow-y: scroll;
            margin-bottom: 10px;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Online Chat Room</h1>
    <div class="chat-container">
        <div class="user-container">
            <input type="text" id="username" autocomplete="off" placeholder="Enter a username">
            <button onclick="setUsername()">Set Username</button>
        </div>
        <div id="messages"></div>
        <div class="message-container">
            <input type="text" id="myMessage" autocomplete="off" placeholder="Enter a message...">
            <button onclick="sendMessage()">Send</button>
        </div>
    </div>
    <script>
        var socket = io({ transports: ['websocket', 'polling', 'flashsocket'] });
        var usernameSet = false;
        socket.on('connect', function() {
            console.log("Connected to the server!");
            socket.on('message', function(msg){
                $('#messages').append($('<div>').text(msg));
                $('#messages').scrollTop($('#messages')[0].scrollHeight);
            });
        });
        function setUsername() {
            var username = $('#username').val();
            if (username) {
                socket.emit('set_username', username);
                usernameSet = true;  // Mark that username is set.
            } else {
                alert("Username cannot be empty!");
            }
        }
        function sendMessage() {
            if (usernameSet) {
                var message = $('#myMessage').val();
                if (message) {
                    socket.send(message);
                    $('#myMessage').val('');
                } else {
                    alert("Message cannot be empty!");
                }
            } else {
                alert("Please set a username first!");
            }
        }
    </script>
</body>
</html>
'''
    # Save the template to a file
    with open('templates/index.html', 'w') as file:
        file.write(html_code)
    socketio.run(app, host='0.0.0.0', port=5000)

Appuyez sur la touche Esc , puis saisissez :wq pour enregistrer les modifications.
Exécutez la commande sudo python3 ECS01_ws.py pour lancer le script.

Lorsque la sortie suivante s'affiche, l'application WebSocket a démarré sur le port 5000.

Server initialized for threading.
 * Serving Flask app 'ECS01_ws' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on http://192.168.*.*:5000/ (Press CTRL+C to quit)

Si l'application ne démarre pas, vérifiez si le port est déjà utilisé ou si vous avez copié les commandes ou le code de manière incorrecte.

● redis.service – Redis persistent key-value database
   Loaded: loaded (/usr/lib/systemd/system/redis.service; enabled; vendor preset: disabled)
  Drop-In: /etc/systemd/redis.service.d
           └─limit.conf
   Active: active (running) since Thu 2xxx xxx xxx xxx CST; 6s ago
  Process: 14715 ExecStop=/usr/libexec/redis-shutdown (code=exited, status=0/SUCCESS)
 Main PID: 14730 (redis-server)
   CGroup: /system.slice/redis.service
           └─14730 /usr/bin/redis-server 0.0.0.0:6379

Déployer WebSocket sur ECS02

Connectez-vous à l'instance ECS02.
Exécutez la commande sudo pip3 install flask flask-socketio flask-cors redis pour installer les dépendances.
Exécutez la commande vi ECS02_ws.py et appuyez sur la touche i pour passer en mode édition.

Copiez et collez le code suivant :

Exemple de code pour le service de test

Remarque

À la ligne 13, remplacez l'adresse IP dans redis_url par l'adresse IP de votre serveur Redis (ECS03).

import os
import redis
from flask import Flask, render_template, request
from flask_cors import CORS
from flask_socketio import SocketIO, emit, disconnect
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
# Enable Cross-Origin Resource Sharing (CORS)
CORS(app)
# Configure Redis as the message queue and state store
redis_url = "redis://192.168.*.*:6379/0"  # Replace with the IP address of your Redis server
redis_client = redis.StrictRedis.from_url(redis_url)
# Set the log level to DEBUG for easier debugging
socketio = SocketIO(app, message_queue=redis_url, manage_session=True, logger=True, engineio_logger=True, cors_allowed_origins="*")
SESSION_PREFIX = "session:"
def set_session_data(session_id, key, value):
    redis_client.hset(f"{SESSION_PREFIX}{session_id}", key, value)
def get_session_data(session_id, key):
    return redis_client.hget(f"{SESSION_PREFIX}{session_id}", key)
def delete_session_data(session_id):
    redis_client.delete(f"{SESSION_PREFIX}{session_id}")
@app.route('/')
def index():
    return render_template('index.html')
@socketio.on('connect')
def handle_connect():
    try:
        session_id = request.sid  # Get the client's session ID
        print(f"Session {session_id} connected.")
        welcome_message = "You have entered the chat room!"
        emit('message', welcome_message)
        set_session_data(session_id, "username", '')  # Initialize the username as empty
    except Exception as e:
        print(f"Error during connection: {str(e)}")
@socketio.on('disconnect')
def handle_disconnect():
    try:
        session_id = request.sid
        username = get_session_data(session_id, "username")
        if username:
            username = username.decode()
            leave_message = f"{username} has left the chat room."
            emit('message', leave_message, broadcast=True)
            print(leave_message)
        delete_session_data(session_id)
        print(f"Session {session_id} disconnected.")
    except Exception as e:
        print(f"Error during disconnection: {str(e)}")
@socketio.on('set_username')
def handle_set_username(username):
    session_id = request.sid
    set_session_data(session_id, "username", username)
    print(f"Username for client {session_id} set to {username}")
    emit('message', f"Your username has been set to: {username}")
@socketio.on('message')
def handle_message(msg):
    session_id = request.sid
    username = get_session_data(session_id, "username")
    if username:
        username = username.decode()
        formatted_message = f"{username}: {msg}"
        emit('message', formatted_message, broadcast=True)
        print(formatted_message)
    else:
        warning_message = "Failed to send message: Please set a username first."
        emit('message', warning_message)
        print(warning_message)
if __name__ == '__main__':
    # Make sure the templates directory exists
    if not os.path.exists('templates'):
        os.makedirs('templates')
    # Use the Flask template (index.html)
    html_code = '''<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Room</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        h1 {
            color: #333;
        }
        .chat-container {
            width: 90%;
            max-width: 600px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .user-container, .message-container {
            display: flex;
            margin-bottom: 10px;
        }
        .user-container input, .message-container input {
            flex: 1;
            padding: 10px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .message-container {
            margin-top: 10px;
        }
        button {
            padding: 10px;
            background-color: #0056b3;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #004099;
        }
        #messages {
            border: 1px solid #ccc;
            padding: 10px;
            height: 300px;
            overflow-y: scroll;
            margin-bottom: 10px;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Online Chat Room</h1>
    <div class="chat-container">
        <div class="user-container">
            <input type="text" id="username" autocomplete="off" placeholder="Enter a username">
            <button onclick="setUsername()">Set Username</button>
        </div>
        <div id="messages"></div>
        <div class="message-container">
            <input type="text" id="myMessage" autocomplete="off" placeholder="Enter a message...">
            <button onclick="sendMessage()">Send</button>
        </div>
    </div>
    <script>
        var socket = io({ transports: ['websocket', 'polling', 'flashsocket'] });
        var usernameSet = false;
        socket.on('connect', function() {
            console.log("Connected to the server!");
            socket.on('message', function(msg){
                $('#messages').append($('<div>').text(msg));
                $('#messages').scrollTop($('#messages')[0].scrollHeight);
            });
        });
        function setUsername() {
            var username = $('#username').val();
            if (username) {
                socket.emit('set_username', username);
                usernameSet = true;  // Mark that username is set.
            } else {
                alert("Username cannot be empty!");
            }
        }
        function sendMessage() {
            if (usernameSet) {
                var message = $('#myMessage').val();
                if (message) {
                    socket.send(message);
                    $('#myMessage').val('');
                } else {
                    alert("Message cannot be empty!");
                }
            } else {
                alert("Please set a username first!");
            }
        }
    </script>
</body>
</html>
'''
    # Save the template to a file
    with open('templates/index.html', 'w') as file:
        file.write(html_code)
    socketio.run(app, host='0.0.0.0', port=5000)

Appuyez sur la touche Esc, puis saisissez :wq pour enregistrer les modifications.
Exécutez la commande sudo python3 ECS02_ws.py pour lancer le script.

Lorsque la sortie suivante s'affiche, l'application WebSocket a démarré sur le port 5000.

Server initialized for threading.
 * Serving Flask app 'ECS02_ws' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on http://192.168.*.*:5000/ (Press CTRL+C to quit)

Si l'application ne démarre pas, vérifiez si le port est déjà utilisé ou si vous avez copié les commandes ou le code de manière incorrecte.

Étape 2 : Configurer un groupe de serveurs virtuels

Connectez-vous à la console Classic Load Balancer (CLB).
Dans la barre de navigation supérieure, sélectionnez la région où l'instance CLB est déployée.
Dans le volet de navigation de gauche, sélectionnez Instances. Sur la page Instances, localisez l'instance cible et cliquez sur son ID.

Sous l'onglet vServer groups, cliquez sur Create vServer Group. Sur la page Create vServer Group, configurez le paramètre suivant. Vous pouvez conserver les valeurs par défaut pour les autres paramètres ou les modifier selon vos besoins. Une fois la configuration terminée, cliquez sur Create et suivez les instructions à l'écran.

Parameter

Description

vServer Group Name

Saisissez RS1 comme nom du groupe de serveurs virtuels.

Sous l'onglet vServer groups, localisez le groupe de serveurs virtuels que vous avez créé et cliquez sur Modify dans la colonne Actions.
Sur la page Modify vServer Group, cliquez sur Add. Sur la page Servers, ajoutez les serveurs backend ECS01 et ECS02. Définissez le port des deux serveurs sur 5000, le port utilisé par l'application WebSocket.
Sur la page Modify vServer Group, sélectionnez les serveurs ajoutés et cliquez sur Save.

Étape 3 : Configurer un écouteur HTTP

Connectez-vous à la console Classic Load Balancer (CLB).
Dans la barre de navigation supérieure, sélectionnez la région où l'instance CLB est déployée.
Dans le volet de navigation de gauche, sélectionnez Instances.
Sur la page Instances, localisez l'instance cible et cliquez sur Configure Listener dans la colonne Actions.

Sur la page Protocol & Listener, configurez les paramètres suivants. Vous pouvez conserver les valeurs par défaut pour les autres paramètres ou les modifier selon vos besoins. Une fois la configuration terminée, cliquez sur Next.

Parameter

Description

Select Listener Protocol

Sélectionnez HTTP.

Listener Port

Dans cet exemple, le port est défini sur 5000.

Sur la page Backend Servers, configurez le paramètre suivant. Vous pouvez conserver les valeurs par défaut pour les autres paramètres ou les modifier selon vos besoins. Une fois la configuration terminée, cliquez sur Next.

Parameter

Description

Server Group

Sélectionnez le groupe de serveurs virtuels que vous avez créé.

Sur la page Health Check, vous pouvez conserver les valeurs par défaut pour les paramètres ou les modifier selon vos besoins. Cliquez ensuite sur Next.
Sur la page Confirm, vérifiez la configuration et cliquez sur Submit pour créer l'écouteur.

Étape 4 : Configurer la résolution DNS

Remarque

Pour les domaines non enregistrés auprès d'Alibaba Cloud, vous devez d'abord ajouter le domaine à la console Alibaba Cloud DNS avant de pouvoir configurer les enregistrements DNS.
Si votre instance CLB est une instance interne, vous devez d'abord lui associer une adresse IP élastique (EIP), puis créer un enregistrement A qui mappe le nom de domaine à l'EIP pour permettre l'accès public.

Dans le volet de navigation de gauche, choisissez CLB > Instances.
Sur la page Instances, sélectionnez l'instance cible et copiez son IP Address.

Effectuez les étapes suivantes pour ajouter un enregistrement A :

Connectez-vous à la console Alibaba Cloud DNS.
Sur la page Public Zone, localisez le nom de domaine cible et cliquez sur Settings dans la colonne Actions.
Sur la page Settings, cliquez sur Add Record.

Dans le panneau Add Record, configurez les paramètres suivants. Vous pouvez laisser les autres paramètres avec leurs valeurs par défaut ou les modifier selon vos besoins. Ensuite, cliquez sur OK.

Paramètre	Description
Record Type	Sélectionnez A dans la liste déroulante.
Hostname	Le préfixe de votre nom de domaine. Remarque Pour un domaine racine, définissez le hostname sur @.
Record Value	Saisissez l'adresse IP copiée de l'instance CLB.

Étape 5 : Vérifier le résultat

Préparez deux ordinateurs disposant d'adresses IP publiques différentes. Sur chaque ordinateur, utilisez un navigateur pour envoyer et afficher des messages de discussion afin de vérifier que CLB diffuse les messages en temps réel via WebSocket.

Dans un navigateur, accédez à http://<your-domain-name>:5000 pour accéder à l'application de salle de discussion en ligne.

L'interface Online Chat Room se charge. Le message « You have entered the chat room! » apparaît dans la zone des messages de discussion, ce qui indique que la connexion WebSocket est établie. La page contient une zone de définition du nom d'utilisateur avec un bouton Set Username et une zone d'envoi de messages avec un bouton Send.

Si vous ouvrez les outils de développement de votre navigateur, l'onglet Network montre que le navigateur communique à l'aide du protocole WebSocket.

Dans le panneau Network, définissez le filtre sur websocket. Une requête WebSocket avec un code d'état 101 indique que la mise à niveau du protocole a réussi. L'état de la connexion est Pending, ce qui signifie que la connexion WebSocket persistante est établie et active.
Saisissez un nom d'utilisateur pour la discussion et cliquez sur Set Username.
Sur chaque ordinateur, saisissez plusieurs messages de discussion et cliquez sur Send pour tester l'application.

Les deux navigateurs reçoivent les messages en temps réel.

L'application Online Chat Room est déployée avec succès. La page contient une zone de saisie Username et un bouton Set Username, une zone d'affichage des messages de discussion, ainsi qu'une zone de saisie de message avec un bouton Send en bas. Plusieurs utilisateurs, tels que User1 et User2, peuvent avoir une conversation en temps réel dans la salle de discussion.
Cela vérifie que l'utilisation de CLB avec WebSocket permet une messagerie en temps réel et hautement disponible.

Configuration WebSocket pour les écouteurs TCP

Les écouteurs TCP effectuent uniquement un transfert de couche 4 (couche transport). CLB transfère les connexions TCP directement vers les serveurs backend sans participer au traitement des protocoles de couche 7 (couche application). CLB ne fournit pas de mise à niveau intégrée du protocole WebSocket pour les écouteurs TCP. Les services backend doivent implémenter la négociation HTTP Upgrade pour effectuer la mise à niveau du protocole WebSocket.

Remarque

Cette configuration diffère de celle des écouteurs HTTP et HTTPS. Les écouteurs HTTP prennent en charge le protocole WebSocket (WS) par défaut, et les écouteurs HTTPS prennent en charge le protocole WebSocket Secure (WSS) par défaut. Aucune configuration supplémentaire n'est requise pour ces types d'écouteurs.

Étapes de configuration

Pour utiliser un service WebSocket avec un écouteur TCP :

Connectez-vous à la console Classic Load Balancer (CLB). Localisez l'instance CLB cible et cliquez sur Configure Listener dans la colonne Actions. Définissez le protocole frontend sur TCP et spécifiez le port d'écoute.
Déployez le service WebSocket sur les serveurs backend. Le service backend doit implémenter la négociation HTTP Upgrade pour effectuer la mise à niveau du protocole WebSocket. CLB transfère les flux TCP tels quels et ne traite pas les protocoles de couche 7.
CLB transfère toutes les connexions TCP entrantes directement vers les serveurs backend. Le serveur backend gère la négociation WebSocket et maintient la connexion WebSocket persistante.

Comparaison : Écouteurs TCP vs écouteurs HTTP et HTTPS

Type d'écouteur

Prise en charge de WebSocket

Configuration requise

Écouteur HTTP

Prend en charge WebSocket (WS) par défaut

Aucune configuration supplémentaire requise

Écouteur HTTPS

Prend en charge WebSocket Secure (WSS) par défaut

Aucune configuration supplémentaire requise

Écouteur TCP

Aucune prise en charge intégrée de WebSocket

Le backend doit implémenter la négociation HTTP Upgrade

Cas d'utilisation

Écouteur HTTP ou HTTPS — Recommandé pour les applications web standard utilisant le protocole WebSocket. CLB gère automatiquement la mise à niveau du protocole, ce qui simplifie la configuration.
Écouteur TCP — Adapté aux scénarios nécessitant une gestion personnalisée des protocoles au niveau de la couche application, ou lorsqu'un seul écouteur doit prendre en charge simultanément plusieurs protocoles de couche application.

FAQ

Comment utiliser le protocole WebSocket Secure ?

WebSocket Secure est la version chiffrée du protocole WebSocket.

Les écouteurs HTTPS prennent en charge le protocole WebSocket Secure par défaut. Pour utiliser le protocole WebSocket Secure, sélectionnez HTTPS lors de la configuration de l'écouteur.

L'utilisation de WebSocket entraîne-t-elle des frais ?

L'utilisation des protocoles WebSocket et WebSocket Secure n'entraîne aucun frais supplémentaire.

Quelles régions prennent en charge WebSocket ?

Toutes les régions qui prennent en charge CLB prennent également en charge WebSocket et WebSocket Secure.

Références

Ce tutoriel illustre le déploiement de Redis sur une instance ECS à des fins de test. Toutefois, un serveur Redis unique constitue un point de défaillance unique potentiel. Pour les environnements de production, nous vous recommandons d'utiliser Tair afin de garantir une haute disponibilité. Pour plus d'informations, consultez le Démarrage rapide pour Tair.