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

Implantar o Redis na ECS03

1. Faça logon na instância ECS03.

2. Copie e execute os comandos a seguir para instalar e configurar o 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. Se os comandos forem executados sem erros e a saída mostrar que o service do Redis está no estado active (running), a implantação e a configuração foram bem-sucedidas.

   ● 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
   

Implantar o WebSocket na ECS01

1. Faça logon na instância ECS01.

2. Execute sudo pip3 install flask flask-socketio flask-cors redis para instalar as dependências.

3. Execute vi ECS01_ws.py e pressione a tecla i para entrar no modo de edição.

4. Copie e cole o código a seguir:

   Código de exemplo para o service de teste

   Nota

   Na linha 13, substitua o endereço IP em redis_url pelo endereço IP do seu 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. Pressione a tecla Esc e insira :wq para salvar as alterações.

6. Execute o comando sudo python3 ECS01_ws.py para iniciar o script.

7. Quando a seguinte saída for exibida, a aplicação WebSocket terá iniciado na porta 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)
   

   Se a aplicação falhar ao iniciar, verifique se a porta já está em uso ou se você copiou os comandos ou o código incorretamente.

● 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

Implantar o WebSocket na ECS02

1. Faça logon na instância ECS02.

2. Execute sudo pip3 install flask flask-socketio flask-cors redis para instalar as dependências.

3. Execute vi ECS02_ws.py e pressione a tecla i para entrar no modo de edição.

4. Copie e cole o código a seguir:

   Código de exemplo para o service de teste

   Nota

   Na linha 13, substitua o endereço IP em redis_url pelo endereço IP do seu 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. Pressione a tecla Esc e insira :wq para salvar as alterações.

6. Execute o comando sudo python3 ECS02_ws.py para iniciar o script.

7. Quando a seguinte saída for exibida, a aplicação WebSocket terá iniciado na porta 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)
   

   Se a aplicação falhar ao iniciar, verifique se a porta já está em uso ou se você copiou os comandos ou o código incorretamente.

1. No painel de navegação à esquerda, escolha CLB > Instances.

2. Na página Instances, selecione a instância de destino e copie seu IP Address.

3. Siga as etapas abaixo para adicionar um registro A:

   1. Faça logon no console do Alibaba Cloud DNS.

   2. Na página Public Zone, localize o nome de domínio de destino e clique em Settings na coluna Actions.

   3. Na página Settings, clique em Add Record.

   4. No painel Add Record, configure os parâmetros a seguir. Mantenha os valores padrão para os outros parâmetros ou modifique-os conforme necessário. Em seguida, clique em OK.

      Parâmetro	Descrição
      Record Type	Selecione A na lista suspensa.
      Hostname	O prefixo do seu nome de domínio. Nota Para um domínio raiz, defina o hostname como @.
      Record Value	Insira o endereço IP copiado da instância CLB.