Show the number of online users on the homepage

[danielbergholz]

I always wanted an opportunity to learn more about Phoenix Presence, so I thought it would be a fun idea to show the number of online TechSchool users on the homepage. It could be under the "Go from zero to your first job without any financial loss" section, and use the Ping animation from Tailwind

[lcezermf]

By online, do you mean logged users only or any user connected to some site page?

[danielbergholz]

Any user connected to TechSchool (on any page). Similar to how Plausible show the number of current visitors

[dmitry-sidorov]

You can use GET request from Plausible, haha 🤣 https://plausible.io/api/stats/techschool.dev/current-visitors?

But using Phoenix.Presence is more correct and interesting way in Elixir perspective. And no thrid-party dependencies, of course!

I am doing some investigation about plugging in Presence to TechSchool :smile:

[dmitry-sidorov]

I also found Phoenix.PresenceAPI methods are not described in hex docs. Or I didn't found it. 😆 Therefore, the source code is the best way: https://github.com/phoenixframework/phoenix/blob/main/lib/phoenix/presence.ex

[danielbergholz]

You can use GET request from Plausible, haha 🤣 https://plausible.io/api/stats/techschool.dev/current-visitors?

NO WAY 😂, so I'm using my elixir application to call another elixir application that knows how many users there are on the website, incredible!

I mean, my vote is to try to use Phoenix Presence just so we can stay in touch with this incredible piece of technology, but if it's too hard/time consuming, I have no problem calling the plausible API 🤝

[dmitry-sidorov]

You can use GET request from Plausible, haha 🤣 https://plausible.io/api/stats/techschool.dev/current-visitors?

NO WAY 😂, so I'm using my elixir application to call another elixir application that knows how many users there are on the website, incredible!

I mean, my vote is to try to use Phoenix Presence just so we can stay in touch with this incredible piece of technology, but if it's too hard/time consuming, I have no problem calling the plausible API 🤝

No way, I am kidding 😆 To use Phoenix Presence is the only right way, IMO. But need more time for tunning this thing properly!

[lcezermf]

Presence should be a straightforward way to go. I think we will need to wrap the LiveView modules like this

def mount(..) do
  if connected?(socket), do: Presence.track(self(), TOPIC_NAME, "user:#{ANY_RANDOM_UUID}", %{})
end

That will make sure once someone that is connected to a LV module is track, than to use we need to fetch this data and "count"

Similar to this snippet

iex(4)> MindfulWeb.Presence.track(self(), "online-users", 123, %{}) 
{:ok, "F-MGmFSDvu5k2gZB"}
iex(5)> MindfulWeb.Presence.list("online-users")
%{"123" => %{metas: [%{phx_ref: "F-MGmFSDvu5k2gZB"}]}}
iex(6)> MindfulWeb.Presence.list("online-users") |> map_size()
1

[danielbergholz]

@lcezermf This looks good! Would you like to start working on this issue? I can assign it to you. If you can't, no problem!

[lcezermf]

Sure, I would love to try it!

[lcezermf]

https://github.com/user-attachments/assets/6ca996a9-503a-4426-ac25-7f78ec8f4d51

A good starting point.

ref: https://farens.me/blog/real-time-user-count-with-phoenix-presence

[danielbergholz]

This is looking great @lcezermf 🔥

[lcezermf]

Any suggestion about UI? Where it needs to be?

[danielbergholz]

Any suggestion about UI? Where it needs to be?

I wrote on this issue It could be under the "Go from zero to your first job without any financial loss" section, but I'm no UI expert 😅, so if you have any better suggestions on where to place this, I'm open to ideas!

[lcezermf]

Cool, thanks! Working on it in the next days between my free time, probably something to review next week!

[danielbergholz]

Nice! Thanks for the hard work, and have a good weekend 🍻