Qiita Engineer Festa20242024年7月17日まで開催中！

CDN版のReactを使ってWebsocketのチャットクライアントを実装してみました

Last updated at 2024-07-26Posted at 2024-06-20

はじめに

【欲望】

（１）インストール作業は極力したくない: PC内で使うモジュールをガチガチにして重たくしたくない
（２）オフラインでも動くようにしたい: ブラウザへのドラッグ＆ドロップで使いたい
（つまりはWebサーバーレスでも使える）
（つまりはfileプロトコルでも使える）

という願いを叶えられたら幸せだよねー。
そういう思いから以下のルールを決めました。

【ルール】

（１）CDN版を利用する: インストール回避のため
（２）CGIは使わない: Webサーバー回避のため

【ルール】の（１）に関しては、そのままだとオンラインでしか使えなくなるのでダウンロードしたモジュールを使います。
また、アクセス先のファイルが変更される事で発生する不具合の影響を小さくできるというメリットもあります。

事前準備

CDN版のファイルを以下のようなコマンドを使ってあらかじめダウンロードしておきます。

wgetコマンド（Linuxの場合）

> wget https://unpkg.com/react@18/umd/react.production.min.js
> wget https://unpkg.com/react-dom@18/umd/react-dom.production.min.js
> wget https://unpkg.com/babel-standalone@6/babel.min.js

Invoke-WebRequestコマンド（Windowsの場合）

> Invoke-WebRequest https://unpkg.com/react@18/umd/react.production.min.js -OutFile react.production.min.js
> Invoke-WebRequest https://unpkg.com/react-dom@18/umd/react-dom.production.min.js -OutFile react-dom.production.min.js
> Invoke-WebRequest https://unpkg.com/babel-standalone@6/babel.min.js -OutFile babel.min.js

画面レイアウト

四角で囲んだ各フォーム毎にネームスペースを設け、コンポーネントを分けています。
ネームスペースを設ける事で以下のメリットがあります。

・フォーム間のコンポーネントシンボルの重複を防ぐ
・フォーム部品を判別しやすい

クライアントの元ネタはこちら↓

HTMLファイル

画面全体のHTMLの内容は以下の通りです。

chat.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>React版簡易チャット</title>

        <link type="text/css" rel="stylesheet" href="./chat.css" media="all" />

        <script src="./react.production.min.js"></script>
        <script src="./react-dom.production.min.js"></script>
        <script src="./babel.min.js"></script>

        <script src="./common.js"></script>
        <script src="./area_connection.js"></script>
        <script src="./area_history.js"></script>
        <script src="./area_comment.js"></script>
        <script src="./area_private.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">

            function ChatScreen()
            {
                // エレメントの生成
                return(
                    <div>
                        <connection.Form />
                        <history.ParentBox />
                        <comment.Form />
                        <comment.Guide />
                        <private_comment.Form />
                        <private_comment.Guide />
                    </div>
                );
            }

            // 画面レンダリング
            const container = document.getElementById('root');
            const root = ReactDOM.createRoot(container);
            root.render(<ChatScreen />);

        </script>
    </body>
</html>

namespace毎にarea_のプリフィックスを付けたjsファイルで分けています。
このHTMLファイル内ではJSXが使えますが、CDNを使ったこの作り方では別ファイルのソース内でJSXが使えません。
また、スコープがネストしているデータやコンポーネントを除いてほぼ全てのシンボルがグローバル扱いとなるので注意が必要です。

わかり易い例で言えばconnectionネームスペース内のユーザー名入力フィールドのコンポーネントは以下のようになっています。

ユーザー名の入力フィールドのコンポーネント

function InputUser()
{
    // ユーザー名のフック
    [global_data.connection.user, global_func.connection.setUser] = global_func.useState('');

    // 入力変更時のハンドラ
    function OnChange(e)
    {
        global_func.connection.setUser(e.target.value);
    }

    // エレメントの生成
    let ret = React.createElement
    (
        "input",
        {
            className: "user",
            type: "text",
            name: "user",
            disabled: global_data.connection.disabled,
            onChange: OnChange,
            defaultValue: global_data.connection.user,
            placeholder: "ユーザー名",
            maxLength: 8
        }
    );
    return ret;
}

エレメントはJSXではなくReact.createElementで生成しています。
useStateフックを含めたシンボルはnamespaceを付与して参照しています。

ちなみにグローバルデータや関数に関してもcommon.jsで以下のようにnamespaceを定義していますのでフックデータの迷子になる事もないでしょう。

common.js

/**
 * 定数定義用
 */
const const_data = {};

/**
 * WebsocketAPIのインスタンスやフックデータを含むグローバルデータ
 */
const global_data =
{
    // コネクションフォーム用
    connection: {},
    // チャット履歴フォーム用
    history: {},
    // コメント入力フォーム用
    comment: {},
    // プライベートコメント入力フォーム用
    private: {}
};

/**
 * WebsocketAPIのハンドラ登録やフック関数を含むグローバル関数
 */
const global_func =
{
    // コネクションフォーム用
    connection: {},
    // チャット履歴フォーム用
    history: {},
    // コメント入力フォーム用
    comment: {},
    // プライベートコメント入力フォーム用
    private: {}
};

Websocketの処理

WebsocketAPIは元ネタで使用しているブラウザネイティブのものをそのまま利用しているので他のモジュールを使わなくても動作するようにしています。
処理をそのまま掲載すると長くなるので概要だけを以下にまとめておきます。

・onopenハンドラ（接続完了時）

WebsocketAPIのsendメソッドを使ってentrance（入室）コマンドを送信する。

・onmessageハンドラ（コマンド受信時）

受信した以下のコマンド種類によって処理を振り分けています。
処理結果のみを返すprivate-replyコマンド以外は日時／ユーザー名／コメント等のデータを返すので基本的にチャット履歴を残すための処理になります。

　－entranceコマンド－: 自身、または通信相手の入室を知らせるコマンド。
クライアントサイドで使用する文言セット（管理者名や定型文）や参加者一覧／参加人数等のデータもこの時にサーバーから受信する。
　－exitコマンド－: 通信相手の退室を知らせるコマンド。
ユーザーリスト／参加人数等のデータも受信する。
ブラウザ⇒「退室する」ボタン押下時。
マインクラフト⇒「exit」コマンド送信時。
　－closeコマンド－: 通信相手の切断を知らせるコマンド。
ユーザーリスト／参加人数等のデータも受信する。
ブラウザ⇒Ｘボタンで閉じた時。
マインクラフト⇒Ｘボタンで閉じた時。
　－messageコマンド－: 自身、または通信相手からのチャットコメントを受信するコマンド。
参加人数や送信結果等のデータも受信する。
エラー発生時のコメントはコメント入力欄の下に表示する。
　－privateコマンド－: 自身、または通信相手からのプライベートチャットコメントを受信するコマンド。
参加人数のデータも受信する。
　－private-replyコマンド－: 自身が送信したプライベートチャットコメントに対する応答を受信するコマンド。
エラー発生時のコメントはコメント入力欄の下に表示する。

・oncloseハンドラ（切断フレーム受信時）

受信した切断コードによってチャット履歴に残す文言の振り分け処理を行い、システム終了処理を行う。

　－「退室する」ボタン押下時－: 該当する切断コード⇒10 or 3010。
「退室しました」のコメントをチャット履歴に残す。
　－サーバーからの切断時－: 該当する切断コード⇒20。
「サーバーから切断されました」のコメントをチャット履歴に残す。
　－ユーザー名重複時の切断－: 該当する切断コード⇒30。
「そのユーザー名は既に使用されています」のコメントをチャット履歴に残す。
　－ユーザー名未入力時の切断－: 該当する切断コード⇒40。
「ユーザー名を入力してください」のコメントをチャット履歴に残す。
　－認識していない切断コード－（フェイルセーフ）: 該当する切断コード⇒不明。
「予期せず切断されました」のコメントをチャット履歴に残す。
　－切断フレームを介さない切断－: 該当する切断コード⇒1006。
「切断されました」のコメントをチャット履歴に残す。

切断フレームに関しての詳細は以下の記事でもご紹介しています。

・onerrorハンドラ（通信失敗時）

「エラーが発生しました」のコメントをチャット履歴に残してシステム終了処理を行う。

・sendメソッド（コマンド送信時）

　－「退室する」ボタン押下時－: exitコマンドを送信する。
　－「ポチる」ボタン（チャット送信）押下時－: messageコマンドを送信する。
　－「ポチる」ボタン（プライベートチャット送信）押下時－: privateコマンドを送信する。

・closeメソッド（切断フレーム送信時）

　－「退室する」ボタン押下時－: closeコマンドを送信する。

「退室する」ボタン押下時はフラグメントをしてexitとcloseコマンドを交互に送信するようにしています。

※コマンドの詳細は以下のページをご覧ください。

動作確認

容量の都合上少し早送りにはなっていますが一応画面を載せておきます。

どうやら動作に問題はなさそうです。

おわりに

Reactはフックデータと連動して画面をレンダリングしてくれるので、双方向通信ができるWebsocketAPIと相性が良くて便利だと思いました。

その反面でJSXが使えるとはいえ画面部品がコンポーネント単位でバラバラに存在するので、デザイナーと連携しながら運用していくのはちょっと難しいかなと思いました。

今回のソースはjQuery版と一緒にこちらに反映しています↓
（jQuery版も機能は全く同じです）

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up