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

WebSocket adalah protokol jaringan yang menyediakan saluran komunikasi full-duplex melalui satu koneksi TCP. Protokol ini memungkinkan koneksi persisten antara klien dan server sehingga keduanya dapat secara proaktif mengirim dan menerima data. Desain ini mengurangi overhead dan latensi akibat pembuatan koneksi baru yang berulang, sehingga lebih efisien dibandingkan model request-response HTTP tradisional. WebSocket terutama digunakan untuk aplikasi yang memerlukan komunikasi real-time. Classic Load Balancer (CLB) mendukung protokol WebSocket secara default.

Pengenalan WebSocket

Mengapa menggunakan WebSocket

Seiring perkembangan teknologi web, aplikasi semakin membutuhkan kemampuan server untuk mendorong data secara real-time, seperti pada fitur ruang obrolan suara langsung dan komentar real-time. Metode polling tradisional—di mana browser klien berulang kali mengirim permintaan HTTP ke server untuk mengambil data terbaru—memiliki kelemahan signifikan. Permintaan yang sering dengan header HTTP besar namun muatan data kecil meningkatkan beban server dan memboroskan bandwidth.

Untuk mengatasi masalah tersebut, HTML5 memperkenalkan protokol WebSocket, yang menawarkan solusi lebih efisien untuk komunikasi klien-server. WebSocket mendukung komunikasi full-duplex, artinya server dan klien dapat mengirim serta menerima data secara bersamaan. Hal ini memungkinkan server mendorong data baru ke klien tanpa menunggu permintaan polling. Mekanisme komunikasi bi-directional dan real-time ini meningkatkan efisiensi transfer data, mengurangi permintaan jaringan yang tidak perlu, serta menghemat sumber daya server dan bandwidth, sehingga memberikan pengalaman pengguna yang lebih lancar dan responsif.

Fitur utama WebSocket

Komunikasi dimulai dengan handshake TCP tiga arah standar. Klien kemudian mengirim permintaan HTTP khusus, yang dikenal sebagai handshake upgrade protokol. Setelah handshake ini berhasil, koneksi beralih dari HTTP ke WebSocket. Seluruh komunikasi selanjutnya antara klien dan server menggunakan protokol WebSocket, memungkinkan pertukaran data bi-directional melalui koneksi yang sama.

Setelah koneksi WebSocket terbentuk, koneksi tersebut tetap aktif. Koneksi persisten dengan latensi rendah ini memungkinkan transfer data bi-directional yang berkelanjutan, sehingga meningkatkan efisiensi pertukaran data.

WebSocket berkomunikasi menggunakan frame data, yang memiliki format protokol frame sendiri dengan header ringkas. Data dapat dikirim dalam bentuk teks atau biner. Metode ini mengurangi overhead protokol pada koneksi persisten, sehingga interaksi jaringan menjadi lebih efisien. Hal ini menghemat sumber daya server dan bandwidth sekaligus memberikan pengalaman interaktif real-time yang lebih lancar.

Untuk informasi lebih lanjut tentang protokol WebSocket, lihat dokumentasi resmi The WebSocket Protocol.

Use case WebSocket

WebSocket ideal untuk aplikasi yang memerlukan komunikasi bi-directional real-time yang cepat, seperti aplikasi AI, ruang obrolan online, sistem notifikasi real-time, game online multipemain, dan feed data pasar real-time.

Skenario contoh

Sebuah perusahaan ingin menerapkan aplikasi obrolan online berbasis web di Alibaba Cloud. Pengguna dapat mengakses layanan backend melalui nama domain untuk berkomunikasi secara real-time. Sebagai aplikasi pesan instan, aplikasi ini memerlukan latensi rendah serta komunikasi bi-directional real-time yang efisien.

Layanan website perusahaan menghadapi tantangan konkurensi tinggi dan manajemen koneksi persisten. Seiring bertambahnya jumlah pengguna, model HTTP tradisional tidak mampu mendukung banyak pengguna konkuren dalam komunikasi real-time karena setiap interaksi memerlukan koneksi baru. Hal ini menyebabkan lonjakan beban server dan performa buruk.

Dalam skenario ini, penggunaan CLB dengan protokol WebSocket secara efektif mengelola koneksi persisten di bawah kondisi konkurensi tinggi. Dengan menerapkan aplikasi WebSocket pada beberapa server backend dalam kelompok vServer dan menggunakan Redis untuk sinkronisasi pesan, layanan mencapai ketersediaan tinggi. Solusi ini memberikan layanan pengiriman pesan real-time yang andal dan efisien untuk aplikasi obrolan online.

Catatan penggunaan

Pendengar HTTP pada CLB mendukung protokol WebSocket secara default. CLB mendukung pembaruan panas (hot updates), artinya perubahan konfigurasi tidak memengaruhi koneksi persisten yang sedang berjalan.

Perhatikan hal berikut:

Jika koneksi antara CLB dan server backend menggunakan versi HTTP tertentu, seperti HTTP/1.1, server web yang mendukung versi HTTP yang sama harus digunakan pada server backend.
Timeout permintaan koneksi default untuk pendengar HTTP adalah 60 detik. Jika tidak ada pertukaran pesan antara CLB dan server backend selama lebih dari 60 detik, CLB akan secara proaktif menutup koneksi tersebut.
- Jika timeout default 60 detik tidak mencukupi untuk kebutuhan Anda, Anda dapat mengubah Connection Request Timeout pada pendengar.
- Untuk menjaga koneksi tetap terbuka, Anda harus menerapkan mekanisme keepalive agar paket dipertukarkan minimal sekali setiap 60 detik.

Prasyarat

Anda telah membuat instance Classic Load Balancer (CLB).
Diperlukan tiga instance ECS: ECS01, ECS02, dan ECS03.
- ECS01 dan ECS02 digunakan untuk menerapkan aplikasi WebSocket, sedangkan ECS03 digunakan untuk menerapkan Redis.
- Dalam tutorial ini, semua server menjalankan CentOS 7.9.
- Kami menyarankan Anda menempatkan ECS01, ECS02, dan ECS03 dalam security group yang sama. Jika berada dalam security group berbeda, pastikan Anda mengonfigurasi aturan yang mengizinkan traffic pada port komunikasi yang diperlukan antar server.
Diperlukan nama domain terdaftar dengan Pendaftaran ICP yang telah lengkap. Untuk informasi lebih lanjut, lihat Daftarkan nama domain Alibaba Cloud dan Pendaftaran ICP.

Prosedur

Langkah 1: Terapkan layanan

Anda perlu menerapkan Redis pada instance ECS03 dan aplikasi WebSocket pada instance ECS01 serta ECS02.

Topik ini menggunakan ruang obrolan online sederhana berbasis Python pada CentOS 7.9 untuk tujuan demonstrasi. Contoh ini hanya sebagai referensi. Di lingkungan produksi, gunakan aplikasi Anda sendiri.

Terapkan Redis pada ECS03

Salin dan jalankan perintah berikut untuk menginstal dan mengonfigurasi Redis.

# Instal EPEL (Extra Packages for Enterprise Linux)
sudo yum install epel-release -y
# Instal Redis
sudo yum install redis -y
# Jalankan dan aktifkan layanan Redis
sudo systemctl start redis
sudo systemctl enable redis
# Edit file konfigurasi Redis agar mengizinkan koneksi remote
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 layanan Redis agar perubahan berlaku
sudo systemctl restart redis
# Periksa status Redis
sudo systemctl status redis

Jika perintah dijalankan tanpa error dan output menunjukkan layanan Redis 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

Login ke instance ECS01.
Jalankan sudo pip3 install flask flask-socketio flask-cors redis untuk menginstal dependensi.
Jalankan vi ECS01_ws.py dan tekan tombol i untuk masuk ke mode edit.

Salin dan tempel kode berikut:

Kode contoh untuk layanan uji coba

Catatan

