Implementing the client side

In the following sections, we will look at the client side. On the client side, we have to initiate the web socket connection with the server, send a CartEvent when a product is added or removed from the cart, and show alerts when other browsers make changes to the cart.

First, let's create the connection with the server using a web socket.

Adding the web socket

To add the web socket to the client, we are going to use the UIManager object, which is the entry point of the client. In Scala.js, WebSocket is part of the framework; edit the UIManager and add the web socket property to it, as follows:

val webSocket: WebSocket = getWebSocket

Some configuration is needed to create the WebSocket. We encapsulate all of the initializations into a function named getWebSocket, as follows:

private def getWebSocket: WebSocket = {
  val ws = new WebSocket(getWebsocketUri(dom.document, 
  "v1/cart/events"))
    
  ws.onopen = { (event: Event) ⇒
    println(s"webSocket.onOpen '${event...