CLB と WebSocket によるリアルタイムメッセージング - Server Load Balancer

WebSocket の概要

WebSocket を使用する理由

Web 技術の進化に伴い、ライブチャットルームやリアルタイムコメントなどの機能では、サーバーがデータをリアルタイムにプッシュすることが求められるようになっています。従来のポーリング方式では、クライアントのブラウザが HTTP リクエストを繰り返しサーバーに送信して最新データをフェッチしますが、重大な欠点があります。大きな HTTP ヘッダーと小さなデータペイロードを伴う頻繁なリクエストは、サーバーの負荷を増加させ、帯域幅を圧迫します。

これらの問題に対応するため、HTML5 は WebSocket プロトコルを導入し、クライアントとサーバー間の通信に、より効率的なソリューションを提供します。WebSocket は全二重通信をサポートしており、サーバーとクライアントは同時にデータを送受信できます。これにより、サーバーはポーリングリクエストを待たずに、新しいデータをクライアントへ能動的にプッシュできます。この双方向リアルタイム通信メカニズムは、データ転送の効率を向上させ、不要なネットワークリクエストを削減し、サーバーリソースと帯域幅を節約します。その結果、よりスムーズで応答性の高いユーザーエクスペリエンスを提供できます。

WebSocket の主な機能

通信は、標準の TCP 3 ウェイハンドシェイクで始まります。次に、クライアントがプロトコルアップグレードハンドシェイクと呼ばれる特別な HTTP リクエストを送信します。このハンドシェイクが成功すると、接続は HTTP から WebSocket に切り替わります。以降、クライアントとサーバーは WebSocket プロトコルを使用し、同一の接続上で双方向のデータ交換を行えるようになります。

WebSocket 接続が確立されると、その接続はアクティブな状態を保ちます。この永続的な低レイテンシー接続により、継続的な双方向のデータ転送が可能になり、データ交換の効率が向上します。

WebSocket はデータフレームを使用して通信します。データフレームには、簡潔なヘッダーを備えた独自のフレームプロトコル形式があります。データはテキスト形式またはバイナリ形式で送信できます。この方式により、永続的な接続におけるプロトコルオーバーヘッドが削減され、ネットワーク通信がより効率的になります。サーバーリソースと帯域幅を節約しながら、よりスムーズなリアルタイムのインタラクティブエクスペリエンスを提供します。

WebSocket プロトコルの詳細については、公式ドキュメント「WebSocket プロトコル」をご参照ください。

WebSocket のユースケース

WebSocket は、AI アプリケーション、オンラインチャットルーム、リアルタイム通知システム、マルチプレイヤーオンラインゲーム、リアルタイムマーケットデータフィードなど、高速でリアルタイムな双方向通信を必要とするアプリケーションに最適です。

シナリオ例

ある企業が Alibaba Cloud 上に Web ベースのオンラインチャットアプリケーションをデプロイしたいと考えています。ユーザーはドメイン名を介してバックエンドサービスにアクセスし、リアルタイム通信を行えます。インスタントメッセージアプリケーションとして、低レイテンシーで効率的なリアルタイムの双方向通信が求められます。

この企業の Web サイトサービスでは、高い同時実行性と永続的な接続の管理が課題となっています。ユーザー数が増加すると、従来の HTTP モデルでは、やり取りのたびに新しい接続が必要になるため、リアルタイム通信において多数の同時ユーザーをサポートできません。その結果、サーバー負荷が急増し、パフォーマンスが低下します。

このシナリオでは、CLB と WebSocket プロトコルを使用することで、高い同時実行性の状況下でも永続的な接続を効果的に管理できます。vServer グループ内の複数のバックエンドサーバーに WebSocket アプリケーションをデプロイし、Redis を使用してメッセージ同期を行うことで、サービスは高可用性を実現します。これにより、オンラインチャットアプリケーション向けに、信頼性が高く効率的なリアルタイムメッセージングソリューションを提供できます。

注意事項

