Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Goで作って学ぶWebSocket
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
ryuichi1208
February 22, 2025
Technology
4.2k
5
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Goで作って学ぶWebSocket
ryuichi1208
February 22, 2025
More Decks by ryuichi1208
See All by ryuichi1208
入門 再発防止策
ryuichi1208
17
7k
金曜日デプロイ、するかしないか.pdf
ryuichi1208
1
74
会話で作る信頼性
ryuichi1208
0
180
シグナル(Unix)と仲良くなる
ryuichi1208
1
44
AI前提のサービス運用について再考する
ryuichi1208
6
1.4k
A Shallow Dive into the World of TCP
ryuichi1208
1
670
入門リトライ
ryuichi1208
20
8.3k
超入門SRE 2025
ryuichi1208
4
1.5k
コード化されていない稼働中のサーバを移設_再構築する技術
ryuichi1208
20
15k
Other Decks in Technology
See All in Technology
フィジカル版Github Onshapeの紹介
shiba_8ro
0
260
MCP Appsを作ってみよう
iwamot
PRO
4
660
2026TECHFRESH畢業分享會 - Lightning Talk - 資料也要 CI/CD? 用 Airbyte 自動化資料同步
line_developers_tw
PRO
0
1.1k
Disciplined Vibes: Scaling AI-Assisted Engineering
sheharyar
0
150
On-behalf-of Token exchange with AgentCore Identity
hironobuiga
2
220
iAEONの段階的リアーキテクト戦略 / iAEON's_Gradual_Re-architecture_Strategy
aeonpeople
0
140
攻撃者視点で考えるDetection Engineering
cryptopeg
3
1.9k
Chainlitで作るお手軽チャットUI
ynt0485
0
260
Agent Skills設計で柔軟性と硬さのバランスが難しい話
nassy20
0
130
【Snowflake Summit 2026 Recap!!】Snowflake Summit Deep Dive: Security & Governance
civitaspo
1
220
自宅LLMの話
jacopen
1
600
Oracle AI Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
6
1.5k
Featured
See All Featured
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
410
Scaling GitHub
holman
464
140k
A Modern Web Designer's Workflow
chriscoyier
698
190k
We Are The Robots
honzajavorek
0
250
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5.9k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
580
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
62
54k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
160
Transcript
Goで作って学ぶWebSocket 渡部⿓⼀ Open Source Conference 2025 Tokyo/Spring
• 渡部⿓⼀ • 仙台在住 • 障害対応、EOL対応 • 初OSC LT ⾃⼰紹介
WebSocketやってますか?
• お仕事でIVRのサービスをやってる • IVRとは? ◦ ⾃動⾳声応答システムのこと ◦ 着信時にオペレーターの代わりに⾃動⾳声で案内を提供 ▪ レストランとかの⾃動予約とかそういうサービス
◦ ⾳声のやり取りをするためにWebSocketを使ったりします
WebSocketの特徴
WebSocketの特徴 • 双⽅向通信‧全⼆重通信 ◦ クライアントとサーバーの両⽅が同時にデータを送受信可能 ◦ HTTPとは異なり、リクエスト‧レスポンスの概念がない • 持続的な接続を⼀度確⽴したあとは、明⽰的に切断されるまで維持される ◦
HTTPのように毎回接続を確⽴するオーバーヘッドがない • チャットアプリとかで使われている ◦ GitHub Actionsのログをリアルタイムでみれたり株価の表⽰とか
None
HTTPと全然違う!
⾃作しよう!
WebSocketを⾃作する • RFC6445 で定義されている • WebSocketのプロトコル概要 ◦ Step1: ハンドシェイク処理 ◦
Step2: フレームの解析 ◦ Step3: フレームの送受信 • OpenTelemetryでトレースとかログを最初から仕込んでいく
None
1. HandShake • クライアントからのリクエストを受け取る • Upgradeヘッダーを確認 • Sec-WebSocket-Keyを取得 ◦ WebSocketハンドシェイクで使⽤されるランダムな⽂字列
• Sec-WebSocket-Acceptを⽣成 • HTTP 101 Switching Protocols をレスポンス • WebSocket接続を確⽴
1. HandShake
Step2: フレームの解析 • ヘッダー解析 ◦ 最初の 2バイト を読み込み、FIN フラグと Opcode
を取得 ▪ Opcode(オペコード)は、WebSocketフレームにおける「操作コード」のことを指す ◦ Mask ビットをチェックし、ペイロード⻑を取得 • ペイロード⻑の処理 ◦ 126 の場合 → 追加の2バイト(16ビット)を読み込む ◦ 127 の場合 → 追加の8バイト(64ビット)を読み込む • マスク処理 ◦ クライアントからのデータは必ずマスクされる ◦ 4バイトのマスクキーを取得し、ペイロードデータを XOR でデコード • ペイロードの読み取り ◦ 取得した⻑さ分のデータを読み込む ◦ マスクがある場合、復号処理を⾏う
None
None
Step3: フレームの送受信 • データ送信 ◦ 送信者は、データをWebSocketフレームにエンコードして送信します ◦ フレームは常にテキストまたはバイナリのメッセージとして送られます ◦ メッセージが⻑い場合、複数のフレームに分割して送信されます
• データ受信 ◦ 受信者はフレームを解析し、データを取り出します ◦ WebSocketでは、各フレームの終わりが「フラグ」で⽰されるため、フレー ムが完全に送られたかを確認できます ◦ 受信側はフレームを組み⽴て、完全なメッセージを取得します
None
None
今後の展望
今後の展望 • サブプロトコルとかも実装したい • プロトコルの中⾝まで解釈するProxyみたいなのを作ってみたい ◦ NginxでもProxyはできるがTCPの通信として流すくらいでアップストリーム の間に⼊るわけではなさそう
まとめ
まとめ • 全⼆重通信(フルデュプレックス)楽しい • 全部で1500⾏くらいで割とシンプル • 情報が結構豊富。WebSocketだけの本もオライリーから出ている • Copilotとかでいい感じに先に実装されてしまっているのでスクラッチ感は薄め
よき双⽅向通信ライフを!
参考書籍 • Websocket: Lightweight Client-Server Communications / O'Reilly Media •
Real World HTTP 第3版 / オライリー‧ジャパン • ハイパフォーマンス ブラウザネットワーキング / オライリー‧ジャパン