Implement real-time messaging with WebSocket - Server Load Balancer

WebSocket es un protocolo de red que proporciona un canal de comunicación full-duplex sobre una única conexión TCP. Crea una conexión persistente entre un cliente y un servidor, lo que permite a ambos enviar y recibir datos en cualquier momento. Esto evita la sobrecarga y la latencia de establecer conexiones nuevas de forma repetida, por lo que resulta más eficiente que el modelo tradicional de solicitud-respuesta HTTP. WebSocket se usa principalmente en aplicaciones que requieren comunicación en tiempo real. ALB admite el protocolo WebSocket de forma predeterminada.

Introducción a WebSocket

Por qué usar WebSocket

A medida que evolucionan las tecnologías web, las aplicaciones necesitan cada vez más que los servidores envíen datos en tiempo real para funciones como salas de chat en vivo y comentarios instantáneos. El método tradicional de sondeo (polling), donde el navegador del cliente envía solicitudes HTTP de manera repetida al servidor para obtener los datos más recientes, presenta desventajas importantes. Las solicitudes frecuentes con encabezados HTTP grandes y cargas útiles de datos pequeñas aumentan la carga del servidor y desperdician ancho de banda.

Para resolver estos problemas, HTML5 introdujo el protocolo WebSocket, que ofrece una solución más eficiente para la comunicación entre cliente y servidor. WebSocket admite comunicación full-duplex, es decir, el servidor y el cliente pueden enviar y recibir datos de forma simultánea. Esto permite que el servidor envíe datos nuevos al cliente de manera proactiva sin esperar una solicitud de sondeo. Este mecanismo de comunicación bidireccional y en tiempo real mejora la eficiencia de la transferencia de datos, reduce las solicitudes de red innecesarias y ahorra recursos del servidor y ancho de banda, lo que brinda una experiencia de usuario más fluida y receptiva.

Características principales de WebSocket

La comunicación comienza con un handshake TCP estándar de tres vías. Después, el cliente envía una solicitud HTTP especial conocida como handshake de actualización de protocolo. Una vez que este handshake se completa correctamente, la conexión cambia de HTTP a WebSocket. Toda la comunicación posterior entre el cliente y el servidor utiliza el protocolo WebSocket, lo que permite el intercambio bidireccional de datos sobre la misma conexión.

Cuando se establece una conexión WebSocket, esta permanece activa. Esta conexión persistente y de baja latencia permite una transferencia de datos continua y bidireccional, lo que mejora la eficiencia del intercambio de información.

WebSocket se comunica mediante tramas de datos que tienen su propio formato de protocolo de trama con encabezados concisos. Los datos se transmiten como texto o en formato binario. Este método reduce la sobrecarga del protocolo en las conexiones persistentes y hace que la interacción de red sea más eficiente. Además, ahorra recursos del servidor y ancho de banda, al tiempo que proporciona una experiencia interactiva en tiempo real más fluida.

Para obtener más información sobre el protocolo WebSocket, consulte la documentación oficial The WebSocket Protocol.

Casos de uso de WebSocket

WebSocket es ideal para aplicaciones que requieren comunicación bidireccional rápida y en tiempo real, como aplicaciones de IA, salas de chat en línea, sistemas de notificaciones en tiempo real, juegos multijugador en línea y fuentes de datos de mercado en tiempo real.

Escenario de ejemplo

Una empresa desea desplegar una aplicación de chat en línea basada en web en Alibaba Cloud. Los usuarios acceden al servicio de backend a través de un nombre de dominio para comunicarse en tiempo real. Al tratarse de una aplicación de mensajería instantánea, requiere baja latencia y una comunicación bidireccional eficiente y en tiempo real.

El servicio del sitio web de la empresa enfrenta desafíos de alta concurrencia y gestión de conexiones persistentes. A medida que crece el número de usuarios, el modelo HTTP tradicional no puede admitir muchos usuarios concurrentes en la comunicación en tiempo real, ya que cada interacción requiere una conexión nueva. Esto provoca un aumento drástico en la carga del servidor y un rendimiento deficiente.

En este escenario, el uso de ALB con el protocolo WebSocket gestiona de manera eficaz las conexiones persistentes bajo alta concurrencia. Desplegar la aplicación en un grupo de servidores y utilizar Redis para la sincronización de mensajes garantiza la alta disponibilidad. De este modo se obtiene una solución de mensajería en tiempo real confiable y eficiente para la aplicación de sala de chat en línea.

Notas de uso

Los listeners HTTP en una instancia de ALB admiten el protocolo WebSocket de forma predeterminada. ALB admite actualizaciones continuas (rolling updates), lo que significa que los cambios de configuración no interrumpen las conexiones persistentes existentes.

Tenga en cuenta lo siguiente:

Si la conexión entre una instancia de ALB y un servidor de backend utiliza una versión específica de HTTP, como HTTP/1.1, se recomienda que el servidor de backend también sea compatible con esa versión de HTTP.
El tiempo de espera predeterminado de la solicitud de conexión para un listener HTTP es de 60 segundos. Si no se intercambian datos entre ALB y un servidor de backend durante más de 60 segundos, ALB cierra la conexión.
- Si el tiempo de espera predeterminado de 60 segundos no es suficiente para sus necesidades, modifique el parámetro Connection Request Timeout del listener.
- Para mantener la conexión abierta, implemente un mecanismo keepalive que intercambie paquetes como mínimo una vez cada 60 segundos.

Requisitos previos

Se requiere una instancia de ALB orientada a Internet. Para obtener más información, consulte Create and manage an ALB instance.
Se requieren tres instancias ECS: ECS01, ECS02 y ECS03.
- ECS01 y ECS02 se utilizan para desplegar la aplicación WebSocket, mientras que ECS03 se usa para desplegar Redis.
- En este tutorial, todos los servidores ejecutan CentOS 7.9.
- Se recomienda colocar ECS01, ECS02 y ECS03 en el mismo security group. Si están en diferentes security groups, asegúrese de configurar reglas que permitan el tráfico en los puertos de comunicación necesarios entre los servidores.
Se requiere un nombre de dominio registrado con un registro ICP completado. Para obtener más información, consulte Register an Alibaba Cloud domain name y ICP filing.

Procedimiento

Paso 1: Desplegar los servicios

Debe desplegar Redis en la instancia ECS03 y la aplicación WebSocket en las instancias ECS01 y ECS02.

Este tema utiliza una sala de chat en línea sencilla basada en Python sobre CentOS 7.9 con fines de demostración. Este ejemplo es solo de referencia. En un entorno de producción, utilice su propia aplicación.

Desplegar Redis en ECS03

Inicie sesión en la instancia ECS03.

Copie y ejecute los siguientes comandos para instalar y configurar 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 los comandos se ejecutan sin errores y la salida muestra que el servicio Redis está en estado active (running), el despliegue y la configuración se completaron correctamente.

● 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

Desplegar WebSocket en ECS01

Inicie sesión en la instancia ECS01.
Ejecute sudo pip3 install flask flask-socketio flask-cors redis para instalar las dependencias.
Ejecute vi ECS01_ws.py y presione la tecla i para entrar al modo de edición.

Copie y pegue el siguiente código:

Código de ejemplo para el servicio de prueba

Nota

En la línea 13, reemplace la dirección IP en redis_url por la dirección IP de su servidor 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)

Presione la tecla Esc y luego introduzca :wq para guardar los cambios.
Ejecute el comando sudo python3 ECS01_ws.py para ejecutar el script.

Cuando aparezca la siguiente salida, la aplicación WebSocket se habrá iniciado en el puerto 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 la aplicación no se inicia, compruebe si el puerto ya está en uso o si copió los comandos o el código de forma incorrecta.

● 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

Desplegar WebSocket en ECS02

Inicie sesión en la instancia ECS02.
Ejecute sudo pip3 install flask flask-socketio flask-cors redis para instalar las dependencias.
Ejecute vi ECS02_ws.py y presione la tecla i para entrar al modo de edición.

Copie y pegue el siguiente código:

Código de ejemplo para el servicio de prueba

Nota

En la línea 13, reemplace la dirección IP en redis_url por la dirección IP de su servidor 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)

Presione la tecla Esc y luego introduzca :wq para guardar los cambios.
Ejecute el comando sudo python3 ECS02_ws.py para ejecutar el script.

Cuando aparezca la siguiente salida, la aplicación WebSocket se habrá iniciado en el puerto 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 la aplicación no se inicia, compruebe si el puerto ya está en uso o si copió los comandos o el código de forma incorrecta.

Paso 2: Configurar un grupo de servidores

Inicie sesión en la consola de ALB.
En la barra de navegación superior, seleccione la región donde se desplegó la instancia.
En el panel de navegación izquierdo, haga clic en Server Group.

Haga clic en Create Server Group. En la página Create Server Group, configure los siguientes parámetros, deje los demás con sus valores predeterminados y haga clic en Create.

Parámetro

Descripción

Server Group Type

Seleccione Server.

VPC

Seleccione la VPC donde se encuentran los servidores de backend ECS01 y ECS02.

Los servidores de backend deben estar en la misma VPC que la instancia de ALB.

En el cuadro de diálogo The server group is created, haga clic en Add Backend Server.
En la página Add Backend Server, seleccione ECS01 y ECS02, y agréguelos al grupo de servidores. Establezca su puerto en 5000, que es el puerto utilizado por la aplicación WebSocket en este tutorial.

Paso 3: Configurar un listener HTTP

Inicie sesión en la consola de ALB.
En la barra de navegación superior, seleccione la región donde se desplegó la instancia.
En el panel de navegación izquierdo, seleccione Instances.
En la página Instances, busque la instancia de destino y haga clic en Create Listener en la columna Actions.
En la página Configure Listener, configure los siguientes parámetros y deje los demás con sus valores predeterminados. Luego, haga clic en Next.

Parámetro

Descripción

Select Listener Protocol

Seleccione HTTP.

Listener Port

Establezca el puerto en 5000.
En la página Server Group, configure el siguiente parámetro y deje los demás con sus valores predeterminados. Luego, haga clic en Next.

Parámetro

Descripción

Server Group

Seleccione el grupo de servidores que creó.
En la página Confirm, revise la configuración y haga clic en Submit. Después, espere a que se cree el listener.

Paso 4: Configurar la resolución DNS

Para entornos de producción, se recomienda asignar un nombre de dominio personalizado al nombre de dominio de la instancia de ALB mediante la creación de un registro CNAME.

En el panel de navegación izquierdo, elija ALB > Instances.
En la página Instances, copie el nombre DNS de la instancia ALB creada.

Siga estos pasos para agregar un registro CNAME.

Nota

Si su nombre de dominio está registrado con un proveedor distinto de Alibaba Cloud, debe agregarlo a la consola de Alibaba Cloud DNS antes de poder configurar la resolución DNS. Para obtener más información, consulte Manage domain names. Si su nombre de dominio está registrado en Alibaba Cloud, continúe con los siguientes pasos.

Inicie sesión en la consola de Alibaba Cloud DNS.
En la página Public Zone, busque el nombre de dominio de destino y haga clic en Settings en la columna Operations.
En la página Settings, haga clic en Add Record.

En el panel Add Record, configure el registro CNAME estableciendo los siguientes parámetros y luego haga clic en OK.

Parámetro	Descripción
Record Type	Seleccione CNAME en la lista desplegable.
Hostname	El prefijo de su nombre de dominio. Este tutorial utiliza `@`. Nota Para usar un dominio raíz, establezca el nombre de host en `@`.
Query Source	Seleccione Default.
Record Value	Introduzca el nombre DNS de la instancia ALB que copió.
TTL	El tiempo de vida (TTL) es la duración durante la cual un registro DNS se almacena en caché en un servidor DNS. Utilice el valor predeterminado.

Paso 5: Comprobar el resultado

Compruebe que ALB entrega mensajes en tiempo real a través de WebSocket. Para ello, abra la aplicación en un navegador desde dos computadoras distintas e intercambie mensajes.

En un navegador, vaya a http://<your-domain-name>:5000 para acceder a la aplicación de sala de chat en línea.

Se carga la interfaz Online Chat Room. El mensaje "You have entered the chat room!" aparece en el área de mensajes del chat, lo que indica que la conexión WebSocket se estableció. La página contiene un área de configuración de nombre de usuario con un botón Set Username y un área de envío de mensajes con un botón Send.

Si abre las herramientas de desarrollador de su navegador, la pestaña Network muestra que el navegador se comunica mediante el protocolo WebSocket.

En el panel Network, establezca el filtro en websocket. Una solicitud WebSocket con un código de estado 101 indica que la actualización del protocolo se completó correctamente. El estado de la conexión es Pending, lo que significa que la conexión persistente de WebSocket se estableció y está activa.
Introduzca un nombre de usuario para el chat y haga clic en Set Username.
En cada computadora, introduzca varios mensajes de chat y haga clic en Send para probar la aplicación.

Ambos navegadores reciben los mensajes en tiempo real.

La aplicación Online Chat Room se desplegó correctamente. La página contiene un cuadro de entrada Username y un botón Set Username, un área de visualización de mensajes de chat y un cuadro de entrada de mensajes con un botón Send en la parte inferior. Varios usuarios, como User1 y User2, pueden mantener una conversación en tiempo real en la sala de chat.
Esto confirma que ALB proporciona mensajería en tiempo real y de alta disponibilidad a través de WebSocket.

Preguntas frecuentes

¿Cómo uso WebSocket Secure?

WebSocket Secure es la versión cifrada del protocolo WebSocket.

Los listeners HTTPS admiten WebSocket Secure de forma predeterminada. Para usar WebSocket Secure, seleccione HTTPS cuando configure el listener.

¿Se me cobra por usar WebSocket?

WebSocket y WebSocket Secure no generan cargos adicionales.

¿Qué regiones admiten WebSocket?

Todas las regiones que admiten ALB también admiten WebSocket y WebSocket Secure.

Referencias

Este tutorial demuestra cómo desplegar Redis en una instancia ECS para realizar pruebas. Sin embargo, un único servidor Redis representa un posible punto único de falla. Para entornos de producción, se recomienda utilizar Tair para garantizar la alta disponibilidad. Para obtener más información, consulte Quick start for Tair.

Parámetro	Descripción
Select Listener Protocol	Seleccione HTTP.
Listener Port	Establezca el puerto en 5000.

Parámetro	Descripción
Server Group	Seleccione el grupo de servidores que creó.