Server-Sent Events (SSE) - Implement Client and Server (Express.js)

hi there my name is ranjeet today i am going to check how we can implement servers and events servers and events means the client can listen to a server for the events and the server can send the events and the client can accept the messages javascript provide a api called event source so we can use that api to create a even source instance and listen to the server and accept the messages servers and events is unidirectional connection that means we can only send message from server to client we cannot send message from client to server here i'm going to implement client and server first i'm going to implement the server i'm going to use express for setup the server create a directory called ssc open it in vs code initialize yarn install the express package and create a file called server.js now we can create a express app and we can listen to the port 8000 and log a message to the console in the callback we can set a get method handler for the root path set response content type to event stream and allow codes to all origins now we can send date string in every second when client close the connection we can log a message to the console clear the interval and end the response we can log a message to the console at the top of the handler the server setup is ready now we can work on the client we can create the index.html file create a division with messages id and embed the client.js file now we can work on client.js create an even source instance by adding our server url as the first parameter when there is a message we can call the update message with even data when there is an error we can call update message function with a message and we can close the event source let's create the update message function here we are appending a paragraph with the message to the messages element now the client setup is completed we can serve the server to serve the client i'm going to use a npm package called serve so i'm installing that with yarn and serve the client with serve command now the client is servered on port 5000 let's open it in browser yes the server console is showing there is a new client connection and we're receiving messages from the server let's close the server yes we received the message let's serve again and try to close the client connection yes the server console is showing the client is close to the connection thanks for watching this session i hope this session helpful for you see you next video

Channel: renjithspace

Views: 678

Keywords: server sent events, sse, javascript, nodejs, expressjs, eventsource, event stream, server, client

Id: piEYV-fsYbA

Length: 3min 13sec (193 seconds)

Published: Sat Jul 03 2021