Gunakan WebSocket untuk mengaktifkan pesan real-time - Server Load Balancer

WebSocket adalah protokol komunikasi yang mendukung komunikasi full-duplex melalui satu koneksi TCP. Protokol ini dirancang untuk membangun komunikasi dua arah antara klien dan server melalui koneksi persisten. WebSocket memiliki overhead lebih rendah dan mendukung latensi jaringan lebih kecil karena koneksi tidak sering dibuat atau ditutup. Dibandingkan dengan protokol HTTP tradisional berbasis permintaan-respons, WebSocket menawarkan efisiensi lebih tinggi untuk interaksi real-time. WebSocket cocok untuk skenario yang memerlukan komunikasi real-time. Application Load Balancer (ALB) mendukung WebSocket secara default.

Pengenalan WebSocket

Mengapa WebSocket?

Dengan perkembangan teknologi internet yang pesat, aplikasi web semakin beragam. Beberapa skenario seperti obrolan siaran langsung dan komentar langsung memerlukan push data real-time dari sisi server. Dalam solusi tradisional, algoritma round-robin digunakan untuk memulai permintaan HTTP dari browser klien ke server pada interval tetap, misalnya setiap 1 detik. Server kemudian mengembalikan data terbaru ke klien. Namun, solusi ini memiliki kelemahan. Klien harus sering memulai permintaan, yang mencakup header HTTP besar namun informasi berguna yang lebih sedikit. Permintaan tersebut tidak hanya meningkatkan beban server tetapi juga menyebabkan pemborosan bandwidth yang signifikan.

Untuk mengatasi masalah ini, HTML5 mengadopsi protokol WebSocket, yang membangun komunikasi lebih efisien antara klien dan server. WebSocket mendukung komunikasi full-duplex yang memungkinkan komunikasi dua arah simultan antara klien dan server. Ini memungkinkan server untuk secara proaktif mendorong data terbaru ke klien tanpa perlu polling dari sisi klien. Dengan permintaan yang tidak perlu lebih sedikit, komunikasi dua arah secara signifikan meningkatkan efisiensi pertukaran data dan mengurangi konsumsi sumber daya server serta bandwidth, sambil memberikan interaksi real-time yang lebih lancar bagi pengguna.

Karakteristik WebSocket

Sebelum koneksi WebSocket dapat dibentuk, klien dan server harus menyelesaikan jabat tangan tiga arah TCP dan permintaan HTTP khusus, juga dikenal sebagai jabat tangan untuk meningkatkan koneksi HTTP menjadi koneksi WebSocket. Selama peningkatan, klien dan server berkomunikasi melalui WebSocket, bukan HTTP. Komunikasi dua arah dapat dilakukan melalui koneksi WebSocket yang sama.

Setelah koneksi WebSocket dibentuk, ia tetap terbuka untuk memungkinkan komunikasi dua arah. WebSocket tidak memerlukan koneksi baru atau menunggu respons untuk setiap putaran pertukaran data. Koneksi persisten dengan latensi rendah yang dibentuk melalui WebSocket secara signifikan meningkatkan efisiensi pertukaran data.

WebSocket bertukar data antara klien dan server dalam bentuk frame data. Pesan WebSocket memerlukan header lebih kecil dan dapat dipertukarkan sebagai teks atau data biner. Jenis komunikasi ini mengurangi overhead pada koneksi persisten dan meningkatkan efisiensi pertukaran data. Ini membutuhkan lebih sedikit sumber daya server dan bandwidth sambil memberikan interaksi real-time berperforma tinggi.

Untuk informasi lebih lanjut tentang WebSocket, lihat Protokol WebSocket.

Skema Penggunaan

WebSocket cocok untuk skenario yang memerlukan komunikasi instan atau real-time dua arah, seperti aplikasi AI, ruang obrolan online, sistem notifikasi real-time, game online multipemain, dan push pesan real-time.

Contoh

Sebuah perusahaan menerapkan aplikasi obrolan online di Alibaba Cloud. Pengguna dapat mengunjungi nama domain untuk mengakses server backend, di mana mereka dapat saling berinteraksi. Aplikasi ini memerlukan komunikasi instan untuk mendukung pertukaran data dua arah, real-time, dan efisien dengan latensi rendah antar pengguna.

Konkurensi tinggi dan manajemen koneksi persisten menjadi tantangan. Seiring dengan meningkatnya jumlah pengguna, model HTTP tradisional tidak lagi dapat mendukung komunikasi real-time simultan untuk sejumlah besar pengguna. Setiap putaran pertukaran data memerlukan koneksi baru. Model ini sangat meningkatkan beban pada server dan menurunkan performa server.

Dalam skenario ini, perusahaan dapat menggunakan ALB bersama dengan WebSocket untuk mengelola koneksi persisten dan menjaga konkurensi tinggi. Perusahaan dapat menerapkan aplikasi WebSocket di beberapa server backend dan menggunakan Redis untuk menyinkronkan pesan. Solusi ini memastikan ketersediaan layanan tinggi dan memungkinkan push pesan yang andal, efisien, dan real-time untuk ruang obrolan online.

Catatan Penggunaan

Listener HTTP dari ALB mendukung WebSocket secara default. Selain itu, ALB mendukung pembaruan bergulir. Perubahan konfigurasi tidak mempengaruhi koneksi persisten yang ada.

Saat menggunakan ALB, perhatikan hal-hal berikut:

Jika Anda ingin membentuk koneksi antara ALB dan server backend melalui versi HTTP tertentu, seperti HTTP/1.1, kami sarankan Anda menggunakan server web yang mendukung versi HTTP sebagai server backend.
Periode timeout default listener HTTP adalah 60 detik. Jika ALB tidak bertukar data dengan server backend selama 60 detik, koneksi akan ditutup.
- Anda dapat mengubah nilai parameter Connection Request Timeout pada listener HTTP untuk menetapkan periode timeout ke nilai yang diinginkan.
- Untuk mempertahankan koneksi, Anda harus menggunakan mekanisme keepalive untuk bertukar paket antara ALB dan server backend setiap 60 detik.

Prasyarat

Instance ALB yang menghadap Internet telah dibuat. Untuk informasi lebih lanjut, lihat Buat dan Kelola Instance ALB.
Tiga instance Elastic Compute Service (ECS) telah dibuat. Dalam contoh ini, instance ECS diberi nama ECS01, ECS02, dan ECS03.
- Aplikasi WebSocket diterapkan pada ECS01 dan ECS02. Redis diterapkan pada ECS03.
- Dalam contoh ini, semua instance ECS menggunakan sistem operasi CentOS 7.9.
- Kami sarankan Anda menambahkan ECS01, ECS02, dan ECS03 ke grup keamanan yang sama. Jika Anda menambahkan instance ECS ke grup keamanan yang berbeda, Anda harus mengizinkan akses ke port komunikasi dari satu sama lain.
Nama domain telah didaftarkan dan nomor Penyedia Konten Internet (ICP) telah diperoleh untuk nama domain tersebut. Untuk informasi lebih lanjut, lihat Daftarkan Nama Domain Generik dan Proses Pendaftaran ICP.

Prosedur

Langkah 1: Terapkan aplikasi

Terapkan Redis pada ECS03 dan aplikasi WebSocket pada ECS01 dan ECS02.

Contoh berikut menunjukkan cara menerapkan ruang obrolan online uji. Dalam contoh ini, instance ECS menggunakan sistem operasi CentOS 7.9. Contoh ini hanya untuk referensi. Sesuaikan konfigurasi untuk program dan aplikasi Anda.

Terapkan Redis pada ECS03

Masuk ke ECS03.

Jalankan perintah berikut pada ECS03 untuk menerapkan dan mengonfigurasi Redis:

# Instal Extra Packages for Enterprise Linux (EPEL)
sudo yum install epel-release -y

# Instal Redis
sudo yum install redis -y

# Mulai dan aktifkan Redis
sudo systemctl start redis
sudo systemctl enable redis

# Periksa dan modifikasi file konfigurasi Redis untuk mengizinkan koneksi jarak jauh
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

# Mulai ulang Redis untuk menerapkan modifikasi konfigurasi
sudo systemctl restart redis

# Periksa apakah Redis sedang berjalan
sudo systemctl status redis

Jika perintah tidak melaporkan kesalahan dan output menunjukkan bahwa Redis dalam keadaan active (running), Redis telah diterapkan dan konfigurasi telah diterapkan, seperti yang ditunjukkan pada gambar berikut.

Terapkan aplikasi WebSocket pada ECS01

Masuk ke ECS01.
Jalankan perintah sudo pip3 install flask flask-socketio flask-cors redis untuk menginstal library dependensi.
Jalankan perintah vi ECS01_ws.py dan tekan tombol I untuk masuk ke mode edit.

Salin dan tempel kode berikut:

Kode Sampel untuk Menerapkan Aplikasi Uji

Catatan

Ganti alamat IP di bidang redis_url pada baris 13 dengan alamat IP server Redis, yaitu alamat IP 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 Berbagi Sumber Daya Lintas Domain (CORS)
CORS(app)

# Konfigurasikan Redis untuk mengelola antrian dan menyimpan status
redis_url = "redis://192.168.*.*:6379/0"  # Ganti alamat IP dengan alamat IP server Redis Anda
redis_client = redis.StrictRedis.from_url(redis_url)

# Tambahkan level log DEBUG untuk memfasilitasi 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 sisi klien
        print(f"Sesi {session_id} terhubung.")
        welcome_message = "Selamat datang di ruang obrolan!"
        emit('message', welcome_message)
        set_session_data(session_id, "username", '')  # Nama pengguna yang diinisialisasi kosong
    except Exception as e:
        print(f"Kesalahan selama 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} 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"Kesalahan selama 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"Atur nama pengguna klien {session_id} menjadi {username}")
    emit('message', f"Nama pengguna Anda 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. Tentukan nama pengguna terlebih dahulu."
        emit('message', warning_message)
        print(warning_message)


if __name__ == '__main__':
    # Simpan di direktori template
    if not os.path.exists('templates'):
        os.makedirs('templates')

    # Gunakan template 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 nama pengguna">
            <button onclick="setUsername()">Tetapkan sebagai Nama Pengguna</button>
        </div>
        <div id="messages"></div>
        <div class="message-container">
            <input type="text" id="myMessage" autocomplete="off" placeholder="Masukkan pesan...">
            <button onclick="sendMessage()">Kirim</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;  // Masukkan pengenal nama pengguna
            } else {
                alert("Nama pengguna 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("Tentukan nama pengguna terlebih dahulu.");
            }
        }
    </script>
</body>
</html>
'''

    # Simpan template sebagai 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 dan masukkan :wq untuk menyimpan konfigurasi.
Jalankan perintah sudo python3 ECS01_ws.py untuk menjalankan skrip.

Output berikut menunjukkan bahwa aplikasi WebSocket telah diaktifkan dan menggunakan 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 Anda gagal mengaktifkan aplikasi WebSocket, periksa apakah port yang ditentukan digunakan oleh aplikasi lain atau ada kesalahan dalam perintah atau kode.

Terapkan aplikasi WebSocket pada ECS02

Masuk ke ECS02.
Jalankan perintah sudo pip3 install flask flask-socketio flask-cors redis untuk menginstal library dependensi.
Jalankan perintah vi ECS02_ws.py dan tekan tombol I untuk masuk ke mode edit.

Salin dan tempel kode berikut:

Kode Sampel untuk Menerapkan Aplikasi Uji

Catatan

Ganti alamat IP di bidang redis_url pada baris 13 dengan alamat IP server Redis, yaitu alamat IP 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 Berbagi Sumber Daya Lintas Domain (CORS)
CORS(app)

# Konfigurasikan Redis untuk mengelola antrian dan menyimpan status
redis_url = "redis://192.168.*.*:6379/0"  # Ganti alamat IP dengan alamat IP server Redis Anda
redis_client = redis.StrictRedis.from_url(redis_url)

# Tambahkan level log DEBUG untuk memfasilitasi 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 sisi klien
        print(f"Sesi {session_id} terhubung.")
        welcome_message = "Selamat datang di ruang obrolan!"
        emit('message', welcome_message)
        set_session_data(session_id, "username", '')  # Nama pengguna yang diinisialisasi kosong
    except Exception as e:
        print(f"Kesalahan selama 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} 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"Kesalahan selama 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"Atur nama pengguna klien {session_id} menjadi {username}")
    emit('message', f"Nama pengguna Anda 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. Tentukan nama pengguna terlebih dahulu."
        emit('message', warning_message)
        print(warning_message)


if __name__ == '__main__':
    # Simpan di direktori template
    if not os.path.exists('templates'):
        os.makedirs('templates')

    # Gunakan template 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 nama pengguna">
            <button onclick="setUsername()">Tetapkan sebagai Nama Pengguna</button>
        </div>
        <div id="messages"></div>
        <div class="message-container">
            <input type="text" id="myMessage" autocomplete="off" placeholder="Masukkan pesan...">
            <button onclick="sendMessage()">Kirim</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;  // Masukkan pengenal nama pengguna
            } else {
                alert("Nama pengguna 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("Tentukan nama pengguna terlebih dahulu.");
            }
        }
    </script>
</body>
</html>
'''

    # Simpan template sebagai 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 dan masukkan :wq untuk menyimpan konfigurasi.
Jalankan perintah sudo python3 ECS02_ws.p untuk menjalankan skrip.

Output berikut menunjukkan bahwa aplikasi WebSocket telah diaktifkan dan menggunakan 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 Anda gagal mengaktifkan aplikasi WebSocket, periksa apakah port yang ditentukan digunakan oleh aplikasi lain atau ada kesalahan dalam perintah atau kode.

Langkah 2: Konfigurasikan grup server

Masuk ke konsol ALB.
Di bilah navigasi atas, pilih wilayah tempat instance ALB diterapkan.
Di panel navigasi sisi kiri, klik Server Groups.

Di halaman Grup Server, klik Create Server Group. Di kotak dialog Create Server Group, konfigurasikan parameter dan klik Create. Tabel berikut menjelaskan beberapa parameter. Konfigurasikan parameter lainnya berdasarkan kebutuhan bisnis Anda atau gunakan nilai default.

Parameter

Deskripsi

Server Group Type

Pilih tipe grup server yang ingin Anda buat.

VPC

Pilih virtual private cloud (VPC) untuk ECS01 dan ECS02.

Instance ALB dan server backend harus berada dalam VPC yang sama.

Di pesan The server group is created, klik Add Backend Server.
Di wizard Add Backend Server, tambahkan ECS01 dan ECS02 sebagai server backend. Atur port ke port aplikasi WebSocket. Dalam contoh ini, aplikasi WebSocket menggunakan port 5000.

Langkah 3: Tambahkan listener HTTP

Masuk ke konsol ALB.
Di bilah navigasi atas, pilih wilayah tempat instance ALB diterapkan.
Di panel navigasi sisi kiri, klik Instances.
Di halaman Instances, temukan instance ALB dan klik Create Listener di kolom Actions.
Di langkah Configure Listener, konfigurasikan parameter. Tabel berikut menjelaskan beberapa parameter. Konfigurasikan parameter lainnya berdasarkan kebutuhan bisnis Anda atau gunakan nilai default. Setelah Anda mengonfigurasi parameter, klik Next.
Parameter
Deskripsi
Listener Protocol
Pilih HTTP.
Listener Port
Dalam contoh ini, port 5000 digunakan.
Di langkah Select Server Group, konfigurasikan parameter. Tabel berikut menjelaskan beberapa parameter. Konfigurasikan parameter lainnya berdasarkan kebutuhan bisnis Anda atau gunakan nilai default. Setelah Anda mengonfigurasi parameter, klik Next.
Parameter
Deskripsi
Server Group
Pilih grup server.
Di langkah Configuration Review, periksa apakah parameter valid dan klik Submit.

Langkah 4: Tambahkan record DNS

Dalam skenario bisnis nyata, kami sarankan Anda menggunakan record CNAME untuk memetakan nama domain kustom ke nama domain instance ALB Anda.

Di panel navigasi sisi kiri, pilih ALB > Instances.
Di halaman Instances, salin nama domain dari instance ALB.

Lakukan langkah-langkah berikut untuk membuat record CNAME:

Catatan

Jika nama domain Anda tidak didaftarkan menggunakan Alibaba Cloud Domains, Anda harus menambahkan nama domain Anda ke Alibaba Cloud DNS sebelum dapat mengonfigurasi record DNS. Untuk informasi lebih lanjut, lihat Kelola Nama Domain.

Masuk ke konsol Alibaba Cloud DNS.
Di halaman Authoritative DNS Resolution, temukan nama domain Anda dan klik DNS Settings di kolom Actions.
Di tab DNS Settings halaman detail nama domain, klik Add DNS Record.

Di panel Add DNS Record, konfigurasikan parameter dan klik OK. Tabel berikut menjelaskan parameter.

Parameter	Deskripsi
Record Type	Pilih CNAME dari daftar drop-down.
Hostname	Masukkan awalan nama domain. Dalam contoh ini, `@` dimasukkan. Catatan Jika Anda menggunakan nama domain root, masukkan `@`.
DNS Request Source	Pilih Default.
Record Value	Masukkan CNAME, yaitu nama domain instance ALB.
TTL Period	Pilih nilai time-to-live (TTL) untuk record CNAME agar disimpan di cache pada server DNS. Dalam contoh ini, nilai default digunakan.

Langkah 5: Verifikasi hasil

Siapkan dua komputer dengan alamat IP berbeda yang mendukung akses internet. Kirim pesan dari browser di komputer tersebut untuk menguji apakah instance ALB dapat mendorong pesan WebSocket secara real-time.

Kunjungi http://Nama domain:5000 dari browser untuk mengakses ruang obrolan online.
Gambar berikut menunjukkan bahwa ruang obrolan dapat diakses.
Jika Anda membuka alat pengembang di browser Anda, Anda dapat menemukan bahwa komunikasi WebSocket dibentuk di tab Network.
Masukkan nama pengguna dan klik Tetapkan sebagai Nama Pengguna.
Masukkan pesan dan klik Kirim. Ulangi operasi ini di beberapa komputer.
Gambar berikut menunjukkan bahwa pesan dari komputer yang berbeda ditampilkan di browser.
Uji coba di atas menunjukkan bahwa ALB dapat mendorong pesan WebSocket secara real-time sambil menjaga ketersediaan tinggi.

FAQ

Bagaimana cara menggunakan protokol WebSocket Secure?

WebSocket Secure adalah versi terenkripsi dari WebSocket.

Secara default, listener HTTPS mendukung WebSocket Secure. Untuk mengaktifkan WebSocket Secure, buat listener HTTPS.

Apakah saya dikenakan biaya untuk menggunakan WebSocket?

Anda tidak dikenakan biaya untuk menggunakan WebSocket atau WebSocket Secure.

Wilayah mana yang mendukung WebSocket?

WebSocket dan WebSocket Secure didukung di semua wilayah ALB.

Referensi

Untuk memfasilitasi pengujian, topik ini menggunakan contoh sederhana untuk menjelaskan cara menerapkan Redis pada instance ECS. Namun, kesalahan server Redis dapat menyebabkan titik kegagalan tunggal (SPOF). Dalam lingkungan produksi Anda, kami sarankan Anda menggunakan Apa itu Tair (Redis OSS-compatible)? untuk meningkatkan ketersediaan tinggi aplikasi. Untuk informasi lebih lanjut, lihat Ikhtisar.

Parameter	Deskripsi
Listener Protocol	Pilih HTTP.
Listener Port	Dalam contoh ini, port 5000 digunakan.

Parameter	Deskripsi
Server Group	Pilih grup server.