Skip to content

feat(client): add WebSocket channel setup #2013

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 1, 2022

Conversation

lorenzo-cavazzi
Copy link
Member

@lorenzo-cavazzi lorenzo-cavazzi commented Aug 26, 2022

This PR adds the client-side logic for WebSocket.

The WebSocket channel is set up and it gets re-created in case of recoverable errors (to be further expanded), and it listens to incoming messages.
Once a new message comes, it checks for a suitable handler and executes it.
Mind that we save minimal data to the store for the WebSocket channel itself, but the handlers can modify any part of the model.

This fully moves the logic to check for UI version updates to the WebSocket channel. It's also a good example of how we can send all the required data through the channel, although we probably want to avoid this behavior in most cases where we need to get a lot of data.

How to test
Open the network tab and verify that the WebSocket channel is created and information about the client version is sent regularly.

Screenshot_20220829_173034

Further development
There will be a follow-up issue to finish and enable the (already partially coded) logic for finding session updates through the WebSocket channel.

/deploy renku-gateway=master #persist
fix #1338

@lorenzo-cavazzi lorenzo-cavazzi temporarily deployed to renku-ci-ui-2013 August 26, 2022 14:40 Inactive
@RenkuBot
Copy link
Contributor

You can access the deployment of this PR at https://renku-ci-ui-2013.dev.renku.ch

@lorenzo-cavazzi lorenzo-cavazzi temporarily deployed to renku-ci-ui-2013 August 26, 2022 15:43 Inactive
@lorenzo-cavazzi lorenzo-cavazzi temporarily deployed to renku-ci-ui-2013 August 28, 2022 11:29 Inactive
@lorenzo-cavazzi lorenzo-cavazzi temporarily deployed to renku-ci-ui-2013 August 29, 2022 12:19 Inactive
@lorenzo-cavazzi lorenzo-cavazzi temporarily deployed to renku-ci-ui-2013 August 29, 2022 14:04 Inactive
@lorenzo-cavazzi lorenzo-cavazzi temporarily deployed to renku-ci-ui-2013 August 29, 2022 15:22 Inactive
@lorenzo-cavazzi lorenzo-cavazzi marked this pull request as ready for review August 29, 2022 15:34
@lorenzo-cavazzi lorenzo-cavazzi requested a review from a team as a code owner August 29, 2022 15:34
@lorenzo-cavazzi lorenzo-cavazzi temporarily deployed to renku-ci-ui-2013 August 29, 2022 15:34 Inactive
@lorenzo-cavazzi lorenzo-cavazzi temporarily deployed to renku-ci-ui-2013 August 29, 2022 15:42 Inactive
Copy link
Contributor

@ciyer ciyer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks very good!

I have a few minor comments on some code improvements, but I overall like the structure.

function handleUserInit(data: Record<string, unknown>, webSocket: WebSocket, model: any): boolean {
if (data?.message && (data.message as string).toLowerCase().includes("connection established")) {
// send request for getting the UI version
webSocket.send(JSON.stringify(new WsMessage({ requestServerVersion: true }, "init")));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you not do this?

Suggested change
webSocket.send(JSON.stringify(new WsMessage({ requestServerVersion: true }, "init")));
webSocket.send((new WsMessage({ requestServerVersion: true }, "init")).toString());

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This pattern is repeated in every send function of both the client and server WebSocket channel. I changed it everywhere so that all the JSON.stringify(<content>) become (<content>).toString().

@lorenzo-cavazzi lorenzo-cavazzi temporarily deployed to renku-ci-ui-2013 August 30, 2022 13:11 Inactive
@lorenzo-cavazzi
Copy link
Member Author

Thank you for the review! I addresses the points you mentioned, and improved the logic to open/close the channel so that we won't miss the session cookies (or retry shortly after when that happens)

@lorenzo-cavazzi lorenzo-cavazzi temporarily deployed to renku-ci-ui-2013 August 30, 2022 15:21 Inactive
ciyer
ciyer previously approved these changes Sep 1, 2022
Copy link
Contributor

@ciyer ciyer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great and works well. The occasional initialization problem on first load seems to be fixed now. Looking forward to using this to improve the UX!

lorenzo-cavazzi added a commit that referenced this pull request Sep 1, 2022
- start the WebSocket channel
- handle messages and termination

fix #1338
@lorenzo-cavazzi lorenzo-cavazzi temporarily deployed to renku-ci-ui-2013 September 1, 2022 12:44 Inactive
@lorenzo-cavazzi
Copy link
Member Author

Thanks for the review!
I ended up force-pushing to this branch to keep 2 separate commits merged to master (WebSocket infrastructure vs moving the UI version check to WebSocket) instead of squashing the 10+ commits together.

Could you re-approve?

@lorenzo-cavazzi lorenzo-cavazzi merged commit e62c35d into master Sep 1, 2022
@lorenzo-cavazzi lorenzo-cavazzi deleted the 1338client-b-websokets branch September 1, 2022 15:46
lorenzo-cavazzi added a commit that referenced this pull request Sep 1, 2022
- start the WebSocket channel
- handle messages and termination

fix #1338
@RenkuBot
Copy link
Contributor

RenkuBot commented Sep 1, 2022

Tearing down the temporary RenkuLab deplyoment for this PR.

@ciyer ciyer added this to the 2.8.0 milestone Sep 2, 2022
@lorenzo-cavazzi lorenzo-cavazzi mentioned this pull request Sep 19, 2022
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Set up a WebSocket channel between client and server
3 participants