CLB の HTTP リスナーは、デフォルトで WebSocket プロトコルをサポートしています。CLB はホットアップデートをサポートしているため、設定変更によって既存の永続的な接続が影響を受けることはありません。

次の点にご注意ください：

CLB とバックエンドサーバー間の接続で HTTP/1.1 など特定の HTTP バージョンを使用する場合は、バックエンドサーバー側でも同じ HTTP バージョンをサポートする Web サーバーを使用する必要があります。
HTTP リスナーの接続リクエストタイムアウトはデフォルトで 60 秒です。CLB とバックエンドサーバーの間で 60 秒を超えてメッセージの送受信がない場合、CLB は自ら接続をクローズします。
- デフォルトの 60 秒のタイムアウトが要件を満たさない場合は、リスナーの [接続リクエストタイムアウト] を変更できます。
- 接続を維持するには、設定されたタイムアウト時間内にパケットを交換するキープアライブメカニズムを実装する必要があります。

前提条件

Classic Load Balancer (CLB) インスタンスを作成しておく必要があります。
3 つの Elastic Compute Service (ECS) インスタンス (ECS01、ECS02、ECS03) が必要です。
- ECS01 と ECS02 は WebSocket アプリケーションのデプロイに、ECS03 は Redis のデプロイに使用します。
- このチュートリアルでは、すべてのサーバーで CentOS 7.9 を実行します。
- ECS01、ECS02、ECS03 は同じセキュリティグループに配置することを推奨します。異なるセキュリティグループに配置する場合は、サーバー間で必要な通信ポートのトラフィックを許可するルールを設定してください。
ICP 登録が完了した登録済みドメイン名が必要です。詳細については、「Alibaba Cloud ドメイン名の登録」および「ICP 申請」をご参照ください。

操作手順

手順1：サービスのデプロイ

ECS03 インスタンスに Redis を、ECS01 および ECS02 インスタンスに WebSocket アプリケーションをデプロイします。

このトピックでは、デモンストレーションのために、CentOS 7.9 上のシンプルな Python ベースのオンラインチャットルームを使用します。この例は参考用です。本番環境では、独自のアプリケーションを使用してください。

ECS03 への Redis のデプロイ

ECS03 インスタンスにログオンします。

次のコマンドをコピーして実行し、Redis をインストールして設定します。

# EPEL (Extra Packages for Enterprise Linux) をインストール
sudo yum install epel-release -y
# Redis をインストール
sudo yum install redis -y
# Redis サービスを開始して有効化
sudo systemctl start redis
sudo systemctl enable redis
# リモート接続を許可するように Redis 設定ファイルを編集
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
# 変更を有効にするために Redis サービスを再起動
sudo systemctl restart redis
# Redis のステータスを確認
sudo systemctl status redis

コマンドがエラーなく実行され、出力で Redis サービスが アクティブ (実行中) の状態であることが表示された場合、デプロイと設定は成功です。

● 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

ECS01 への WebSocket のデプロイ

ECS01 インスタンスにログオンします。
sudo pip3 install flask flask-socketio flask-cors redis を実行して、依存関係をインストールします。
vi ECS01_ws.py を実行し、i キーを押して編集モードに入ります。

次のコードをコピーして貼り付けます。

テストサービスのサンプルコード

説明

13 行目の redis_url の IP アドレスを、お使いの Redis サーバー (ECS03) の IP アドレスに置き換えてください。

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!'
# オリジン間リソース共有 (CORS) を有効化
CORS(app)
# メッセージキューおよび状態ストアとして Redis を設定
redis_url = "redis://192.168.*.*:6379/0"  # お使いの Redis サーバーの IP アドレスに置き換えてください
redis_client = redis.StrictRedis.from_url(redis_url)
# デバッグを容易にするためにログレベルを DEBUG に設定
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  # クライアントのセッション ID を取得
        print(f"Session {session_id} connected.")
        welcome_message = "チャットルームに入室しました！"
        emit('message', welcome_message)
        set_session_data(session_id, "username", '')  # ユーザー名を空として初期化
    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} がチャットルームから退出しました。"
            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"あなたのユーザー名は {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 = "メッセージの送信に失敗しました：最初にユーザー名を設定してください。"
        emit('message', warning_message)
        print(warning_message)
