WebSocket を使ったチャットアプリ構築ガイド（Node.js + OutSystems）

リアルタイムで動作するチャットアプリを作りたいと思ったことはありませんか？
従来の HTTP 通信では、サーバーとクライアントの間で常にリクエストとレスポンスを繰り返す必要があり、リアルタイム性に限界があります。そこで登場するのが WebSocket です。WebSocket を使えば、双方向通信が可能になり、ユーザー同士が即座にメッセージをやり取りできるチャットルームを簡単に構築できます。

本記事では、Node.js を使った WebSocket サーバーのセットアップから、OutSystems の画面イベント（OnReady、OnDestroy など）に JavaScript を組み込んでクライアントを実装する方法まで、ステップごとに解説します。さらに、自分のメッセージは右寄せ、他人のメッセージは左寄せで表示する UI 条件式も紹介します。これにより、見やすく直感的なチャット画面を作成することができます。

1. Node.js のインストール

まずは Node.js をインストールします。公式サイトから最新版をダウンロードし、環境変数に node と npm が使えるよう設定してください。

node -v
npm -v

バージョンが表示されれば準備完了です。

2. サーバー環境の構築

プロジェクトフォルダを作成し、WebSocket ライブラリを導入します。

mkdir websocket-chat
cd websocket-chat
npm init -y
npm install ws

サーバーコード例（server.js）

// WebSocket ライブラリを読み込み
const WebSocket = require('ws');

// ポート 8080 で WebSocket サーバーを起動
const wss = new WebSocket.Server({ port: 8080 });

// クライアント接続イベント
wss.on('connection', (ws) => {
  console.log('クライアントが接続しました');

  // クライアントからメッセージを受信
  ws.on('message', (data) => {
    const msgObj = JSON.parse(data); // JSON をパース
    console.log(`${msgObj.username}: ${msgObj.message}`);

    // 全クライアントにブロードキャスト
    wss.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`${msgObj.username}: ${msgObj.message}`);
      }
    });
  });
});

3. クライアント環境（OutSystems）

OutSystems の Reactive Web App で画面を作成します。

イベントの使い分け

OnReady: WebSocket 接続を初期化し、受信イベントを登録する場所。
OnDestroy: 画面を離れる際に WebSocket を閉じる場所。
OnInitialize / OnRender: WebSocket 初期化には使わない。

JavaScript コード例（OnReady に配置）

// WebSocket 接続を開始
window.chatSocket = new WebSocket("ws://localhost:8080");

// 接続成功時
chatSocket.onopen = function() {
    $public.FeedbackMessage.showFeedbackMessage("サーバーに接続しました",1,true,"",false);
};

// メッセージ受信時
chatSocket.onmessage = function(event) {
    // OutSystems の UI 更新処理を呼び出すことが可能
    $actions.ReceiveMessage(event.data);
};

JavaScript コード例（OnDestroy に配置）

// 画面を離れる際に接続を閉じる
if (window.chatSocket) {
  window.chatSocket.close();
  console.log("WebSocket 接続を終了しました");
}

メッセージ送信（Button → Client Action → Run JavaScript）

function sendMessage(username, message) {
  if (window.chatSocket && window.chatSocket.readyState === WebSocket.OPEN) {
    const msgObj = { username: username, message: message };
    window.chatSocket.send(JSON.stringify(msgObj));
  } else {
    console.log("WebSocket が未接続です");
  }
}

// OutSystems のパラメータから呼び出し
sendMessage($parameters.Username, $parameters.Message);

4. メッセージの左右表示条件

OutSystems の UI で、メッセージを「自分 → 右寄せ」「他人 → 左寄せ」にする条件式を設定します。

If(
  Index(MessagesInRoom.Current.Text, Client.Username) <> -1,
  "text-align-right",
  "text-align-left"
)

自分のユーザー名を含むメッセージ → text-align-right
他人のメッセージ → text-align-left

これにより、チャット画面で自分の発言は右側、他人の発言は左側に表示されます。

まとめ

Node.js + WebSocket でリアルタイム通信サーバーを構築。
OutSystems の OnReady で接続、OnDestroy で切断。
ボタン押下で JavaScript を呼び出し、JSON 形式でメッセージ送信。
OutSystems の条件式でメッセージを左右に振り分け、見やすいチャット UI を実現。