Socket.io is a JavaScript library used for enabling real time bidirectional communication between clients and servers. It's ideal for those applications that require instant data updates or to provide immediate feedback on the user based on external events. In this note, we are going to explore how we used it in one of our projects to enable real-time updates.
In modern platforms, users expect real-time interaction both on web and mobile apps - some examples are receiving updates, notifications or messages. In our case, we've faced that requirement when developing a music application written in React Native. Client requirement was to display updated metadata of the currently playing radio station content to users at all times so they can know what is being played in each station without having to tune it. We had two options for obtaining such metadata information: the classic API REST aproach (basically, hitting and endpoint via HTTPS) or via websockets.
We knew that HTTP communication had limitations due to request-response nature, forcing us to do constant polling and their consequently delays. These problems don't happen when using websockets, since the bidirectional, real-time communication they provide allows to maintain constant synchronicity without extra delays and without having to poll the server constantly. In this case, we've used the socket.io library for implementing communication.
While using the websocket protocol, the connection lasts as long as any of the participating parties maintains it. Once one party breaks it, the second party won’t be able to communicate as the connection is automatically terminated. In this implementation case in particular, to avoid connection issues, both the server side and client side versions of the library must be compatible with each other. The information about compatibility could be found in the official documentation.
Here is an example of a simple Socket.IO implementation on the server side:
We use this library only on the client-side to retrieve metadata for radio stations provided from a main source connected to an external server. In this example, we add a connection by specifying the server address and some options. The “options” parameter is an object that can include reconnection settings, protocols, credentials and some other parameters based on the requirements of the server connection.
The client will try a connection with the server and wait for a response with the connection status. If the connection was successful, the connect handler is responsible for adding some listeners that send and receive events from the server side. Then, we subscribe to the getMetadata event so we can update the UI immediately after new metadata is received.
By following this implementation strategy via Socket.IO, we could establish a reliable communication channel with the radio station provider server and manage multiple connections with a real time data flow more efficiently. Instead of having concrete endpoints to poll, we establish a connection, communicate to the server which events we are interested in (via listener registration) and just wait for the right events to arrive. In practice, this ensures that we receive updated radio station metadata and show it to the user instantly, without having to constantly poll our servers with HTTP requests. Additionally, by using Socket.IO Javascript implementation, this logic only has to be coded once for both iOS and Android. We just had to wire it to the rest of the mobile application already written in React Native.
In this article we've described how we could manage the need of a real time communication with an external server, adopting the Socket.IO websocket based approach and integrating into an existing React Native application. The bidirectional communication allows us to give the user a better experience, reduce server load and manage the information updates more efficiently.
