Server-Sent Event + Spring Boot | Part 1

welcome everyone to this Java spring tutorial so today we'll learn about server-sent events and we'll build a new timeline application to practice some real-time events with Java Springwood so what are service ends events so server-sent events are real-time events there are one kind of HTTP women and use it for unidirectional communication so only the server can can push events to the clients but the clients cannot send events observer not like WebSocket which is for bi-directional communication so server sent events are emitted by the server and receive it by the browser how first the clients subscribe to a stream of data we leave the connection open between the client and the server then the server can send as many events as humans for the use case for example you can send updates or continuous data streams to different client browser and different subscriber so first the client send a first connection request the server respond to this request and at this point the connection is established between client and server and we leave this connection open so the server can send different events to the clients and we can also have many clients and many servers endpoint so as a requirement for this demo we'll use Springwood so you can download the ide spring tools on this URL I will use the events or JavaScript API introduced in html5 and we'll also use postman to send some last request to to the server then to dispatch those requests to all the client so you can go on this this website of spring Iowa tools and download your ID sprinkles the same for postman you can go on the website and download your postman so first let's create a spring boot project so I have my spring tools just here new spring starter project I have to give a name to my project so real-time news I'm using Java 8 the other parameter are the default one here I need to use some dependencies spring boot dev tools then at the spring web finish so I have my project set just here with my main method to execute my friend boot application so I won't that my application run on some port so server port equal to 60 turkey tree for example then in my application and we create a controller so news controller finish so it's a rest controller then in my controller I will need to method method for subscription for client subscription and one method for for this pageant events to all clients so we just need one class one controller news controller and just two method one for subscription and the order to dispatch events so first let's create subscription endpoint so here I will need ECC emitters so this very important Java object for service and events so subscribe and here I will return an ACC emitter so I will create an ACC emitter so equal new ACC emitter rest here and I will return it so that's my endpoint so I have and that's all so in my endpoints so I have to use the request my pin annotation I have to give a value for my endpoint for example just subscribe then I will just put some consumption parameter so consume media type or value and here I will put a cross origin annotation because I didn't configure my spring boot application to handle some criss cross origin concerns but the clean way is not using this annotation but configure it properly so that's the end point for the subscription I will just send an event to my clients through na CA the subscription so I will use it is the emitters builder for events so name so in it I will need to use a try/catch for i/o exception so that's all but when the client will sub C will subscribe to the event source we need to store it to send another events to the clients so here I will create list of emitter it's not this package so we have some ACC emitter here so emitters equal new I will use copy on array list because it's the treat safe implementation of list interface so you can go on to documentation copy on array list so it's a treat safe and to use choose it with the many subscribers like that it's a good choice so here I will store my ACC emitter because it's only object reference that holds the connection with the clients so we can use it afterwards and send other events to my client so that's all so let's create the HTML page so here I have an empty HTML page I have used just some link for some basic stuff bootstrap and he so we have to use the event source JavaScript API only where the document is loaded so in the script tags I will use this JavaScript function document ready so it will be executed when the document will be loaded so here I will use var so here even source equal the object event source and as an argument I must give him an URL so we create an URL here URL endpoint equal to some URL so that's all true subscribe to an event source just use the URL so here I will use the endpoint subscribe of my spring boot application sort will be running on HTTP localhost then the port is 6033 do you remember and the application property it's my port then the end point is subscribe so that's all to subscribe client so let's run the application this year this is my empty HTML page I will go on Network and here I will start my spring food application real-time news start I will wait for my application to start so my application is started I will refresh my page so I have my script here document ready and my event source just here so refresh it's not working why so I have subscribe here 6033 I will put a breakpoint just here failure to construct eventsource I have just forgot the new operator so new event source so now it will be better so Network load I will get rid of my breakpoint and here I have my subscription I have a status of 200 and here I have a new section which is event stream and we can see that the content type is text event stream so the subscription is done so now let's use the other method let's create the other method to dispatch events so here I will create another method to dispatch some events so public avoid dispatch events through to clients then I will use a request param string fresh news for example I just have to stop my application then for my end point I will also use a request mapping in here to dispatch event and the method off or we can just use post mapping so that's all for the annotation then I will loop over this list where I stored my different clients so here for ECC emitter so emitter in emitters I will send event to every amateur so here the name is latest latest news or just latest news and some data and for the data I can put the fresh news that I will receive from the request so that's all for to dispatch event to different subscribers so now I will use postman so when you will download postman you can create a new collection just here so news event source create then I will create ad request so a news request and here I have my rest request so it will be a post because here it's a post mapping and the value will be localized 6033 and my end point is dispatch event and in the body I will put some data of my request param so fresh news for example Khurana is ending so now we are good so what I will do now I will just check from different events in the network so i will restart my application real-time news sorry I'm waiting for the start so here when I reload my page here I have a subscription in of just here so my emitter is torrid in this list so here I can go there so when I will use my request in postman so I will just send a simple request to this endpoint then I will loop over my emitters and send an events to all my clients that's all so here the subscription here I will dispatch some events so here I I will have some problem because it is already complete so because we can use some sec emitters are completed and we can remove them from the list so here I can use so on completes on completion how use Rhonda and here I will remove immature from my list so remove this emitter so when my ECC emitter is completed I will remove it but the problem here is that I don't put any time out in my ECC emitter so here I have used this constructor just here without timeout but we can create an ECC emitter with custom custom timeout value so here he is we can put long so we'll just put the maximum of this value so max value so that's all I will run my application research it then first I have a subscription I will use my postman in here I have another exception why I owe exception client abort exception because we because we are storing many SEC imagers in the copy on our a ArrayList but when clients quite we are not removing the SEC emitters so we can use we can remove it here when we will try to send an event to an ACC emitter and he is not a present we just remove it from the list and that's all so now I have subscribed to my endpoint I will use postman to dispatch my event and here I have my latest news karana is ending hallelujah and it's the value I have give to my request fresh news so let's build an article some news article application with this so we can add an event listener for our event source so here add event listener then for example the event will be the name of my event latest news just here and we will use some function to do some stuff with these events so here I will have an event and for example I will just add some code to add some news articles so I have some cases normally it's more clean in another CSS file but it's okay so I have my CSS here for my little application and for my event listener so every time I will receive an event I will use reason parts to parse my events and add some article of this event just like that so here I am person my events data so it's the data just here then I won't use console.log so you can use console.log to look at your event the first time it can be interesting to go step by step so here event the data so here every time I even source will receive an event of latest news he will display this on the console so here I will load my application I have a subscription just here this is just a nerf bar with bootstrap just here ver to decorate a little my application even with some basic CSS code so those are some static elements so my subscription is done in my console there is no tank so when I will send an event so here I have my events Corona is ending and here her hull sent here I have received two time these events so latest news here send in here I have my different events so I can use those events to build some articles so for that I will need some JavaScript code so here I will receive an events then I will use string parts my events to transform an events from Java string through his own format then I will use a function to add some article data to the block for example I will create some news article with a title and with some content so this function I will create it just here so its function that is building some HTML element article tag ash-tree title some paragraph and in the end it will take this div of wrapper div and add to our table element to this div so the principle is very simple so for that I have to change my postman request so here I want a title and here I want some can change or some in my es I have used text so have to change my controller so here I want a title and here I want some text so I have to transform that to a string to a shrink in a season format so strange event formatted so equals new folder for now and I will put my events just here in the when I will send events to my ECC emitter so I will need some dependencies these dependencies I have the dependency in another project the dependencies for reason is just here dependency orgy is on this version so we'll go to the palm of my project so pom.xml and here I will add my dependencies so I can transform the to shrink to a string with his own format so to do that I will use an object and this object is his own object so string is new reason object just here and here I will put the title the title will be this one then I will put the text in the content of the article rest here and here a little to string to string so that's all I am for matching the message I receive it and I am sending the message to the client and here in my text for example Quran and use in here Corona is live in its last days it will finish soon and every one will be free so that will be my article what to put some contents so that's all and here in my hostel in my clients when I will receive this event latest news so I will add this lock through my proper div so that's all so let's test all that so here I load my page subscription and here I will send my article and we have an exception because I didn't restart my application I think so research my application is started so here clients subscription we will dispatch an event in here we have our article so I can send as many events as I want to do clients so I can also have another clients and another one and every time I send an event all the client will receive these events so here latest so here I have received these events and other client also and the first clients also this here so that's how we have dispatched events and use it server-sent events so there is some stuff I have to tell you about several science events for example the timeout just here is very important to decide for example on on your needs in here I have used it imagers remove immature because I'm not able to detect when the client is not connected with my emitter anymore and in the client side in the client side you can do better than that so for example you can use the window on before load so for example when your window will be unloaded you can close your event source and you can also add some event so when there is some error you will just close the event source and you can also send some events to specific users so

Channel: JavaGrowth

Views: 17,141

Keywords: server sent events, server-sent events, java, html5 server sent events, server sent event, server sent event javascript, server, event source, html5 - server sent events, server sent events tutorial, web api server sent events, server sent events in html5, stop servlet from sending server sent events, web api and server sent events, spring boot, postman

Id: T_JZzdPCkOU

Length: 33min 15sec (1995 seconds)

Published: Sat Apr 18 2020