Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@taqm

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

概要

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

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で実際に動かしています。

こちら閉鎖しました

感想

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

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

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

6
Help us understand the problem. What is going on with this article?
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
taqm
1児のパパです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?