概要

「暇だし簡単なチャットでも作ってみようかなー」と思い
車輪の再発明とわかりつつ、ライブラリっぽいものを作ってみました。

Server Sent Event(SSE)ってなに

すごく大雑把に言うと
「コネクションを張りっぱなしにして、必要な時にメッセージ送信を行う仕組み」です。

これだけを聞くとWebSocketと一緒なのかな？と思いますが、
SSEはサーバ → クライアントへの一方通行となっています。

クライアントはSSEのエンドポイントへ接続しレスポンスを待つのではなく、
ソケットをそのままlistenし続け、サーバサイドでなにかしらPushしたいタイミングで、
クライアント側へデータを送信し処理を行います。

とても省略しましたが、とてもシンプルな仕組みであり
、
HTTP通信に親しみのある方なら、とっつきやすいと思います。

参考になった記事

環境

型定義が大好きなので、TypeScriptを使っています

完成したもの

ソースコードはこちら

完全にドキュメントが面倒になったパターンなので、
READMEなどはあとでちゃんと整備します

使い方

まずはインストール
npm install express-sse-middleware
yarn を使う場合は
yarn add express-sse-middleware

README通りですが一番シンプルな使い方が↓

import express from 'express';
import { sseMiddleware } from 'express-sse-middleware';

app.use(sseMiddleware);
app.get('/path', (req, res) => {
  const sentMsg = res.sse();

  let count = 0;
  setInterval(() => {
    sentMsg(String(count++));
  }, 1000); // １秒おきに数値を送信する
});
app.listen(3000);

res.sse()の戻り値であるsentMsgを実行するタイミングで
クライアントへと値が送信されます。

実装は60行程度なので非常にシンプルに作っています。
ぜひソースコードを見てみてください。

demo

~~サンプルプロジェクトのソース~~
~~Herokuで実際に動かしています。~~

こちら閉鎖しました

感想

仕様を完全に実装できてはいませんが、簡単に作ることができました。
むしろTypeScriptでNpmモジュールを作ったのが初めてなので
そちらのほうが大変だったかも・・・

SSEに関しては、Spring5でも採用されていたり
リアクティブプログラミングと相性が良かったりするので、今後は主流の技術になるかも知れません。

ちなみに、とりあえず動かしてみたかった系の実装なので
もし危険な処理や、他にベストプラクティスがあるのであれば、ぜひ教えてください！

ExpressでServer Sent Event (SSE) を簡単に扱ってみる

概要

Server Sent Event(SSE)ってなに

参考になった記事

環境

完成したもの

使い方

demo

感想