You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
SSE is a easy way to commutate with the client side in a single direction. it has loss cost and efficiency way compared to other protocols like Socket or polling query.
Here is a minium checklist to create a SSE service:
Server Side
response three HTTP headers that tell the client that the response is a SSE stream:
Connection: keep-alive
Content-Type: text/event-stream
Cache-Control: no-cache
response data with data , event and id attributes
That's all
Client Side
create a EventSource object
addEventListener to the EventSource object
That's all
There is a simple example to show how to create a SSE service using Node.js.
Installation
Install dependencies before running example.
$ yarn
Start
$ yarn start // start client
$ yarn run server // start server
After run command above, you can open http://localhost:1234 see the result in the browser.
Server
The server is a simple Node.js application that listens on port 3000. I create a Server Sent Event while sends data to the client interval in one second. Here is the core core of the server.
ctx.set({// necessary HTTP Headers for server sent eventsConnection: "keep-alive","Content-Type": "text/event-stream","Cache-Control": "no-cache",// CORS settings"Access-Control-Allow-Origin": "*","Access-Control-Allow-Credentials": "true",});constpipe=newstream.PassThrough();// normalize message without event name specifiedpipe.write(`id: ${Math.random()}\ndata: hello from steam\n\n`);constinterval=setInterval(()=>{// normalize message with event name(eg:currentTime) specifiedpipe.write(`id: ${Math.random()}\nevent: currentTime\ndata: ${newDate().toUTCString()}\n\n`);},1000);ctx.body=pipe;// clear interval and destroy stream object while client disconnectctx.res.on("close",()=>{clearInterval(interval);pipe.destroy();});
Client
In the client side, it's easy to create a event source to listen on the server. the EventSource object return a readable stream which you can addEventListener by open, message and error event. Also, you can create custom event listeners by addEventListener method. see example below:
constsource=newEventSource(API,{withCredentials: true,});source.addEventListener("open",(e: Event)=>{console.log("event source is open");});// event name not specified, message is defaultsource.addEventListener("message",(e: MessageEvent)=>{console.log("'message' event received:",e.data);});// event name(eg:currentTime) specifiedsource.addEventListener("currentTime",(e: any)=>{console.log("'currentTime' event received:",e.data);});source.addEventListener("error",(e: Event)=>{console.error("event source error",e);source.close();});
SSE (server-sent events) example using Node.js
SSE is a easy way to commutate with the client side in a single direction. it has loss cost and efficiency way compared to other protocols like Socket or polling query.
Here is a minium checklist to create a SSE service:
Server Side
response three HTTP headers that tell the client that the response is a SSE stream:
response data with
data
,event
andid
attributesThat's all
Client Side
create a
EventSource
objectaddEventListener to the
EventSource
objectThat's all
There is a simple example to show how to create a SSE service using Node.js.
Installation
Install dependencies before running example.
Start
After run command above, you can open
http://localhost:1234
see the result in the browser.Server
The server is a simple Node.js application that listens on port 3000. I create a Server Sent Event while sends data to the client interval in one second. Here is the core core of the server.
Client
In the client side, it's easy to create a event source to listen on the server. the
EventSource
object return a readable stream which you can addEventListener byopen
,message
anderror
event. Also, you can create custom event listeners byaddEventListener
method. see example below:Related repository: sse-example
Enjoy Hacking!
The text was updated successfully, but these errors were encountered: