Implementasikan messaging real-time dengan WebSocket - Server Load Balancer

WebSocket adalah protokol jaringan yang menyediakan saluran komunikasi full-duplex melalui koneksi TCP tunggal. Protokol ini membentuk koneksi persisten antara klien dan server, memungkinkan keduanya mengirim dan menerima data kapan saja. Pendekatan ini menghindari overhead dan latensi akibat pembuatan koneksi baru secara berulang, sehingga lebih efisien dibandingkan model permintaan-respons HTTP tradisional. WebSocket terutama digunakan dalam aplikasi yang memerlukan komunikasi real-time. ALB 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 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 sebagai solusi yang lebih efisien untuk komunikasi klien-server. WebSocket mendukung komunikasi full-duplex, artinya server dan klien dapat mengirim serta menerima data secara simultan. Hal ini memungkinkan server mendorong data baru ke klien secara proaktif 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 berlatensi rendah ini memungkinkan transfer data bi-directional secara berkelanjutan, sehingga meningkatkan efisiensi pertukaran data.

WebSocket berkomunikasi menggunakan frame data dengan format protokol frame sendiri yang memiliki header ringkas. Data dapat dikirim dalam bentuk teks atau biner. Pendekatan 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.

WebSocket kasus penggunaan

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 instant messaging, aplikasi ini memerlukan latensi rendah serta komunikasi bi-directional real-time yang efisien.

Layanan website perusahaan menghadapi tantangan berupa 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 yang buruk.

Dalam skenario ini, penggunaan ALB dengan protokol WebSocket secara efektif mengelola koneksi persisten dalam kondisi konkurensi tinggi. Penerapan aplikasi di sekelompok server dan penggunaan Redis untuk sinkronisasi pesan memastikan ketersediaan tinggi. Solusi ini memberikan layanan messaging real-time yang andal dan efisien untuk aplikasi ruang obrolan online.

Catatan penggunaan

Pendengar HTTP pada instans ALB mendukung protokol WebSocket secara default. ALB mendukung rolling update, artinya perubahan konfigurasi tidak mengganggu koneksi persisten yang sedang berjalan.

Perhatikan hal-hal berikut:

Jika koneksi antara instans ALB dan server backend menggunakan versi HTTP tertentu, seperti HTTP/1.1, kami merekomendasikan agar server backend juga mendukung versi HTTP tersebut.
Timeout permintaan koneksi default untuk pendengar HTTP adalah 60 detik. Jika tidak ada pertukaran data antara ALB dan server backend selama lebih dari 60 detik, ALB akan 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

Diperlukan instans ALB yang menghadap internet. Untuk informasi lebih lanjut, lihat Buat dan kelola instans ALB.
Diperlukan tiga instans 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 merekomendasikan agar Anda menempatkan ECS01, ECS02, dan ECS03 dalam security group yang sama. Jika berada di security group berbeda, pastikan Anda mengonfigurasi aturan yang mengizinkan traffic pada port komunikasi yang diperlukan antar server.
Diperlukan nama domain terdaftar yang telah menyelesaikan Pendaftaran ICP. Untuk informasi lebih lanjut, lihat Daftarkan nama domain Alibaba Cloud dan Pendaftaran ICP.

Prosedur

Langkah 1: Terapkan layanan

Anda perlu menerapkan Redis pada instans ECS03 dan aplikasi WebSocket pada instans 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 diterapkan
sudo systemctl restart redis
# Periksa status Redis
sudo systemctl status redis

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

Login ke instans 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 agar lebih mudah 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 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 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 template 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 instans 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 agar lebih mudah 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 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 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 template 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 grup server

Login ke Konsol ALB.
Di bilah navigasi atas, pilih wilayah tempat instans diterapkan.
Di panel navigasi kiri, klik Server Group.

Klik Create Server Group. Pada halaman Create Server Group, konfigurasikan parameter berikut, biarkan parameter lain pada nilai default-nya, lalu klik Create.

Parameter

Deskripsi

Server Group Type

Pilih Server.

VPC

Pilih VPC tempat server backend ECS01 dan ECS02 berada.

Server backend harus berada dalam VPC yang sama dengan instans ALB.

