ネイティブEventSourceクライアントとその他EventSourceクライアントを試してみた結果

Frontend

はじめに

今の案件でリアルタイム処理をする要件があり、SSE(Server Sent Event)のEventSource Clientライブラリを色々比較してみたので、これからクライアントで検討する際は参考に!

内容

EventSource

まずネイティブEventSourceはMozillaが提供しているこちらです。ネイティブEventSource なのでTypeScriptも対応しているし、Corsの認証系もばっちりです。ただし、IEは非対称なので注意が必要。

IEなにそれ。おいしいの??

ただし、Jestでテストコードを実行するときに少し手間取るのでそこが注意点です。

JestでEventSourceを実行可能にする

fetchタイプのEE

This library is a pure JavaScript implementation of the EventSource client. 
The API aims to be W3C compatible.

You can use it with Node.js or as a browser polyfill for browsers 
that don't have native EventSource support.

ブラウザ差分を埋めた(Polyfillした)ライブラリなようです。こちらは使用したときはCORS問題が発生してうまく使えなかったです。。

TypeScriptで使用したので普通にJavaScriptで使用する分には問題なく使えるかもしれません(未検証)

https://github.com/EventSource/eventsource

複数ブラウザ対応のEE

こちらも選ぶ際に検討しましたが、TypeScriptが標準で対応されていなかったので使用には至りませんでした。

https://github.com/Yaffle/EventSource

まとめ

比べるよ

比べてみました。結局CORS問題が解決できないとサーバと通信できないので私達はネイティブEEを選択しました

ネイティブEE Yaffle/EventSource EventSource/eventsource
TypeScript対応
CORS対応 ? (未検証) ☓ (TSのみの可能性)
複数ブラウザ対応 ☓(IE) ? (未検証)

参考URL

#EventSource#SSE

Related Links


JestでEventSourceを実行可能にする
Yoshiki Ohashi
2x歳の個人事業主エンジニア。SI企業1年, Webベンチャー企業2年で上流から下流の経験を経て独立。 エンジニアらしく性格は温和。プロジェクトチームに心理的安全性を求める。go gin | Spring | Java | Kotlin | Vue | Python | 筋トレ | キャンプ | 個人開発 | 新潟出身

よく読まれている記事


Gatsbyでブログを始めるまで
GatsbyにShare機能、OGPタグをつける
Gatsbyにタグ機能、カテゴリ機能をつける(基礎編)
DL実装するときに理解すること
多機能なGatsbyJSのThemeをつくってnpmに公開した話
© 2020 Yoshiki Ohashi All rights reserved.