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

Desplegar Redis en ECS03

1. Inicie sesión en la instancia ECS03.

2. 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
   

3. 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 realizaron 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

1. Inicie sesión en la instancia ECS01.

2. Ejecute sudo pip3 install flask flask-socketio flask-cors redis para instalar las dependencias.

3. Ejecute vi ECS01_ws.py y presione la tecla i para entrar en modo de edición.

4. 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 con 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)
   

5. Presione la tecla Esc y luego introduzca :wq para guardar los cambios.

6. Ejecute el comando sudo python3 ECS01_ws.py para ejecutar el script.

7. Cuando aparezca la siguiente salida, la aplicación WebSocket se ha 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 incorrectamente.

● 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

1. Inicie sesión en la instancia ECS02.

2. Ejecute sudo pip3 install flask flask-socketio flask-cors redis para instalar las dependencias.

3. Ejecute vi ECS02_ws.py y presione la tecla i para entrar en modo de edición.

4. 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 con 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)
                     

5. Presione la tecla Esc y luego introduzca :wq para guardar los cambios.

6. Ejecute el comando sudo python3 ECS02_ws.py para ejecutar el script.

7. Cuando aparezca la siguiente salida, la aplicación WebSocket se ha 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 incorrectamente.

1. En el panel de navegación izquierdo, elija CLB > Instances.

2. En la página Instances, seleccione la instancia objetivo y copie su IP Address.

3. Realice los siguientes pasos para agregar un registro A:

   1. Inicie sesión en la consola de Alibaba Cloud DNS.

   2. En la página Public Zone, busque el nombre de dominio objetivo y haga clic en Settings en la columna Actions.

   3. En la página Settings, haga clic en Add Record.

   4. En el panel Add Record, configure los siguientes parámetros. Puede dejar otros parámetros con sus valores predeterminados o modificarlos según sea necesario. Luego, haga clic en OK.

      Parámetro	Descripción
      Record Type	Seleccione A en la lista desplegable.
      Hostname	El prefijo de su nombre de dominio. Nota Para un dominio raíz, establezca el hostname en @.
      Record Value	Introduzca la dirección IP copiada de la instancia CLB.