Pada kotak dialog The server group is created, klik Add Backend Server.
Pada halaman Add Backend Server, pilih ECS01 dan ECS02 lalu tambahkan ke grup server. Atur port-nya ke 5000, yaitu port yang digunakan oleh aplikasi WebSocket dalam tutorial ini.

Langkah 3: Konfigurasikan pendengar HTTP

Login ke Konsol ALB.
Di bilah navigasi atas, pilih wilayah tempat instans diterapkan.
Di panel navigasi kiri, pilih Instances.
Pada halaman Instances, temukan instans target, lalu klik Create Listener di kolom Actions.
Pada halaman Configure Listener, konfigurasikan parameter berikut dan biarkan parameter lain pada nilai default-nya. Lalu, klik Next.

Parameter

Deskripsi

Select Listener Protocol

Pilih HTTP.

Listener Port

Atur port ke 5000.
Pada halaman Server Group, konfigurasikan parameter berikut dan biarkan parameter lain pada nilai default-nya. Lalu, klik Next.

Parameter

Deskripsi

Server Group

Pilih grup server yang telah Anda buat.
Pada halaman Confirm, tinjau pengaturan lalu klik Submit. Kemudian, tunggu hingga pendengar dibuat.

Langkah 4: Konfigurasikan resolusi DNS

Untuk produksi, kami merekomendasikan memetakan nama domain kustom ke nama domain instans ALB dengan membuat Rekaman CNAME.

Di panel navigasi kiri, pilih ALB > Instances.
Pada halaman Instances, salin nama DNS instans ALB yang telah dibuat.

Ikuti langkah-langkah berikut untuk menambahkan Rekaman CNAME.

Catatan

Jika nama domain Anda didaftarkan oleh penyedia selain Alibaba Cloud, Anda harus menambahkan nama domain tersebut ke Konsol DNS Alibaba Cloud sebelum dapat mengonfigurasi resolusi DNS. Untuk informasi lebih lanjut, lihat Kelola nama domain. Jika nama domain Anda didaftarkan di Alibaba Cloud, lanjutkan dengan langkah-langkah berikut.

Masuk ke Konsol DNS Alibaba Cloud.
Pada halaman Authoritative DNS Resolution, temukan nama domain target, lalu klik Settings di kolom Operations.
Pada halaman Settings, klik Add Record.

Pada panel Add Record, konfigurasikan Rekaman CNAME dengan mengatur parameter berikut, lalu klik OK.

Parameter	Deskripsi
Record Type	Pilih CNAME dari daftar drop-down.
Hostname	Awalan nama domain Anda. Tutorial ini menggunakan `@`. Catatan Untuk menggunakan domain root, atur hostname ke `@`.
Query Source	Pilih Default.
Record Value	Masukkan nama DNS instans ALB yang telah Anda salin.
TTL	Time to live (TTL) adalah durasi penyimpanan cache catatan DNS di server DNS. Gunakan nilai default.

Langkah 5: Verifikasi hasil

Verifikasi bahwa ALB mengirimkan pesan real-time melalui WebSocket dengan membuka aplikasi di browser pada dua komputer terpisah dan saling bertukar pesan.

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 lalu klik Set Username.
Pada masing-masing komputer, masukkan beberapa pesan obrolan lalu 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 mengonfirmasi bahwa ALB menyediakan messaging real-time dengan ketersediaan tinggi melalui WebSocket.

FAQ

Bagaimana cara menggunakan WebSocket Secure?

WebSocket Secure adalah versi terenkripsi dari protokol WebSocket.

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

Apakah saya dikenai biaya tambahan untuk menggunakan WebSocket?

WebSocket dan WebSocket Secure tidak dikenai biaya tambahan.

Wilayah mana saja yang mendukung WebSocket?

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

Referensi

Tutorial ini menunjukkan penerapan Redis pada instans ECS untuk pengujian. Namun, server Redis tunggal berpotensi menjadi single point of failure. Untuk lingkungan produksi, kami merekomendasikan Anda menggunakan Tair untuk memastikan ketersediaan tinggi. Untuk informasi lebih lanjut, lihat Quick start untuk Tair.

Parameter	Deskripsi
Select Listener Protocol	Pilih HTTP.
Listener Port	Atur port ke 5000.

Parameter	Deskripsi
Server Group	Pilih grup server yang telah Anda buat.