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
Server-sent eventsを使ってみた / I tried using Server-sent event
Search
Endo_Hizumi
September 04, 2019
Technology
1
1.1k
Server-sent eventsを使ってみた / I tried using Server-sent event
Endo_Hizumi
September 04, 2019
Tweet
Share
More Decks by Endo_Hizumi
See All by Endo_Hizumi
テレビを飲み込め! Webの嵐!! / Swallow the TV! Web storm! !!
endohizumi
1
75
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
250
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
160
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
150
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
800
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
99
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
75
キレない変数の扱い方 /How to handle variables no anger
endohizumi
0
130
Netlifyで、ポートフォリオをつくってみた
endohizumi
0
93
Other Decks in Technology
See All in Technology
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.1k
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
150
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Designing Experiences People Love
moore
136
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Infographics Made Easy
chrislema
238
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Embracing the Ebb and Flow
colly
81
4.3k
Design by the Numbers
sachag
277
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
A designer walks into a library…
pauljervisheath
201
24k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Transcript
Server-sent eventsを 使ってみた 2019年9月4日(水)残暑に負けるな!自由研究 LT大会 遠藤ヒズミ 1
2 こんばんは、遠藤ヒズミと言います。
3 都内で、SESのWebエンジニアしてます
4 今日は、紹介も兼ねて Server-sent eventsを使った 感想を話します。
5 なぜ、Server-sent eventsなの? GameClient GameServer Jinro JinroResponcer.php Broadcast.php member activity_logs
triggerで 書き込む 発言・投票などの行動 書き込み レコード 取得 JSONで送信 5 今、開発している人狼のWebアプリの仕組みがこうなって います。
6 なぜ、Server-sent eventsなの? GameClient GameServer Jinro JinroResponcer.php broadcast.php member activity_logs
triggerで 書き込む 発言・投票などの行動 書き込み レコード 取得 JSONで送信 6 プレイヤーの行動をサーバーに送るには、何も考えず に、HTTPリクエストを送れば良い。
7 なぜ、Server-sent eventsなの? GameClient GameServer Jinro JinroResponcer.php Broadcast.php member activity_logs
triggerで 書き込む 発言・投票などの行動 書き込み レコード 取得 JSONで送信 7 では、サーバーに届いたプレイヤーの行動を どうやって、他のプレイヤーに伝えたらよいのか?
なぜ、Server-sent eventsなの? サーバーから情報を取得する方法 • ポーリング • comet • WebSocket •
Server-sent events 8
なぜ、Server-sent eventsなの? ポーリング・Comet →あるかわからない情報のために、周期的にリクエスト送るのは、面倒・ ムダが多い・しんどい →できれば、能動的にサーバーから送ってほしい 9
なぜ、Server-sent eventsなの? 選ばれたのは、綾鷹Server-sent eventsでした。 • 従来の延長でとっつきやすい・理解しやすい • サーバー・クライアント共に容易に実装できる • 切断時に再接続を行ってくれる
• HTTP通信なので、HTTPレスポンスコードで制御できる • 独自にイベントを定義できる。 10
なぜ、Server-sent eventsなの? 選ばれたのは、綾鷹Server-sent eventsでした。 • 従来の延長でとっつきやすい・理解しやすい • サーバー・クライアント共に容易に実装できる • 切断時に再接続を行ってくれる
• HTTP通信なので、HTTPレスポンスコードで制御できる • 独自にイベントを定義できる。 → 簡単でとっつきやすかった 11
なぜ、Server-sent eventsなの? 選ばれたのは、綾鷹Server-sent eventsでした。 → 送信側はAjaxで実装済みなので、WebSocketで再実装はやる気が 起きなかった(一番の理由) 別に独自プロトコルにひよったわけじゃねーし 12
Server-sent eventsとは クライアントからのリクエスト無しに、サーバーからデータを送信できる HTML5のAPIの1つです。 13
Server-sent eventsとは クライアントと張ったコネクションにchunkedデータを送信することで、コ ネクションを終了させずに、サーバーを始点としたデータを送信を実現し ています。 Client Http Server 接続要求 14
Server-sent eventsとは クライアントと張ったコネクションにchunkedデータを送信することで、コ ネクションを終了させずに、サーバーを始点としたデータを送信を実現し ています。 Client Http Server chunked 15
Server-sent eventsとは クライアントと張ったコネクションにchunkedデータを送信することで、コ ネクションを終了させずに、サーバーを始点としたデータを送信を実現し ています。 Client Http Server chunked chunked
16
Server-sent eventsとは クライアントと張ったコネクションにchunkedデータを送信することで、コ ネクションを終了させずに、サーバーを始点としたデータを送信を実現し ています。 Client Http Server chunked chunked
chunked 17
Server-sent eventsとは クライアントと張ったコネクションにchunkedデータを送信することで、コ ネクションを終了させずに、サーバーを始点としたデータを送信を実現し ています。 Client Http Server chunked chunked
chunked chunked 18
従来技術と比較 19 リクエストの 有無 レスポンスの 種類 送信後の コネクション 返答 タイミング
ポーリング 毎回必要 通常のHTTP レスポンス 終了 可及的速や かに comet (ロング ポーリング) 毎回必要 通常のHTTP レスポンス 終了 更新まで 保留可 Server-sent events 初回のみ chunked 継続 更新まで 保留可
利用局面と活用事例 利用局面 • チャットアプリで、メッセージの送信 • センサーデータをリアルタイム表示するWebアプリ • 並列でのWebAPIの呼び出し • その他、非同期でサーバーからデータを受信する処理
活用事例 • GREEチャット(2014年6月時点) • 某電気通信事業者のトイレの空室確認システム 20
21 容易に実装できる
22 どれだけ簡単なのかというと・・・
EventSourceコンストラクタの引数に通信先を渡す 23
onmessageのコールバックに受信後の処理を書く 24
ヘッダーにContent-Type: text/event-streamを記述 25
あとは、送信したい内容を書けばおk 26
27 簡単でしょ?
注意! データの末行を空行(\n)で区切らないと送信されない。 このことに気がつくまでが、2日くらいかかって、しんどかった。 あと、Internet ExplorerとEdgeでは、ひと手間かける必要がある。 28
まとめ • Server-Sent eventsは、コネクションを張りっぱなしにして、サー バーから能動的にデータを送れる技術 • 数行のコードでサーバー・クライアント共に容易に実装できる • センサーデータのリアルタイム表示など、テキストでの非同期での データ受け取りが得意
29
まとめ • Server-Sent eventsは、コネクションを張りっぱなしにして、サー バーから能動的にデータを送れる技術 • 数行のコードでサーバー・クライアント共に容易に実装できる • センサーデータのリアルタイム表示など、テキストでの非同期での データ受け取りが得意
30 終わり!聞いてくれてありがとう!