if __name__ == '__main__':
    # templates ディレクトリが存在することを確認
    if not os.path.exists('templates'):
        os.makedirs('templates')
    # Flask テンプレート (index.html) を使用
    html_code = '''<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>チャットルーム</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>オンラインチャットルーム</h1>
    <div class="chat-container">
        <div class="user-container">
            <input type="text" id="username" autocomplete="off" placeholder="ユーザー名を入力">
            <button onclick="setUsername()">ユーザー名を設定</button>
        </div>
        <div id="messages"></div>
        <div class="message-container">
            <input type="text" id="myMessage" autocomplete="off" placeholder="メッセージを入力...">
            <button onclick="sendMessage()">送信</button>
        </div>
    </div>
    <script>
        var socket = io({ transports: ['websocket', 'polling', 'flashsocket'] });
        var usernameSet = false;
        socket.on('connect', function() {
            console.log("サーバーに接続しました！");
            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;  // ユーザー名が設定されたことをマーク
            } else {
                alert("ユーザー名は空にできません！");
            }
        }
        function sendMessage() {
            if (usernameSet) {
                var message = $('#myMessage').val();
                if (message) {
                    socket.send(message);
                    $('#myMessage').val('');
                } else {
                    alert("メッセージは空にできません！");
                }
            } else {
                alert("最初にユーザー名を設定してください！");
            }
        }
    </script>
</body>
</html>
'''
    # テンプレートをファイルに保存
    with open('templates/index.html', 'w') as file:
        file.write(html_code)
    socketio.run(app, host='0.0.0.0', port=5000)

Esc キーを押し、:wq と入力して変更を保存します。
sudo python3 ECS01_ws.py コマンドを実行してスクリプトを実行します。

次の出力が表示されると、WebSocket アプリケーションがポート 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)

アプリケーションの起動に失敗した場合は、ポートがすでに使用されているか、コマンドまたはコードのコピーに誤りがないかを確認してください。

● redis.service – Redis 永続的キーバリューデータベース
   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

ECS02 への WebSocket のデプロイ

ECS02 インスタンスにログオンします。
sudo pip3 install flask flask-socketio flask-cors redis を実行して、依存関係をインストールします。
vi ECS02_ws.py を実行し、i キーを押して編集モードに入ります。

次のコードをコピーして貼り付けます。

テストサービスのサンプルコード

説明

13 行目の redis_url の IP アドレスを、お使いの Redis サーバー (ECS03) の IP アドレスに置き換えてください。

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!'
# オリジン間リソース共有 (CORS) を有効化
CORS(app)
# メッセージキューおよび状態ストアとして Redis を設定
redis_url = "redis://192.168.*.*:6379/0"  # お使いの Redis サーバーの IP アドレスに置き換えてください
redis_client = redis.StrictRedis.from_url(redis_url)
# デバッグを容易にするためにログレベルを DEBUG に設定
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  # クライアントのセッション ID を取得
        print(f"Session {session_id} connected.")
        welcome_message = "チャットルームに入室しました！"
        emit('message', welcome_message)
        set_session_data(session_id, "username", '')  # ユーザー名を空として初期化
    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} がチャットルームから退出しました。"
            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"あなたのユーザー名は {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 = "メッセージの送信に失敗しました：最初にユーザー名を設定してください。"
        emit('message', warning_message)
        print(warning_message)
