Examples

Elixir Real-Time Chat

Building a Real-Time Chat

Elixir real-time chat uses Phoenix Channels for messaging.

Introduction to Phoenix Channels

Phoenix Channels provide a way to handle real-time communication in Elixir applications. They are built on top of WebSockets, allowing for instant messaging and updates. In this guide, we'll explore how to set up a basic real-time chat application using Elixir and Phoenix Channels.

Setting Up a New Phoenix Project

First, ensure you have Elixir and Phoenix installed on your system. You can create a new Phoenix project using the following command:

This command initializes a new Phoenix application named chat_app without a database (Ecto). Navigate into your project directory:

Creating a Chat Room Channel

Next, we'll create a channel for the chat room. Run the following command to generate a channel:

This generates a new channel module at lib/chat_app_web/channels/room_channel.ex. Open this file and you'll see a module with a join function, which is responsible for authorizing users to join the channel.

Implementing Join and Handle Inbound Events

To allow users to join the channel and send messages, update the join function and implement a handle_in function. Here's an example of how it might look:

In this example, users join the room:lobby. The handle_in function listens for new_msg events, broadcasting the message to all users in the channel.

Setting Up the Client-Side Connection

To connect to your channel from the client side, you need to modify your JavaScript assets. Phoenix provides a JavaScript library for handling WebSockets. Include it in your app.js file:

This code establishes a connection to the Phoenix server's WebSocket endpoint and joins the room:lobby channel. It listens for new_msg events and logs incoming messages to the console.

Testing Your Real-Time Chat

Run your Phoenix server using mix phx.server and open your browser to http://localhost:4000. You should see console logs confirming successful channel joins and message broadcasts, demonstrating your real-time chat in action.

Examples

Previous: GraphQL API
Next: Authentication API