はじめに
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