Client-to-server forwarding

By default, none of the events you send from your WebSocket client are forwarded to the original server because the original server connection is not established. You can choose to establish the server connection by calling server.connect() in your event handler. Once you do, all the client events will be forwaded to that original server.

You can manage that event forwarding in multiple ways:

• Proxy the events (i.e. do nothing);
• Send modified client events to the server;
• Prevent client events from reaching the server entirely.

Preventing client events

You can prevent any event dispatched by your WebSocket client from being forwarded to the original server by calling event.preventDefault() in the event listener for that event.

api.addEventListener('connection', ({ client, server }) => {
  server.connect()
 
  client.addEventListener('message', (event) => {
    event.preventDefault()
  })
})

For example, here we are preventing any message event from the client from ever reaching the original server. You can still able to observe the dispatched client messages in the listener but they will not be forwarded to the server anymore.

Just like with regular events, you can prevent the default conditionally:

api.addEventListener('connection', ({ client, server }) => {
  server.connect()
 
  client.addEventListener('message', (event) => {
    // Skip the forwarding only for particular client messages.
    if (event.data === 'hello world') {
      event.preventDefault()
    }
  })
})

Modifying client events

Modifying a client event comes down to two steps:

1. Preventing the forwarding for that event (i.e. event.preventDefault());
2. Sending a modified (mocked) event to the server instead (i.e. server.send()).

Let’s expand on the previous example and send a modified client message event after it’s been prevented:

api.addEventListener('connection', ({ client, server }) => {
  server.connect()
 
  client.addEventListener('message', (event) => {
    // Skip the forwarding only for particular client messages.
    if (event.data === 'hello world') {
      event.preventDefault()
      server.send('hello cosmos')
    }
  })
})

Related materials

In a similar manner, you can manage the forwarding of the server events.