Server Load Balancer:Gunakan CLB dan WebSocket untuk pengiriman pesan real-time

Terapkan Redis pada ECS03

1. Login ke instance ECS03.

2. Salin dan jalankan perintah berikut untuk menginstal dan mengonfigurasi 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. Jika perintah dijalankan tanpa error dan output menunjukkan layanan Redis berada dalam status active (running), maka penerapan dan konfigurasi berhasil.

   ● 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
   

Terapkan WebSocket pada ECS01

1. Login ke instance ECS01.

2. Jalankan sudo pip3 install flask flask-socketio flask-cors redis untuk menginstal dependensi.

3. Jalankan vi ECS01_ws.py dan tekan tombol i untuk memasuki mode edit.

4. Salin dan tempel kode berikut:

   Kode contoh untuk layanan uji coba

   Catatan

   Pada baris 13, ganti alamat IP dalam redis_url dengan alamat IP server Redis Anda (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. Tekan tombol Esc, lalu masukkan :wq untuk menyimpan perubahan.

6. Jalankan perintah sudo python3 ECS01_ws.py untuk menjalankan skrip.

7. Saat output berikut ditampilkan, aplikasi WebSocket telah berjalan pada 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)
   

   Jika aplikasi gagal berjalan, periksa apakah port tersebut sedang digunakan atau apakah Anda salah menyalin perintah atau kode.

● 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

Terapkan WebSocket pada ECS02

1. Login ke instance ECS02.

2. Jalankan sudo pip3 install flask flask-socketio flask-cors redis untuk menginstal dependensi.

3. Jalankan vi ECS02_ws.py dan tekan tombol i untuk memasuki mode edit.

4. Salin dan tempel kode berikut:

   Kode contoh untuk layanan uji coba

   Catatan

   Pada baris 13, ganti alamat IP dalam redis_url dengan alamat IP server Redis Anda (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. Tekan tombol Esc, lalu masukkan :wq untuk menyimpan perubahan.

6. Jalankan perintah sudo python3 ECS02_ws.py untuk menjalankan skrip.

7. Saat output berikut ditampilkan, aplikasi WebSocket telah berjalan pada 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)
   

   Jika aplikasi gagal berjalan, periksa apakah port tersebut sedang digunakan atau apakah Anda salah menyalin perintah atau kode.

1. Pada panel navigasi kiri, pilih CLB > Instances.

2. Pada halaman Instances, pilih instance target dan salin IP Address-nya.

3. Lakukan langkah-langkah berikut untuk menambahkan Rekaman A:

   1. Login ke Konsol Alibaba Cloud DNS.

   2. Pada halaman Public Zone, temukan nama domain target dan klik Settings pada kolom Actions.

   3. Pada halaman Settings, klik Add Record.

   4. Pada panel Add Record, konfigurasikan parameter berikut. Anda dapat membiarkan parameter lain dengan nilai default atau mengubahnya sesuai kebutuhan. Lalu, klik OK.

      Parameter	Description
      Record Type	Pilih A dari daftar drop-down.
      Hostname	Awalan nama domain Anda. Catatan Untuk domain root, atur hostname ke @.
      Record Value	Masukkan alamat IP instance CLB yang telah Anda salin.