if __name__ == '__main__':
    # templates ディレクトリが存在することを確認
    if not os.path.exists('templates'):
        os.makedirs('templates')
    # Flask テンプレート (index.html) を使用
    html_code = '''<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>チャットルーム</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>オンラインチャットルーム</h1>
    <div class="chat-container">
        <div class="user-container">
            <input type="text" id="username" autocomplete="off" placeholder="ユーザー名を入力">
            <button onclick="setUsername()">ユーザー名を設定</button>
        </div>
        <div id="messages"></div>
        <div class="message-container">
            <input type="text" id="myMessage" autocomplete="off" placeholder="メッセージを入力...">
            <button onclick="sendMessage()">送信</button>
        </div>
    </div>
    <script>
        var socket = io({ transports: ['websocket', 'polling', 'flashsocket'] });
        var usernameSet = false;
        socket.on('connect', function() {
            console.log("サーバーに接続しました！");
            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;  // ユーザー名が設定されたことをマーク
            } else {
                alert("ユーザー名は空にできません！");
            }
        }
        function sendMessage() {
            if (usernameSet) {
                var message = $('#myMessage').val();
                if (message) {
                    socket.send(message);
                    $('#myMessage').val('');
                } else {
                    alert("メッセージは空にできません！");
                }
            } else {
                alert("最初にユーザー名を設定してください！");
            }
        }
    </script>
</body>
</html>
'''
    # テンプレートをファイルに保存
    with open('templates/index.html', 'w') as file:
        file.write(html_code)
    socketio.run(app, host='0.0.0.0', port=5000)

Esc キーを押し、:wq と入力して変更を保存します。
sudo python3 ECS02_ws.py コマンドを実行してスクリプトを実行します。

次の出力が表示されると、WebSocket アプリケーションがポート 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)

アプリケーションの起動に失敗した場合は、ポートがすでに使用されているか、コマンドまたはコードのコピーに誤りがないかを確認してください。

ステップ 2：vServer グループの設定

Classic Load Balancer (CLB) コンソールにログインします。
上部メニューで、CLB インスタンスがデプロイされているリージョンを選択します。
左側のナビゲーションペインで、インスタンス を選択します。 インスタンス ページで、対象のインスタンスを見つけ、その ID をクリックします。

仮想サーバーグループ タブで、VServer Group の作成 をクリックします。 VServer Group の作成 ページで、次のパラメーターを設定します。他のパラメーターは、デフォルト値を使用するか、必要に応じて変更できます。設定が完了したら、作成をクリックし、画面の指示に従います。

パラメーター	説明
[VServer グループ名]	vServer グループ名として RS1 を入力します。

仮想サーバーグループ タブで、作成した vServer グループを見つけ、操作列の編集をクリックします。
VServer Group の編集 ページで、追加をクリックします。 サーバー登録 ページで、バックエンドサーバー ECS01 と ECS02 を追加します。両方のサーバーのポートを、WebSocket アプリケーションが使用するポートである 5000 に設定します。
VServer Group の編集 ページで、追加したサーバーを選択し、保存をクリックします。

ステップ 3：HTTP リスナーの設定

Classic Load Balancer (CLB) コンソールにログインします。
上部メニューで、CLB インスタンスがデプロイされているリージョンを選択します。
左側のナビゲーションペインで、インスタンス を選択します。
インスタンス ページで、対象のインスタンスを見つけ、操作列の リスナーの設定 をクリックします。

プロトコルとリスナー ページで、次のパラメーターを設定します。他のパラメーターは、デフォルト値を使用するか、必要に応じて変更できます。設定が完了したら、次へをクリックします。

パラメーター	説明
[リスナープロトコルの選択]	[HTTP] を選択します。
[リスニングポート]	この例では、ポートを 5000 に設定します。

バックエンドサーバー ページで、次のパラメーターを設定します。他のパラメーターは、デフォルト値を使用するか、必要に応じて変更できます。設定が完了したら、次へをクリックします。

パラメーター	説明
[サーバーグループを選択]	作成した vServer グループを選択します。

[ヘルスチェック] ページでは、パラメーターにデフォルト値を使用するか、必要に応じて変更できます。その後、次へをクリックします。
確定ページで、設定を確認し、送信をクリックしてリスナーを作成します。

ステップ 4：DNS 名前解決の設定

説明

