Skip to content
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

Add documentation on using presence with LiveView #5577

Merged
merged 1 commit into from
Oct 3, 2023

Conversation

Gazler
Copy link
Member

@Gazler Gazler commented Sep 16, 2023

The presence guide has been split into two sections, the existing one is now usage with Channels and JavaScript.

The new section if the guide is focused on LiveView and outlines creating an Elixir based presence client, and using a LiveView stream for rendering the list of online users.

This closes #4858

@Gazler Gazler requested a review from chrismccord September 16, 2023 13:38
```

Then we can navigate to http://localhost:4000/online/Alice in one tab, and http://localhost:4000/online/Bob in another, you'll see that the presences are tracked, along with the number of presences per user. Opening and closing tabs with various users will update the presence list in real-time.

## Making it safe
Copy link
Member

Choose a reason for hiding this comment

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

Should we make this a subsection of the channel one?

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 is the channels one? Do you mean should we make the content match and just change the URLs?

We can ensure this is working by opening 3 browser tabs. If we navigate to <http://localhost:4000/?name=Alice> on two browser tabs and <http://localhost:4000/?name=Bob> then we should see:

Copy link
Member

@josevalim josevalim left a comment

Choose a reason for hiding this comment

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

Beautiful, just one tiny comment and ship it!


Whilst Phoenix does ship with a JavaScript API for dealing with presence, it is also possible to extend the `HelloWeb.Presence` module to support LiveView.

One think to keep in mind when dealing with LiveView, is that each LiveView is a stateful process, so if we keep the oresebce state in the LiveView, each LiveView process will contain the full list of online users in memory. Instead, we can keep track of the online users within the `Presence` process, and pass separate events to the LiveView, which can use a stream to update the online list.

Choose a reason for hiding this comment

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

Suggested change
One think to keep in mind when dealing with LiveView, is that each LiveView is a stateful process, so if we keep the oresebce state in the LiveView, each LiveView process will contain the full list of online users in memory. Instead, we can keep track of the online users within the `Presence` process, and pass separate events to the LiveView, which can use a stream to update the online list.
One think to keep in mind when dealing with LiveView, is that each LiveView is a stateful process, so if we keep the presence state in the LiveView, each LiveView process will contain the full list of online users in memory. Instead, we can keep track of the online users within the `Presence` process, and pass separate events to the LiveView, which can use a stream to update the online list.

Copy link
Member Author

Choose a reason for hiding this comment

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

Also, "one thing" instead of "one think"!

@Gazler Gazler force-pushed the docs/live-view-presence branch from d33f7bd to a265f43 Compare September 30, 2023 18:51
The presence guide has been split into two sections, the existing one
is now usage with Channels and JavaScript.

The new section if the guide is focused on LiveView and outlines
creating an Elixir based presence client, and using a LiveView stream
for rendering the list of online users.
@Gazler Gazler force-pushed the docs/live-view-presence branch from a265f43 to 283d91b Compare October 3, 2023 07:56
@Gazler Gazler merged commit 495a18d into phoenixframework:main Oct 3, 2023
@Gazler Gazler deleted the docs/live-view-presence branch October 3, 2023 07:57
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.

Split Presence guide into two guides – Channels + Presence, LV + Presence
3 participants