Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Endo_Hizumi
September 04, 2019

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

Endo_Hizumi

September 04, 2019
Tweet

More Decks by Endo_Hizumi

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 21
    容易に実装できる

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 27
    簡単でしょ?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide