Implementing real-time updates with WebSocket

There are two parts we need to build to implement real-time communication—one is the client side and the other is the server side. As mentioned earlier, we will use SockJS (http://sockjs.org) to implement the client side and Spring's WebSocket implementation on the server side.

Introduction to SockJS

Under the hood, the SockJS client will try to use the native WebSocket that the browser provides. If it is not available, it will fall back to other transport protocols, such as XHR-Streaming and  XHR-Polling. Its API is very simple to use. The following is an example of establishing a WebSocket connection with a local server at the /rt path:

let socket = new SockJS('http://localhost:8080/rt')
socket.onopen = function (event) {
  // Connection established
  console.log(socket.readyState)
}

socket.onmessage = function (message) {
  // Message received via WebSocket
}

socket.onclose = function (event) {
  // Connection closed
}

socket.onerror = function...