Query Params not updated when in web socket mode

[richard-to]

• The query params are read on load by the app
• The query params on initial load are correct
• Later there is a me.navigate that updates the query params
• The URL updates correctly here
• Then later the web socket disconnects and connects again. The query params are read on load, but the updated query params are not used. instead the initial query params are still being read.

---

Seems like this could be an issue with web sockets since I think maybe the updated query param state is not being passed back to the server. Normally this would be passed by SSE mode. But haven't looked too closely at the issue.

---

[richard-to]

Looks like the issue may be here. But not 100% sure. Seems like the onopen call will only ever get the initial request object on reload, rather the latest version. But this assumes onopen is called on a reconnect

  private initWebSocket(initParams: InitParams, request: UiRequest) {
    if (this.webSocket?.readyState === WebSocket.OPEN) {
      this.status = ChannelStatus.OPEN;
      const payload = generatePayloadString(request);
      this.webSocket.send(payload);
      return;
    }

    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    const wsUrl = `${wsProtocol}//${window.location.host}/__ui__`;

    this.webSocket = new WebSocket(wsUrl);
    this.status = ChannelStatus.OPEN;
    this.isWaitingTimeout = setTimeout(() => {
      this.isWaiting = true;
    }, WAIT_TIMEOUT_MS);

    const {zone} = initParams;
    this.initParams = initParams;

    this.webSocket.onopen = () => {
      // Send the initial UiRequest upon connection
      const payload = generatePayloadString(request);
      this.webSocket!.send(payload);
      this.wsReconnectAttempts = 0;
    };

[nirben82]

I debugged this a little and it seems that the query_params that are received as part of the ui_request are always of the previous state. So I believe its not that the query params are not updated during the session. Its that the query params record the state of before the me.navigate. Also, I also turned off web sockets and the issue persists, so unrelated.

[richard-to]

Thanks for looking into this further. That's interesting. Can you provide the steps of how to reproduce the issue without web sockets? I'll try to reproduce on my side which should help with getting in a fix. Thanks a lot.

[nirben82]

So actually I think that what I mentioned above isn't exactly what is happening. I checked the query params of the user_event, which are indeed of the previous state but then the query_params of the navigate command are initialized properly and that's how mesop is able to retrieve the current query_params while the connection is still running. The reason for the issue, indeed seems to that when the connection is closed and re-opened, the ui_request is sent with the init of the initial request object:

INFO:mesop.server.server:init {
  viewport_size {
    width: 2560
    height: 1203
  }
  theme_settings {
    prefers_dark_theme: true
    theme_mode: THEME_MODE_LIGHT
  }
  query_params {
    key: "thread_id"
    values: "e4717bf8-b69c-4b60-a49d-2e639c15083b".                    -- this is the thread_id of the original request
  }
}
path: "/"

[richard-to]

Ok. Cool. Thanks for confirming that. At least we have the root cause now.

[richard-to]

I tried to add a patch fix to update the query params on retry. However, I discovered another issue with the query params and web sockets. Basically it does not seem to be reading the query params passed in from the URL. It only is able to read the query param that is set on Mesop for some reason. Haven't had a chance to look into it to closely yet. But logged a bug here: #1283

---

However, I think I have a workaround for you for the time being. I think what you can do is store the ID in a cookie or local storage. You just need to add a web component.

Another idea could be to use the Flask Session object (#1283). But I haven't tried this out to see if Mesop can use it in this scenario with web sockets. So cookies or local storage probably your best bet for now until I can resolve the query params issue.