webソケットを使っていると環境によってはすぐにセッションが切れることがあります。

ネットにはよくサーバーソフトのタイムアウトの時間を設定したり、サーバー自体の処理のタイムアウトを設定すれば大丈夫と書いてあります。

しかしレンタルサーバーや、サーバーの設定を弄りたくない場合はこの手段が使えません

今回紹介するのは、そんな時でも使えるフロント側の通信プログラ厶の例を紹介したいと思います。

結論コード

let wss;

function startConnect() {
    wss = new WebSocket("https://galleon.yachiyo.tech/tableSimulator");

    //サーバーに接続したときの処理
    wss.onopen = (soc) => {
        console.log("接続開始");
        wss.send("Hello!!");

    };

    //サーバーからメッセージが来た時の処理
    wss.onmessage = (msg) => {
        console.log(msg.data)
    };


    //接続が切れた時の処理
    wss.onclose = () => {
        console.log("接続切れ")
        startConnect();
    };
}


startConnect();
alert("ルームに参加しました");

httpsでソケット通信を行うwssを使っていますが、ただのwsでも可能です

解説

まずはソケット接続を行うstartConnect関数を定義します

ポイントは、closeハンドラも関数内で定義し、closeハンドラでstartConnectを呼び出すことです

これにより、接続が切れる度にstartConnectが実行され、再帰関数みたいな形で自動で再接続を行えるようになります

普通の再帰関数はメモリを多く消費してしまうというデメリットがありますが、例のコードはwss変数を上書きしているので再帰関数特有のデメリットはありません

 

 

「セッションが切れるけど大丈夫？」

と思うかもしれませんが、初回通信時にuidなどの適当な認証情報をクライアントとサーバーで持っておけば、2回目以降の通信でサーバーが「同じ人が入ってきた」と判断できるので、格ゲーの対戦などにも使えます

 

 

対戦ゲームやwebアプリなどでコマンドをサーバーとやり取りする際は、onmessageハンドラ内で「もし受け取ったメッセージがooだったらooする」みたいな形でif文などを使えば、やりたいことが実現できると思います

私はいつもそうしてます

まとめ

いかがだったでしょうか？

この記事が皆さんのコーディングの手助けになれば幸いです

ではまた！