# Exercise 3 - Server Sent Events

In this lab you'll learn how to expose streaming endpoints so that web applications are notified via [Server Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events).

The web application 'Web-App' receives notifications from the 'Web-API' service.

![](https://2094539152-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8o7TovHRYmD6AT4Wrf%2Fsync%2Fbd17be18364fdde9fcf2d860a5788bda43debd00.png?generation=1591086426565158\&alt=media)

## Step 1: Understand the Web Application Consumer

Let's take a look at the JavaScript code which consumes the server side events.

A new EventSource is created by passing in the the URL of the streaming endpoint. The function source.onmessage is invoked when the events arrive. In our case this triggers the reload of the last articles.

```bash
cd ~/cloud-native-starter/reactive/web-app-reactive/src/components
cat Home.vue
```

![server events](https://2094539152-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8o7TovHRYmD6AT4Wrf%2Fsync%2F0e1a5d2dc4ef521b6ae2fb245640d3ea848c5d76.png?generation=1591086435897429\&alt=media)

![server events](https://2094539152-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8o7TovHRYmD6AT4Wrf%2Fsync%2Fd183703e12957fe30b79019c76417d2f3e831b3e.png?generation=1591086432383601\&alt=media)

## Step 2: Develop the Streaming Endpoint

The sample already comes with a working endpoint. Let's delete the file and recreate it from scratch.

```bash
cd ~/cloud-native-starter/reactive/web-api-reactive/src/main/java/com/ibm/webapi/apis/
rm NewArticlesStreamResource.java
touch NewArticlesStreamResource.java
nano NewArticlesStreamResource.java
```

![](https://2094539152-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8o7TovHRYmD6AT4Wrf%2Fsync%2Fb907380a9bc69c9a46bf677deeb1ee0aaaf78170.png?generation=1591086428674282\&alt=media)

Add the package name, the import statements and the empty class.

```java
package com.ibm.webapi.apis;

import javax.inject.Inject;
import javax.ws.rs.core.MediaType;
import org.reactivestreams.Publisher;
import io.smallrye.reactive.messaging.annotations.Channel;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import org.jboss.resteasy.annotations.SseElementType;

@Path("/v2")
public class NewArticlesStreamResource {
}
```

In [Lab 2](https://ibm-developer.gitbook.io/reactive-messaging-with-quarkus-on-openshift/build-new-version-of-the-microservice/exercise-02) you saw how to publish messages to the in-memory channel 'stream-new-article'. A publisher to this channel can easily be injected via @Inject and @Channel.

```java
    @Inject
    @Channel("stream-new-article") Publisher<String> newArticles;
```

Last, but not least, add the implementation of the streaming endpoint. The media type is MediaType.SERVER\_SENT\_EVENTS and the annotation @SseElementType defines the type.

```java
    @GET
    @Path("/server-sent-events")
    @Produces(MediaType.SERVER_SENT_EVENTS)
    @SseElementType("text/plain")
    public Publisher<String> stream() {
        return newArticles;
    }
```

Once you've entered everything the [class](https://github.com/IBM/cloud-native-starter/blob/master/reactive/web-api-reactive/src/main/java/com/ibm/webapi/apis/NewArticlesStreamResource.java) should look like this.

![server events](https://2094539152-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8o7TovHRYmD6AT4Wrf%2Fsync%2F41a9243b68c2e4843f761db6c88f687d89655b6c.png?generation=1591086433488910\&alt=media)

Exit the Editor via 'Ctrl-X', 'y' and 'Enter'.

## Step 3: Deploy new Version

```bash
cd ~/cloud-native-starter/reactive/web-api-reactive
oc start-build web-api-reactive --from-dir=.
```

![](https://2094539152-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8o7TovHRYmD6AT4Wrf%2Fsync%2Fa64f288b61614eba20294aa8375fe8eeb2d8ad39.png?generation=1591086434486572\&alt=media)

On the 'Builds' page wait until the new build has been completed.

![](https://2094539152-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8o7TovHRYmD6AT4Wrf%2Fsync%2Fb56c837a1bca2586850440346088662a9caa824f.png?generation=1591086430516116\&alt=media)

Once completed, delete the 'Web-API' pod which causes a new pod with the latest image to be started.

![](https://2094539152-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8o7TovHRYmD6AT4Wrf%2Fsync%2Fd65e23efcee4e0cda6b6450620c7181d0ea9e672.png?generation=1591086431462563\&alt=media)

## Step 4: Verify new Version

Make sure all four pods in the 'cloud-native-starter' project are running. Note that it takes a couple of minutes until this happens.

![](https://2094539152-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8o7TovHRYmD6AT4Wrf%2Fsync%2F16f6915bdc3e96bc05a87c9b213e703f698b0081.png?generation=1591086429659164\&alt=media)

To launch the application get the URLs via the following command.

```
~/cloud-native-starter/reactive/os4-scripts/show-urls.sh
```

![](https://2094539152-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8o7TovHRYmD6AT4Wrf%2Fsync%2F8af710489517d6ddbbe86c93164037801ab55ba8.png?generation=1591086428344595\&alt=media)

Open the web application in a browser. Then invoke the curl post command. The web application should show the new entry.

![](https://2094539152-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8o7TovHRYmD6AT4Wrf%2Fsync%2F536175c07f8913d3e24b7174cd62ab10c9a4ba29.png?generation=1591086454426076\&alt=media)