Alibaba Cloud に登録されていないドメインの場合、DNS レコードを設定する前に、まず Alibaba Cloud DNS コンソールにドメインを追加する必要があります。
CLB インスタンスが内部向けインスタンスの場合、まず Elastic IP アドレス (EIP) を関連付けてから、ドメイン名を EIP にマッピングする A レコードを作成して、パブリックアクセスを有効にする必要があります。

左側のナビゲーションペインで、CLB > インスタンスを選択します。
インスタンス ページで、対象のインスタンスを選択し、その IP をコピーします。

次の手順を実行して、A レコードを追加します。

Alibaba Cloud DNS コンソールにログインします。
インターネットの権威ある DNS 解決 ページで、目的のドメイン名を見つけ、Actions 列の 解決設定 をクリックします。
解決設定 ページで、Add Record をクリックします。

Add Record パネルで、次のパラメーターを設定します。その他のパラメーターはデフォルト値のままにするか、必要に応じて変更できます。次に、OK をクリックします。

パラメーター	説明
[Record Type]	ドロップダウンリストから A を選択します。
[Hostname]	ドメイン名のプレフィックスです。説明ルートドメインの場合は、ホスト名を @ に設定します。
[Record Value]	コピーした CLB インスタンスの IP アドレスを入力します。

ステップ 5：結果の検証

異なるパブリック IP アドレスを持つ 2 台のコンピューターを準備します。各コンピューターでブラウザを使用してチャットメッセージを送受信し、CLB によって WebSocket を介してリアルタイムでメッセージが配信されることを確認します。

ブラウザで http://<your-domain-name>:5000 にアクセスして、オンラインチャットルームアプリケーションを開きます。

オンラインチャットルームインターフェイスが読み込まれます。チャットメッセージエリアに「チャットルームに入室しました！」というメッセージが表示され、WebSocket 接続が確立されたことを示します。ページには、[ユーザー名を設定] ボタンがあるユーザー名設定エリアと、[送信] ボタンがあるメッセージ送信エリアが含まれます。

ブラウザの開発者ツールを開くと、[ネットワーク] タブで、ブラウザが WebSocket プロトコルを使用して通信していることを確認できます。

[ネットワーク] パネルで、フィルターを websocket に設定します。ステータスコードが 101 の WebSocket リクエストは、プロトコルのアップグレードが成功したことを示します。接続ステータスは保留中になります。これは、永続的な WebSocket 接続が確立され、アクティブであることを意味します。
チャットのユーザー名を入力し、[ユーザー名を設定] をクリックします。
各コンピューターで複数のチャットメッセージを入力し、[送信] をクリックしてアプリケーションをテストします。

両方のブラウザがリアルタイムでメッセージを受信します。

オンラインチャットルームアプリケーションは正常にデプロイされました。ページには、[ユーザー名] 入力ボックスと [ユーザー名を設定] ボタン、チャットメッセージ表示エリア、および下部に [送信] ボタンがあるメッセージ入力ボックスが含まれています。田中一郎や鈴木花子などの複数のユーザーがチャットルームでリアルタイムの会話を行うことができます。
これにより、CLB と WebSocket を使用することで、リアルタイムで高可用性なメッセージングが可能になることを検証できます。

よくある質問

WebSocket Secure プロトコルを使用するにはどうすればよいですか?

WebSocket Secure は、WebSocket プロトコルの暗号化バージョンです。

HTTPS リスナーは、デフォルトで WebSocket Secure プロトコルをサポートしています。WebSocket Secure プロトコルを使用するには、リスナーを設定する際に HTTPS を選択してください。

WebSocket の使用に料金はかかりますか?

WebSocket および WebSocket Secure プロトコルの使用に追加料金はかかりません。

WebSocket はどのリージョンでサポートされていますか?

CLB をサポートしているすべてのリージョンで、WebSocket および WebSocket Secure もサポートされています。

リファレンス

このチュートリアルでは、テスト用に ECS インスタンスに Redis をデプロイする例を示します。ただし、単一の Redis サーバーは単一障害点 (SPOF) となる可能性があります。本番環境では、高可用性を確保するために Tair を使用することを推奨します。詳細については、「Tair のクイックスタート」をご参照ください。