How to handle socket disconnection and heartbeat messages?

hdw3 :

What I am trying to do

I have a lobby with players and when someone leaves the lobby I want to update it for every client so the actual list of players is displayed.

What I have done

To avoid cyclical requests being sent from frontend to backend I decided to use web sockets. When someone leaves the lobby then request is sent to REST api and then backend, upon receiving this request, does all the business logic and afterwards "pokes" this lobby using socket in order to update all clients in the lobby.

My problem

Everything works fine except the case when user closes the browser or the tab because I can't send a request in this scenario. (as far as I know this is impossible to do using javascript and beforeunload event, onDestroy() methods, etc..)

My question

Is it possible to check on the server side whether any socket disconnected and if yes then how can I do this? I also tried to use heartbeat which is being sent from frontend to backend but I don't know how to handle this heartbeat message on the server side.

Server side (Spring boot)

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguartion implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/api/socket")
                .setAllowedOrigins("*")
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        ThreadPoolTaskScheduler te = new ThreadPoolTaskScheduler();
        te.setPoolSize(1);
        te.setThreadNamePrefix("wss-heartbeat-thread-");
        te.initialize();

        config.enableSimpleBroker("/lobby")
                .setHeartbeatValue(new long[]{0, 1000})
                .setTaskScheduler(te);
    }
}


@Controller
public class WebSocketController {

    private final SimpMessagingTemplate template;

    WebSocketController(SimpMessagingTemplate template) {
        this.template = template;
    }

    public void pokeLobby(@DestinationVariable String lobbyName, SocketMessage message) {
        this.template.convertAndSend("/lobby/"+lobbyName.toLowerCase(), message);
    }
}

Client side

  connectToLobbyWebSocket(lobbyName: string): void {
    const ws = new SockJS(this.addressStorage.apiAddress + '/socket');
    this.stompClient = Stomp.over(ws);
    // this.stompClient.debug = null;
    const that = this;
    this.stompClient.connect({}, function () {
      that.stompClient.subscribe('/lobby/' + lobbyName, (message) => {
        if (message.body) {
          that.socketMessage.next(message.body); // do client logic
        }
      });
    });
  }

Vusal :

You can listen for SessionDisconnectEvent in your application and send messages to other clients when you receive such an event.

Event raised when the session of a WebSocket client using a Simple Messaging Protocol (e.g. STOMP) as the WebSocket sub-protocol is closed. Note that this event may be raised more than once for a single session and therefore event consumers should be idempotent and ignore a duplicate event.

There are other types of events also.

How to handle socket disconnection and heartbeat messages?

Guess you like