ts-express-sse
v1.0.3
Published
A Strongly typed server sent events express middleware for quick & easy node express sse implementation
Downloads
25
Maintainers
Readme
ts-express-sse
A Strongly typed server sent events express middleware for quick & easy node express sse implementation.
This module is strongly typed you'll get useful helpers while coding! You can use both in javascript and typescript projects.
About
ts-express-sse
is designed for simplicity. Need to send server-sent events without unnecessary complexity or fallback mechanisms? This library makes it easy.
Installation:
npm install --save ts-express-sse
or
yarn add ts-express-sse
Usage example:
Options:
You can pass an optional options object to the constructor. Currently it only supports changing the way initial data is treated. If you set isSerialized
to false
, the initial data is sent as a single event. The default value is true
.
const sse = new SSE(["Hello world", "Node express sse", "ts-express-sse"], { isSerialized: false, initialEvent: 'optional initial event name' });
Example 1 - Server:
const SSE = require('ts-express-sse');
const express = require('express');
const http = require ("http")
// express app
const app = express();
// create sse instance
const sse = new SSE(["Hello world", "Node express sse", "ts-express-sse"]);
app.get('/stream', sse.init);
const content = "sse node js test";
const eventName = "my event";
const customID = Math.random()
// send content
sse.send(content);
// send content with custom event name
sse.send(content, eventName);
// send content with custom event & custom ID
sse.send(content, eventName, customID);
// Update the data initially served by the SSE stream
sse.updateInit(["array", "containing", "new", "content"]);
// Data to be serialized as a series of events
sse.serialize(["data", "to", "be", "sent", "as", "serialized", "events"]);
// get port
const PORT = process.env.PORT || 8081
// create server
const server = http.createServer(app);
// Start Server on port 8081
server.listen(PORT, function () {
console.log(`App started: http://localhost:${PORT}`, );
});
Example 2 - Server ES support:
import SSE from 'ts-express-sse';
import express from 'express'
import http from "http"
// express app
const app = express();
// create an sse instance
const sse = new SSE(["Hello world", "Node express sse", "ts-express-sse"]);
app.get('/stream', sse.init);
const content = "sse node js test";
// send content
sse.send(content);
// get port
const PORT = process.env.PORT || 8081
// create server
const server = http.createServer(app);
// Start Server on port 8081
server.listen(PORT, function () {
console.log(`App started: http://localhost:${PORT}`, );
});
Example 3 - Server - Ping Clients to keep sse active:
import SSE from 'ts-express-sse';
import express from 'express';
// express app
const app = express();
const sse = new SSE(["Node express sse", "ts-express-sse"]);
app.get('/stream', sse.init);
// constantly send sse stream to keep connected clients active to avoid disconnection due to inactivity
setInterval(() => {
sse.send("Hello, server is active", 'ping');
}, 25000);
// get port
const PORT = process.env.PORT || 8081
// create server
const server = http.createServer(app);
// Start Server on port 8081
server.listen(PORT, function () {
console.log(`App started: http://localhost:${PORT}`, );
});
Example 4 - Server - use with compression:
Incase ts-express-sse doesn't work as expected when using it with compression most especially with the latest express version, please use the workaround below;
import SSE from 'ts-express-sse';
import express from 'express'
import http from "http"
import compression from
// express app
const app = express();
// add this workaround
app.use(compression({
filter: (req, res) =>{
const outgoingHeaders = res?.getHeaders()
const contentType = outgoingHeaders['content-type']
return !contentType?.toString().includes("text/event-stream")
}
}));
// create an sse instance
const sse = new SSE(["Hello world", "Node express sse", "ts-express-sse"]);
app.get('/stream', sse.init);
const content = "sse node js test";
// send content
sse.send(content);
// get port
const PORT = process.env.PORT || 8081
// create server
const server = http.createServer(app);
// Start Server on port 8081
server.listen(PORT, function () {
console.log(`App started: http://localhost:${PORT}`, );
});
Client - HTML project or React or Nextjs:
const es = new EventSource('http://localhost:8081/stream', );
// // or
// const es = new EventSource('http://localhost:8081/stream', {withCredentials: true} );
es.onmessage = function (event) {
console.log(event.data)
};
es.addEventListener(eventName, function (event) {
console.log(event.data)
});
Support us
You enjoyed using this package?
Happy coding!