---
title: FreshにWebSocketのFirstクラスサポートが入った
tags:  #deno #typescript #fresh  
author: [とらのあなラボ](https://image.docswell.com/user/toranoana_lab)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LJ3WVYY1J5.jpg?width=480
description: 2026/06/03 toranoana.deno #25  虎の穴ラボ オクタニ  Fresh 2.3 に WebSocketのFirst Classサポートが導入。 導入の状況についてサンプルコードと、提供されている使い方の種類を例にとり紹介する。
published: June 05, 26
canonical: https://image.docswell.com/s/toranoana_lab/KE18P7-2026-06-05-181058
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LJ3WVYY1J5.jpg)

Fresh🍋にWebSocketの
First Classサポートが入った
2026/06/03 toranoana.deno #25
虎の穴ラボ オクタニ
Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.


# Page. 2

![Page Image](https://bcdn.docswell.com/page/8JDK855KEG.jpg)

自己紹介
奥谷 一陽
所属：虎の穴ラボ株式会社
仕事：Fantiaの開発 Ruby on Rails、 React
興味：Deno、TypeScript
最近: ストーン・オーシャンを全部見ました
X：@okutann88
github：Octo8080X
toranoana.deno 運営の1人
Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.


# Page. 3

![Page Image](https://bcdn.docswell.com/page/VEPK8GG378.jpg)

https://deno.com/blog/fresh-2.3
Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.


# Page. 4

![Page Image](https://bcdn.docswell.com/page/27VVN66N7Q.jpg)

Fresh 2.3 公開
- デフォルトで、クライアントに JSの転送が 0に
- トランジション対応
- Vite 統合改善
- 公式ミドルウェア追加
- CSP
- IP フィルタリング
- Islands のプロパティとして Temporal 関連の型に対応
and more
Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.


# Page. 5

![Page Image](https://bcdn.docswell.com/page/5JGLKNN57L.jpg)

Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.


# Page. 6

![Page Image](https://bcdn.docswell.com/page/47QYNQQLEP.jpg)

どんな風に書いて使えるのか？を紹介
Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.


# Page. 7

![Page Image](https://bcdn.docswell.com/page/KE4WGNN5J1.jpg)

1. 最小構成
import { App, staticFiles } from "fresh";
import { type State } from "./utils.ts";
接続すると
export const app = new App<State>();
「Client connected」を出力
app.use(staticFiles());
メッセージが届くと
「Echo: OOOOO」を返す
接続が閉じると
「Client disconnected」を出力
単一の通信のやりとりであれば
かなりシンプルに記述できる。
app.ws("/ws", {
open(_socket) {
console.log("Client connected");
},
message(socket, event) {
socket.send(`Echo: ${event.data} `);
},
close(_socket, code, reason) {
console.log("Client disconnected", code,
reason);
},
});
app.fsRoutes();
Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.


# Page. 8

![Page Image](https://bcdn.docswell.com/page/L71YD552JG.jpg)

Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.


# Page. 9

![Page Image](https://bcdn.docswell.com/page/G7WGY552E2.jpg)

2. しばらく接続する
接続したらメッセージを流し続ける
export const app = new App<State>();
app.use(staticFiles());
app.ws("/ws", {
open(_socket) {
console.log("Client connected");
},
message(socket, event) {
socket.send(`Echo: ${event.data} --`);
setInterval(() => {
socket.send(`polling Now: ${ new Date().toLocaleTimeString()}`);
}, 2000);
},
close(_socket, code, reason) {
console.log("Client disconnected", code, reason);
},
});
Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.


# Page. 10

![Page Image](https://bcdn.docswell.com/page/4JZLXNN4E3.jpg)

Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.


# Page. 11

![Page Image](https://bcdn.docswell.com/page/YE6W488GEV.jpg)

3. ディレクトリルーティングで触る
引数なし、 ctx.upgrade()から socketを共通の変数化して扱える。
用途次第では、このように使いたい人もいるはず
//routes/ws.ts
export const handler = define.handlers({
GET(ctx) {
const { socket, response } = ctx.upgrade();
const randomId = crypto.randomUUID();
socket.onopen = () => {
clients.add(socket);
if (workerTimer) {
return;
}
…
ソースコード全て見たい方 https://www.ccbaxy.xyz/blog/2026/05/30/js115/
Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.


# Page. 12

![Page Image](https://bcdn.docswell.com/page/GE5MQ99XE4.jpg)

ウィンドウ間同期
Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.


# Page. 13

![Page Image](https://bcdn.docswell.com/page/9729P22QJR.jpg)

まとめ
Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.


# Page. 14

![Page Image](https://bcdn.docswell.com/page/DJY45YYY7M.jpg)

まとめ
- Fresh に WebSocketのFirstClassサポートが入った
- 簡単に書ける .ws()
- どのクライアントにも一律に同じものを流す
- 1リクエスト 1+n件レスポンスを返す
運用にはマッチ
- しかし！
- チャットルームを立てるような運用にはミスマッチ？
- ctx.upgrade() も併用する。
Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.


# Page. 15

![Page Image](https://bcdn.docswell.com/page/V7NYNPPRE8.jpg)

ありがとうございました
Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.