Handling Server-Sent Events with JavaScript

[00:00 - 00:51] Welcome back. In this lesson we will learn how to read a server-cent event stream using native server-script functions. As you can see, we have two tasks to do to parse a stream. The first is to decode byte to text because our text will be uncardled to bytes using utf8 before being parsed to network. The second task will be to parse the text, respecting the server event's specification. Let's look at the details. First, we need to decode byte to text. So here you can see when our text is sent from the backend to the front end, it's uncarded. At the beginning you have some text, for instance, let's imagine you're a symbol for euros, you will be uncardled into bytes. Here are bytes, one byte, two bytes, three bytes.

[00:52 - 02:21] So now we need to decode it. That's our first task. The good news is that the server is stripped as natively some very powerful functions that will help us a lot. And one remark, it may be that in some environment, on some all browsers, these functions are missing, so you will need to polyfill them with external libraries. But by default in most modern rovers, I will come , you will find them. So let's look at the stream API. The stream API is a JavaScript API. Here you can see the end web docs which are maintained by Mozilla. I strongly encourage you to visit this documentation is excellent if you have any question on the implementation of this API. So here is a diagram, we can see a reflection of the stream. A stream is just a sequence of data based sent and it's processed and run as is being sent. Then what's the reader? Let's see reader is an object. We'll read the content of the stream as it arrives. So it can be processed. How do we get our reader? A reader is a JavaScript object. And here you can see we have a function fetch data with return a JavaScript reader with the data uncardled as UTF-8. So we make a fetch call fetch being the native function to make a HTTP call and we get a standard response.

[02:22 - 03:09] If our endpoint is a server sent stream in endpoint, we will get a readable stream on the body and for a variable stream, we can use the method get_reader to get a reader. And that's all. We managed to get a reader. Now how do we decode? To decode is quite simple. There is a native function called text decoder in JavaScript and you pass decoder.decode and that's all you get your train dec oded. So we've decoded our UTF-8. Now how do we parse the server events? There is a spec that you can find and we are not going to read every details of the specification just the core of what we need.

[03:10 - 03:45] Here you can see the spec of how we will insert to step. First we must lay a red line by line. So each line we consider that each line is separate slash and slash and since we separate it. Then we may skip some line maybe in your go to the spec but that's not what it's there at us. What interacts us are lines with a colon and left of a colon is the field and right of the colon is the value and here in example stream and the field have some valid values.

[03:46 - 04:16] Let's look. It could be event data ID or a try and if otherwise it's in your turn. In our just looking at the data field since it's what we need. Let's look at an example stream. Here is the first line. The field is data. The value is this is the first message and so on. That's a very simple forensic event that could be used for instance for an element point. So let's dive into the code.

[04:17 - 04:47] Here you see some JavaScript function in the signature we have two properties, a reader. So a reader is a standard JavaScript object like a showdew that could be sent as the response of a fetch function and an event. An event is simply a function that will be called any time a new event is ready to be processed and our job will be to call that method any time an event is sent from the stream. So what do we do? First we loop until the stream is closed.

[04:48 - 05:12] We read our reader. There is a method read. We just read it. We will break our loop once the reader is closed. Then we will decode as I told you we are decoding the chunk to a tier feed. Then we are adding because we have no guarantees that from the network in each line which will be sent as one as one chunk. It's perfectly possible for each line to be chained.

[05:13 - 05:52] So once we have an entire line and we know it because by according to respect line separated by slash n we now compare the line. So we get the line, we remove the line from the buffer. If it 's a command but in respect we just ignore the line. Otherwise we can get in the field and the value. Here is the field, here is the value. Now just to simplify our job we are going to try to parse it as a result. Then we call the event method. Here we have only implemented the data case because it's what we need for our element. We call implement_vrest, unevent and so on.

[05:53 - 06:11] Now we implemented the first part of the read. This stream as you can see it's just much easier because native JavaScript functions are very powerful. So in the next session we'll begin writing our first React book. See you soon!