はじめに

Deno でシンプルな WebSocketサーバーを試した話を記事に書きました。Deno は、登場時から気になりつつもあまり試せてないものだったのですが、今回、ローカル環境でのリアルタイム通信まわりを試してみます。

試した手順など

試した手順などについて書いていきます。

Deno のインストール

まずはインストールについて、少し情報をメモしておきます。複数の方法がありますが、Mac で Homebrew を使った導入について書いておきます。

公式ドキュメントの説明でも書かれている、以下のコマンドで導入します。

brew install deno

以下のように、denoコマンドが使える状態になりました。

【追記】別の方法

その後、以下の記事に書いた mise を使ったインストールに切り替えました。

●mise（ミーズ）で Deno・Bun の利用可能なバージョンの確認や最新バージョンのインストール - Qiita
　https://qiita.com/youtoy/items/d758e10172a35febdace

WebSocketサーバーのコードを準備して処理を実行

次に、WebSocketサーバーのコードを準備します。シンプルなものであれば、公式ドキュメントの以下にサンプルが掲載されています。

●HTTP server: WebSockets
　https://docs.deno.com/examples/http_server_websocket/

Deno.serve((req) => {
  if (req.headers.get("upgrade") != "websocket") {
    return new Response(null, { status: 426 });
  }
  const { socket, response } = Deno.upgradeWebSocket(req);
  socket.addEventListener("open", () => {
    console.log("a client connected!");
  });
  socket.addEventListener("message", (event) => {
    if (event.data === "ping") {
      socket.send("pong");
    }
  });
  return response;
});

これを少しだけ変えて、以下としました。

Deno.serve((req) => {
  if (req.headers.get("upgrade") != "websocket") {
    return new Response(null, { status: 426 });
  }
  const { socket, response } = Deno.upgradeWebSocket(req);
  socket.addEventListener("open", () => {
    console.log("a client connected!");
  });

  socket.addEventListener("message", (event) => {
    if (event.data === "ping") {
      socket.send("pong");
    } else {
      socket.send("サーバーからの返信");
    }
  });
  return response;
});

これを、以下のコマンドで実行します。

deno --allow-net app.mjs

これで、サーバー側の準備は整いました。

WebSocket のクライアントを準備して処理を実行（ブラウザで）

あとは、WebSocket のクライアントを準備して、サーバーとクライアントの間での接続を確認します。とりあえずは、ブラウザの開発者ツールのコンソールで、クライアント側になる処理を実行することにします。

具体的には以下のコードです。これをコンソールに貼り付けて実行しました。

const ws = new WebSocket("ws://localhost:8000");
ws.onopen = () => {
  console.log("接続成功");
  ws.send("Hello Server!");
  ws.send("ping");
};

ws.onmessage = (e) => {
  console.log("サーバーからの応答:", e.data);
};

コンソール上で処理を実行した結果、以下のように通信が成功したという状態になりました。

Deno での WebSocket実装

Node.js で WebSocket のサーバー側を実装しようとすると ws などを用いる必要がありますが、Deno では標準機能で WebSocket のサーバー側を実装できました。

これは以下で WebSocket の仕組みを実装されているためのようです。

●denoland/fastwebsockets: A fast RFC6455 WebSocket implementation
　https://github.com/denoland/fastwebsockets

余談：古いやり方

最後に、古いやり方についてメモしておきます。当初、こちらを参照してしまって、それでお試しを進めてしまっていました。

せっかくなので、記録として残しておきます。

【古いやり方】 WebSocketサーバーのコードを準備して処理を実行

WebSocketサーバーのコードを準備します。シンプルなものであれば、公式ドキュメントの以下にサンプルが掲載されています。

コード全体は以下になるのですが、まずは今回はこれを使います。

import { serve } from "https://deno.land/std@0.140.0/http/server.ts";

serve((req) => {
  const upgrade = req.headers.get("upgrade") || "";
  if (upgrade.toLowerCase() != "websocket") {
    return new Response("request isn't trying to upgrade to websocket.");
  }
  const { socket, response } = Deno.upgradeWebSocket(req);
  socket.onopen = () => console.log("socket opened");
  socket.onmessage = (e) => {
    console.log("socket message:", e.data);
    socket.send(new Date().toString());
  };
  socket.onerror = (e) => console.log("socket errored:", e.message);
  socket.onclose = () => console.log("socket closed");
  return response;
});

処理の実行

これをオプション付きの denoコマンドで実行する流れになるのですが、試しにオプションなしのものを先に試してみました。そうすると、以下のように「--allow-net」をつけてコマンドを実行するように、というメッセージがでます。それと、とりあえずはコマンド再実行なしに、処理実行の可否を確認されて、それを許可すれば処理を進めることもできます。

処理の許可をすると、以下のようなローカルサーバーが立ち上がった状態になりました。

なお本来の手順どおり、以下のオプション付きで実行したほうが、サクッと進められて良いです。

deno --allow-net app.mjs

WebSocket のクライアントを準備（ブラウザで）

あとは、WebSocket のクライアントを準備して、サーバーとクライアントの間での接続を確認します。とりあえずは、ブラウザの開発者ツールのコンソールで、クライアント側になる処理を実行することにします。

具体的には以下のコードです。これをコンソールに貼り付けて実行しました。

const ws = new WebSocket("ws://localhost:8000");
ws.onopen = () => {
  console.log("接続成功");
  ws.send("Hello Server!");
};

ws.onmessage = (e) => {
  console.log("サーバーからの応答:", e.data);
};

コンソール上で処理を実行した結果、以下のように通信が成功したという状態になりました。

接続成功

サーバーからの応答: Sat Jan 17 2026 13:02:47 GMT+0900 (日本標準時)

余談： JSR についてのリンクのメモ

今回の内容を進めている中で、途中で見かけた JSR をとりあえずリンクだけメモ。後で、いろいろ内容を調べてみたいと思ったものです。

●JSR: the JavaScript Registry
　https://jsr.io/

●Why JSR? - Docs - JSR
　https://jsr.io/docs/why