Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

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

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); // 1秒おきに数値を送信する
});
app.listen(3000);

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

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

demo

サンプルプロジェクトのソース

Herokuで実際に動かしています。
- SSEデモページ
- 簡易チャット

チャットはみんな共有されるのでモラルを守って遊んでください。
また、どれくらいの接続に耐えられるのかは不明なので
もし落ちてた場合はご了承ください。

感想

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした