VSCode の「built-in port forwarding」と「ローカルの WebSocketサーバー」を組み合わせたインターネット側からのアクセス

はじめに

過去に、以下の記事などで扱った VSCode の built-in port forwarding を扱った話です。

●VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス - Qiita
　https://qiita.com/youtoy/items/56e48c84d6a2f0549155

この機能を使うと、ローカルサーバーにインターネット側からアクセスできるようになります（※ 意図しないアクセスをされないよう、セキュリティ面は要注意です）。

今回の内容

今回は、Node.js を使ってローカルに用意した WebSocketサーバーを、上記の機能と組み合わせて使います。

さっそく試していく

さっそく試していきます。

WebSocketサーバーを用意する

ローカル環境に WebSocketサーバーを用意します。そのために、過去に何度も使っている、以下の ws を使います。

●ws - npm
　https://www.npmjs.com/package/ws

上記のパッケージは、以下のコマンドでインストールします。

npm i ws

WebSocketサーバーのコード

以下が WebSocketサーバーのコードです。

import { WebSocketServer } from "ws";

const PORT = 8787;
const wss = new WebSocketServer({ port: PORT });

let clientCounter = 0;

wss.on("connection", (ws, req) => {
  const clientId = ++clientCounter;

  console.log(`[client ${clientId}] connected`);
  console.log(`[client ${clientId}] from: ${req.socket.remoteAddress}`);

  ws.on("message", (data) => {
    const text = data.toString();

    // クライアントから送られた内容をログ出力
    console.log(`[client ${clientId}] received raw:`, text);

    try {
      const json = JSON.parse(text);
      console.log(`[client ${clientId}] received json:`, json);
    } catch {
      // JSONではない通常文字列の場合
    }

    // 全クライアントへブロードキャスト
    for (const client of wss.clients) {
      if (client.readyState === client.OPEN) {
        client.send(text);
      }
    }
  });

  ws.on("close", () => {
    console.log(`[client ${clientId}] disconnected`);
  });

  ws.on("error", (err) => {
    console.error(`[client ${clientId}] error:`, err);
  });
});

console.log(`WebSocket server started: ws://localhost:${PORT}`);

ローカルサーバーをたてるためには、上記のコードを nodeコマンドで実行します。

VSCode の built-in port forwarding と組み合わせる

ローカルの WebSocketサーバーを動作させたら、その後で VSCode の built-in port forwarding と組み合わせます。

以下のように特定のポートでローカルの WebSocketサーバーが動作した状態で、そのポートを、VSCode の built-in port forwarding で指定します。

以下のように、転送されたアドレスの部分に URL が出ます。

さらに、表示範囲が「非公開」になっている部分を、今回の用途では「公開」に変更します（今回、WebSocketサーバーに接続するクライアントで認証を通せないため）。

これでサーバー側の準備はできました。

WebSocketサーバーにクライアントから接続しての通信

WebSocketサーバーに接続するクライアント

上記の WebSocketサーバーに接続するクライアントを用意します。クライアント側は Node.js の標準機能で用意します。

コードは、以前記事に書いたことがある内容を流用します。

const socket = new WebSocket("https://【VS Code の機能で準備されたアドレス】");

socket.addEventListener("open", (event) => {
  socket.send("Hello Server!");
});

socket.addEventListener("message", (event) => {
  console.log("Message from server ", event.data);
});

あとは、上記を nodeコマンドで実行します。実行後のサーバー側のログを見ると、以下のようにクライアントからの通信を受信できていることが確認できました。