Pada baris 13, ganti alamat IP di 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!'
# Aktifkan Cross-Origin Resource Sharing (CORS)
CORS(app)
# Konfigurasikan Redis sebagai antrian pesan dan penyimpanan status
redis_url = "redis://192.168.*.*:6379/0"  # Ganti dengan alamat IP server Redis Anda
redis_client = redis.StrictRedis.from_url(redis_url)
# Atur tingkat log ke DEBUG untuk mempermudah 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  # Dapatkan ID sesi client
        print(f"Sesi {session_id} terhubung.")
        welcome_message = "Anda telah memasuki ruang obrolan!"
        emit('message', welcome_message)
        set_session_data(session_id, "username", '')  # Inisialisasi username sebagai kosong
    except Exception as e:
        print(f"Error saat koneksi: {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} telah meninggalkan ruang obrolan."
            emit('message', leave_message, broadcast=True)
            print(leave_message)
        delete_session_data(session_id)
        print(f"Sesi {session_id} terputus.")
    except Exception as e:
        print(f"Error saat pemutusan: {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 untuk client {session_id} diatur menjadi {username}")
    emit('message', f"Username Anda telah diatur menjadi: {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 = "Gagal mengirim pesan: Harap atur username terlebih dahulu."
        emit('message', warning_message)
        print(warning_message)
if __name__ == '__main__':
    # Pastikan direktori templates tersedia
    if not os.path.exists('templates'):
        os.makedirs('templates')
    # Gunakan templat Flask (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>Ruang Obrolan</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>Ruang Obrolan Online</h1>
    <div class="chat-container">
        <div class="user-container">
            <input type="text" id="username" autocomplete="off" placeholder="Masukkan username">
            <button onclick="setUsername()">Set Username</button>
        </div>
        <div id="messages"></div>
        <div class="message-container">
            <input type="text" id="myMessage" autocomplete="off" placeholder="Masukkan pesan...">
            <button onclick="sendMessage()">Send</button>
        </div>
    </div>
    <script>
        var socket = io({ transports: ['websocket', 'polling', 'flashsocket'] });
        var usernameSet = false;
        socket.on('connect', function() {
            console.log("Terhubung ke 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;  // Tandai bahwa username telah diatur.
            } else {
                alert("Username tidak boleh kosong!");
            }
        }
        function sendMessage() {
            if (usernameSet) {
                var message = $('#myMessage').val();
                if (message) {
                    socket.send(message);
                    $('#myMessage').val('');
                } else {
                    alert("Pesan tidak boleh kosong!");
                }
            } else {
                alert("Harap atur username terlebih dahulu!");
            }
        }
    </script>
</body>
</html>
'''
    # Simpan templat ke file
    with open('templates/index.html', 'w') as file:
        file.write(html_code)
    socketio.run(app, host='0.0.0.0', port=5000)

Tekan tombol Esc, lalu ketik :wq untuk menyimpan perubahan.
Jalankan perintah sudo python3 ECS01_ws.py untuk menjalankan skrip.

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 dijalankan, 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

Login ke instance ECS02.
Jalankan sudo pip3 install flask flask-socketio flask-cors redis untuk menginstal dependensi.
Jalankan vi ECS02_ws.py dan tekan tombol i untuk masuk ke mode edit.

Salin dan tempel kode berikut:

Kode contoh untuk layanan uji coba

Catatan

Pada baris 13, ganti alamat IP di 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!'
# Aktifkan Cross-Origin Resource Sharing (CORS)
CORS(app)
# Konfigurasikan Redis sebagai antrian pesan dan penyimpanan status
redis_url = "redis://192.168.*.*:6379/0"  # Ganti dengan alamat IP server Redis Anda
redis_client = redis.StrictRedis.from_url(redis_url)
# Atur tingkat log ke DEBUG untuk mempermudah 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  # Dapatkan ID sesi client
        print(f"Sesi {session_id} terhubung.")
        welcome_message = "Anda telah memasuki ruang obrolan!"
        emit('message', welcome_message)
        set_session_data(session_id, "username", '')  # Inisialisasi username sebagai kosong
    except Exception as e:
        print(f"Error saat koneksi: {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} telah meninggalkan ruang obrolan."
            emit('message', leave_message, broadcast=True)
            print(leave_message)
        delete_session_data(session_id)
        print(f"Sesi {session_id} terputus.")
    except Exception as e:
        print(f"Error saat pemutusan: {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 untuk client {session_id} diatur menjadi {username}")
    emit('message', f"Username Anda telah diatur menjadi: {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 = "Gagal mengirim pesan: Harap atur username terlebih dahulu."
        emit('message', warning_message)
        print(warning_message)
if __name__ == '__main__':
    # Pastikan direktori templates tersedia
    if not os.path.exists('templates'):
        os.makedirs('templates')
    # Gunakan templat Flask (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>Ruang Obrolan</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>Ruang Obrolan Online</h1>
    <div class="chat-container">
        <div class="user-container">
            <input type="text" id="username" autocomplete="off" placeholder="Masukkan username">
            <button onclick="setUsername()">Set Username</button>
        </div>
        <div id="messages"></div>
        <div class="message-container">
            <input type="text" id="myMessage" autocomplete="off" placeholder="Masukkan pesan...">
            <button onclick="sendMessage()">Send</button>
        </div>
    </div>
    <script>
        var socket = io({ transports: ['websocket', 'polling', 'flashsocket'] });
        var usernameSet = false;
        socket.on('connect', function() {
            console.log("Terhubung ke 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;  // Tandai bahwa username telah diatur.
            } else {
                alert("Username tidak boleh kosong!");
            }
        }
        function sendMessage() {
            if (usernameSet) {
                var message = $('#myMessage').val();
                if (message) {
                    socket.send(message);
                    $('#myMessage').val('');
                } else {
                    alert("Pesan tidak boleh kosong!");
                }
            } else {
                alert("Harap atur username terlebih dahulu!");
            }
        }
    </script>
</body>
</html>
'''
    # Simpan templat ke file
    with open('templates/index.html', 'w') as file:
        file.write(html_code)
    socketio.run(app, host='0.0.0.0', port=5000)

Tekan tombol Esc, lalu ketik :wq untuk menyimpan perubahan.
Jalankan perintah sudo python3 ECS02_ws.py untuk menjalankan skrip.

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 dijalankan, periksa apakah port tersebut sedang digunakan atau apakah Anda salah menyalin perintah atau kode.

Langkah 2: Konfigurasikan kelompok vServer

Login ke Konsol Classic Load Balancer (CLB).
Di bilah navigasi atas, pilih wilayah tempat instance CLB diterapkan.
Di panel navigasi kiri, pilih Instances. Pada halaman Instances, temukan instance target dan klik ID-nya.
Di tab vServer groups, klik Create vServer Group. Pada halaman Create vServer Group, konfigurasikan parameter berikut. Anda dapat menggunakan nilai default untuk parameter lain atau mengubahnya sesuai kebutuhan. Setelah konfigurasi selesai, klik Create dan ikuti petunjuk di layar.

Parameter

Deskripsi

vServer Group Name

Masukkan RS1 sebagai nama kelompok vServer.
Di tab vServer groups, temukan kelompok vServer yang telah Anda buat dan klik Modify di kolom Actions.
Di halaman Modify vServer Group, klik Add. Di halaman Servers, tambahkan server backend ECS01 dan ECS02. Atur port kedua server ke 5000, yaitu port yang digunakan oleh aplikasi WebSocket.
Di halaman Modify vServer Group, pilih server yang telah ditambahkan dan klik Save.

Langkah 3: Konfigurasikan pendengar HTTP

Login ke Konsol Classic Load Balancer (CLB).
Di bilah navigasi atas, pilih wilayah tempat instance CLB diterapkan.
Di panel navigasi kiri, pilih Instances.
Di halaman Instances, temukan instance target dan klik Configure Listener di kolom Actions.
Di halaman Protocol & Listener, konfigurasikan parameter berikut. Anda dapat menggunakan nilai default untuk parameter lain atau mengubahnya sesuai kebutuhan. Setelah konfigurasi selesai, klik Next.

Parameter

Deskripsi

Select Listener Protocol

Pilih HTTP.

Listener Port

Dalam contoh ini, port diatur ke 5000.
Di halaman Backend Servers, konfigurasikan parameter berikut. Anda dapat menggunakan nilai default untuk parameter lain atau mengubahnya sesuai kebutuhan. Setelah konfigurasi selesai, klik Next.

Parameter

Deskripsi

Server Group

Pilih kelompok vServer yang telah Anda buat.
Di halaman Health Check, Anda dapat menggunakan nilai default untuk parameter atau mengubahnya sesuai kebutuhan. Lalu, klik Next.
Di halaman Confirm, tinjau konfigurasi dan klik Submit untuk membuat pendengar.

Langkah 4: Konfigurasikan resolusi DNS

Catatan

Untuk domain yang tidak didaftarkan di Alibaba Cloud, Anda harus terlebih dahulu menambahkan domain ke konsol Alibaba Cloud DNS sebelum dapat mengonfigurasi rekaman DNS.
Jika instance CLB Anda adalah instance akses internal, Anda harus terlebih dahulu mengaitkan alamat Elastic IP (EIP) dengannya, lalu membuat Rekaman A yang memetakan nama domain ke EIP agar dapat diakses publik.

Di panel navigasi kiri, pilih CLB > Instances.
Di halaman Instances, pilih instance target dan salin IP Address-nya.

Lakukan langkah-langkah berikut untuk menambahkan Rekaman A:

Login ke Konsol Alibaba Cloud DNS.
Di halaman Public Zone, temukan nama domain target dan klik Settings di kolom Actions.
Di halaman Settings, klik Add Record.

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

Parameter	Deskripsi
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 disalin.

Langkah 5: Verifikasi hasil

Siapkan dua komputer dengan alamat IP publik berbeda. Di masing-masing komputer, gunakan browser untuk mengirim dan melihat pesan obrolan guna memverifikasi bahwa CLB mengirimkan pesan secara real-time melalui WebSocket.

Di browser, buka http://<nama-domain-anda>:5000 untuk mengakses aplikasi ruang obrolan online.

Antarmuka Online Chat Room dimuat. Pesan "You have entered the chat room!" muncul di area pesan obrolan, yang menunjukkan bahwa koneksi WebSocket telah terbentuk. Halaman berisi area pengaturan username dengan tombol Set Username dan area pengiriman pesan dengan tombol Send.

Jika Anda membuka developer tools browser, tab Network menunjukkan bahwa browser berkomunikasi menggunakan protokol WebSocket.

Di panel Network, atur filter ke websocket. Permintaan WebSocket dengan kode status 101 menunjukkan bahwa upgrade protokol berhasil. Status koneksi adalah Pending, yang berarti koneksi WebSocket persisten telah terbentuk dan aktif.
Masukkan username untuk obrolan dan klik Set Username.
Di masing-masing komputer, masukkan beberapa pesan obrolan dan klik Send untuk menguji aplikasi.

Kedua browser menerima pesan secara real-time.

Aplikasi Ruang Obrolan Online berhasil diterapkan. Halaman berisi kotak input Username dan tombol Set Username, area tampilan pesan obrolan, serta kotak input pesan dengan tombol Send di bagian bawah. Beberapa pengguna, seperti User1 dan User2, dapat melakukan percakapan real-time di ruang obrolan.
Hal ini memverifikasi bahwa penggunaan CLB dengan WebSocket memungkinkan pengiriman pesan real-time dengan ketersediaan tinggi.

FAQ

Bagaimana cara menggunakan protokol WebSocket Secure?

WebSocket Secure adalah versi terenkripsi dari protokol WebSocket.

Pendengar HTTPS mendukung protokol WebSocket Secure secara default. Untuk menggunakan protokol WebSocket Secure, pilih HTTPS saat mengonfigurasi pendengar.

Apakah ada biaya tambahan untuk menggunakan WebSocket?

Tidak ada biaya tambahan untuk menggunakan protokol WebSocket dan WebSocket Secure.

Wilayah mana saja yang mendukung WebSocket?

Semua wilayah yang mendukung CLB juga mendukung WebSocket dan WebSocket Secure.

Referensi

Tutorial ini menunjukkan penerapan Redis pada instance ECS untuk pengujian. Namun, server Redis tunggal merupakan potensi single point of failure. Untuk lingkungan produksi, kami menyarankan Anda menggunakan Tair untuk memastikan ketersediaan tinggi. Untuk informasi lebih lanjut, lihat Quick start for Tair.

Parameter	Deskripsi
vServer Group Name	Masukkan RS1 sebagai nama kelompok vServer.

Parameter	Deskripsi
Select Listener Protocol	Pilih HTTP.
Listener Port	Dalam contoh ini, port diatur ke 5000.

Parameter	Deskripsi
Server Group	Pilih kelompok vServer yang telah Anda buat.