In this post we'll take a deep dive into Phoenix Channels by building a real-time collaborative text-editing feature. Then, we'll use the Phoenix Presence module to track user activity within that feature.
We're building out a Phoenix app that allows users to collaborate on coding challenges. Users can visit "challenge rooms" and see a code challenge prompt along with an in-browser code editor. Users can collaborate on the code challenge by typing into the text editor.
Here's where our real-time feature comes in. All of the users in the challenge room should be able to see what a given user is typing as they are typing it. We'll leverage Phoenix Channels to support this functionality.
However, not only should they see what a user is typing, they should see an indication of who is typing it. This is where our need to track user state comes in. We'll use Phoenix Presence to build out this behavior.
Briefly define Channels. Lay out how they work in the following two steps:
- Establish the Socket Connection
- Broadcast Messages
Now that we know what Channels are and how they work, we're ready to leverage them to build our first real-time feature: collaborative text-editing.
When a user visit the page for a given code challenge at "/challenges/:id", they should see the code prompt and a shared text editor. When a user edits code in the shared text editor, those changes should be visible to everyone in the "challenge room".
- Delcare the WebSocket endpoint + route socket requests to our channel
- Connect a client to the socket
- Sending connect request from the client
- Handling connect request on the server
- User joins a channel: User visits "/challenges/:id"
- Sending join request from the client
- Handling join request on the server
- Broadcasting messages: User type into the shared text editor, everyone in the "room" sees what is being typed.
- Sending a message from the client
- Handling the message on the server
- Subscribing clients handle receiving the broadcast message
- Define a module that uses
PhoenixPresence
module - Add that module to your app's supervisor tree
When a user joins the "challenge room" by visitng '/challenges/:id', they should be presented with a list of users in the room. The people already in the room should see their list of present users updated to include the new user.
- Adding the user to the presence store
- Broadcasting the list of present users to subscribing clients
- Pushing list of pre-existing users to the newly joined client
When a user types into the shared text editor, they and everyone else in the room should see an indication of who is typing.
When a user leaves the "challenge room", the remaining users should see their list of present users updated to exclude the departed user.
Looks like an excellent outline to me. Just a couple comments:
Other than that, you can get started on the post. Looking forward to reading the draft!