Server-sent eventsを使ってみた / I tried using Server-sent event

by Endo_Hizumi

Slide 1

Slide 1 text

Server-sent eventsを使ってみた 2019年9月4日(水）残暑に負けるな！自由研究 LT大会遠藤ヒズミ 1

Slide 2

Slide 2 text

2 こんばんは、遠藤ヒズミと言います。

Slide 3

Slide 3 text

3 都内で、SESのWebエンジニアしてます

Slide 4

Slide 4 text

4 今日は、紹介も兼ねて Server-sent eventsを使った感想を話します。

Slide 5

Slide 5 text

5 なぜ、Server-sent eventsなの？ GameClient GameServer Jinro JinroResponcer.php Broadcast.php member activity_logs triggerで　書き込む発言・投票などの行動書き込みレコード取得 JSONで送信 5 今、開発している人狼のWebアプリの仕組みがこうなっています。

Slide 6

Slide 6 text

6 なぜ、Server-sent eventsなの？ GameClient GameServer Jinro JinroResponcer.php broadcast.php member activity_logs triggerで　書き込む発言・投票などの行動書き込みレコード取得 JSONで送信 6 プレイヤーの行動をサーバーに送るには、何も考えずに、HTTPリクエストを送れば良い。

Slide 7

Slide 7 text

7 なぜ、Server-sent eventsなの？ GameClient GameServer Jinro JinroResponcer.php Broadcast.php member activity_logs triggerで　書き込む発言・投票などの行動書き込みレコード取得 JSONで送信 7 では、サーバーに届いたプレイヤーの行動をどうやって、他のプレイヤーに伝えたらよいのか？

Slide 8

Slide 8 text

なぜ、Server-sent eventsなの？サーバーから情報を取得する方法 ● ポーリング ● comet ● WebSocket ● Server-sent events 8

Slide 9

Slide 9 text

なぜ、Server-sent eventsなの？ポーリング・Comet →あるかわからない情報のために、周期的にリクエスト送るのは、面倒・ムダが多い・しんどい →できれば、能動的にサーバーから送ってほしい 9

Slide 10

Slide 10 text

なぜ、Server-sent eventsなの？選ばれたのは、綾鷹Server-sent eventsでした。 ● 従来の延長でとっつきやすい・理解しやすい ● サーバー・クライアント共に容易に実装できる ● 切断時に再接続を行ってくれる ● HTTP通信なので、HTTPレスポンスコードで制御できる ● 独自にイベントを定義できる。 10

Slide 11

Slide 11 text

Slide 12

Slide 12 text

なぜ、Server-sent eventsなの？選ばれたのは、綾鷹Server-sent eventsでした。 →　送信側はAjaxで実装済みなので、WebSocketで再実装はやる気が起きなかった（一番の理由）別に独自プロトコルにひよったわけじゃねーし 12

Slide 13

Slide 13 text

Server-sent eventsとはクライアントからのリクエスト無しに、サーバーからデータを送信できる HTML5のAPIの１つです。 13

Slide 14

Slide 14 text

Server-sent eventsとはクライアントと張ったコネクションにchunkedデータを送信することで、コネクションを終了させずに、サーバーを始点としたデータを送信を実現しています。 Client Http Server 接続要求 14

Slide 15

Slide 15 text

Server-sent eventsとはクライアントと張ったコネクションにchunkedデータを送信することで、コネクションを終了させずに、サーバーを始点としたデータを送信を実現しています。 Client Http Server chunked 15

Slide 16

Slide 16 text

Server-sent eventsとはクライアントと張ったコネクションにchunkedデータを送信することで、コネクションを終了させずに、サーバーを始点としたデータを送信を実現しています。 Client Http Server chunked chunked 16

Slide 17

Slide 17 text

Server-sent eventsとはクライアントと張ったコネクションにchunkedデータを送信することで、コネクションを終了させずに、サーバーを始点としたデータを送信を実現しています。 Client Http Server chunked chunked chunked 17

Slide 18

Slide 18 text

Server-sent eventsとはクライアントと張ったコネクションにchunkedデータを送信することで、コネクションを終了させずに、サーバーを始点としたデータを送信を実現しています。 Client Http Server chunked chunked chunked chunked 18

Slide 19

Slide 19 text

従来技術と比較 19 リクエストの有無レスポンスの種類送信後のコネクション返答タイミングポーリング毎回必要通常のHTTP レスポンス終了可及的速やかに comet (ロングポーリング) 毎回必要通常のHTTP レスポンス終了更新まで保留可 Server-sent events 初回のみ chunked 継続更新まで保留可

Slide 20

Slide 20 text

利用局面と活用事例利用局面 ● チャットアプリで、メッセージの送信 ● センサーデータをリアルタイム表示するWebアプリ ● 並列でのWebAPIの呼び出し ● その他、非同期でサーバーからデータを受信する処理活用事例 ● GREEチャット(2014年6月時点) ● 某電気通信事業者のトイレの空室確認システム 20

Slide 21

Slide 21 text

21 容易に実装できる

Slide 22

Slide 22 text

22 どれだけ簡単なのかというと・・・

Slide 23

Slide 23 text

EventSourceコンストラクタの引数に通信先を渡す 23

Slide 24

Slide 24 text

onmessageのコールバックに受信後の処理を書く 24

Slide 25

Slide 25 text

ヘッダーにContent-Type: text/event-streamを記述 25

Slide 26

Slide 26 text

あとは、送信したい内容を書けばおk 26

Slide 27

Slide 27 text

27 簡単でしょ？

Slide 28

Slide 28 text

注意！データの末行を空行（\n）で区切らないと送信されない。このことに気がつくまでが、２日くらいかかって、しんどかった。あと、Internet ExplorerとEdgeでは、ひと手間かける必要がある。 28

Slide 29

Slide 29 text

まとめ ● Server-Sent eventsは、コネクションを張りっぱなしにして、サーバーから能動的にデータを送れる技術 ● 数行のコードでサーバー・クライアント共に容易に実装できる ● センサーデータのリアルタイム表示など、テキストでの非同期でのデータ受け取りが得意 29

Slide 30

Slide 30 text

まとめ ● Server-Sent eventsは、コネクションを張りっぱなしにして、サーバーから能動的にデータを送れる技術 ● 数行のコードでサーバー・クライアント共に容易に実装できる ● センサーデータのリアルタイム表示など、テキストでの非同期でのデータ受け取りが得意 30 終わり！聞いてくれてありがとう！