In this article, we will see how to create a nice chat application using modern and innovative technologies: Server sent event, RethinkDB and hapi.

Matt Harrison published a while ago a very cool hapi plugin name SuSiE to allow the use of Server Sent Event (SSE). He provided an example of live chat application using React as front-end library. I forked his project to add RethinkDB in it.

Let’s discover the technologies used (SSE with SuSiE and RethinkDB with Thinky).

Server Sent Event

Server Sent Event (SSE) is a technology allowing to push data from a server to a client through HTTP without any protocol change. The client will not be able to send data through this connection.

The connection is established after a request from a client. The request may contains an ‘Accept’ header set as ‘text/event-stream’. After this first request, the connection will not be closed and the server will be able to carry on writing in it. The connection can only be closed by the client.

What is the point of using SSE when Websockets are so popular ? Actually it depends on the use case. You can read this very good answer on Stackoverflow to see the main differences between SSE and Websockets and when to choose one or another.

Another big advantage of SSE against Websockets concerns mobile devices:

In a Websocket connection, a mobile client has to keep his antenna in active mode to be able to send data. This will consume a lot of battery.

With SSE, a mobile client will passively receive data saving the so volatile energy of its battery.

RethinkDB

RethinkDB is a NoSQL database. It offers some features that are rare in the world of document oriented database. My three favorites are:

Joins can be made between tables. This is pretty big to be noticed.

Ease of administration: RethinkDB comes with a nice webapp used to administrate your servers.

Real time support. You can subscribe to the changed operated in a table and get a callback called on each of them.

Also it seems that, unlike MongoDB, not data loss has been observed with RethinkDB.

As you probably understood, the part that is really interesting for us today is the real time features of the database.

Let’s see how this works !

The app

If you want to try this app, you will need to install RethinkDB on your machine. Do not forget to start it (‘rethinkdb’ in a terminal).

I will only describe the server part of the app and the event-stream related lines of code in the front-end.

We have a standard hapi server with the SuSiE plugin registered:

And a file to store our routes and the RethinDB connection using the Thinky ORM.

We simply require Thinky and define a new model with it.

Since the client cannot write in the SSE it needs a way to send messages. A POST route is defined for that:

When a message is received, a new Message object is created and saved. The client gets a 200 OK response.

The SSE part is in another route:

A call on this route creates a subscription on the Message table with ‘Message.changes().run()’. It is possible to simply query the Message table with ‘Message.run()’ or to add query and filter rules.

Each time a message is inserted in this table, the ‘reply.event’ method is called with a new Server Sent event holding the data RethinkDB gave us: the message that has been inserted.

On the client side the code to initiate a connection and listening on it is pretty simple:

The subscription is created with ‘new EventSource(<RESOURCE URL>) and a listener is added on the ‘message’ events.

Conclusion

In this quick article we have seen how to build a simple chat based on hapi using SSE and RethinkDB. All the messages are saved in the database and a lot of features can be added from this point. A Slack like chat service would be easy to create for instance.

If you like this article, please give it a recommendation (heart button) and if you want, share it. You can also follow me on medium or twitter.

As usual, all comments are welcomed and appreciated !

Vlad