Connect, Render, Sync: Building a Real-time Chat UI with Phoenix LiveView. Part 1

Image by author

In our previous series, Persist, Cache, Distribute, we successfully built a powerful distributed chat engine. We mastered ETS, Mnesia, and Node Clustering.

But let’s be honest. It lived entirely in the terminal. Black screen, white text. While the backend was “magical,” it lacked a face.

It’s time to change that.

Next, we enter the world of real-world web development with Elixir. Enter: Phoenix PubSub & Presence!!!

🎯 Goal: We are going to build a real-time chat application that runs directly in the web browser, fully leveraging the power of BEAM technology.

What will we cover in this part?

1. Installing the Phoenix Framework

• Think of it like Laravel or Rails, but built for super concurrency.

2. Real-time PubSub

• 🚫 No manual WebSockets setup.
• 🚫 No Redis required.
• ⚡️ 100% Native BEAM speed.

3. Phoenix Channels

• Setting up topics like "room:lobby" and "room:general".
• Broadcasting messages between multiple clients instantly.

4. Phoenix Presence

• Detecting exactly who is online.
• Tracking join/leave events without writing extra code.
• Perfect for chat apps, dashboards, notifications, and more.

What is the output of this tutorial? By the end of this article, you will have: ✅ A real-time web chat interface. ✅ A list of online usernames (Presence). ✅ The ability to broadcast messages to all users in a room. ✅ A system running smoothly on a single BEAM node.

Enter: Phoenix PubSub & Channels 🎉

Before we start coding, we need to prepare 5 essentials to ensure Phoenix runs smoothly on your machine.

✅ 1. Install the Phoenix CLI Phoenix comes with a powerful project generator called mix phx.new. Install it:

mix archive.install hex phx_new

//Check if it was successful:
mix phx.new --version

If a version number appears (e.g., 1.7.x), you are good to go.

✅ 2. Ensure Node.js is Installed Phoenix uses Node.js for:

• Bundling assets (esbuild)
• Live reload
• Managing frontend assets

Check your version:

node -v

If you don’t have it, install Node.js (minimum version 14+).

✅ 3. Prepare a New Working Directory We will keep our previous chat_persist folder, but for this new stage: → We will create a brand new Phoenix project named chat_web.

Why a new project?

• Phoenix has a different structure than a standard OTP application.
• We will eventually connect this Phoenix app with the ChatCache + ChatCluster you built in the previous series.
• It keeps the architecture clean (and easy for your colleagues to read).

Go to your main Elixir project folder, then generate the project:

mix phx.new chat_web

Then continue setup:

cd chat_web
mix deps.get

Start the server:

mix phx.server

After running mix phx.server, you will likely encounter an error like this:

[error] Postgrex.Protocol (#PID<0.301.0>) failed to connect: ** (Postgrex.Error) FATAL 3D000 (invalid_catalog_name) database "chat_web_dev" does not exist
[info] Running ChatWeb.Endpoint with Bandit 1.8.0 at 127.0.0.1:4000 (http)
...
sh: line 1: watchman: command not found
Done in 147ms

This error happens because we haven’t set up Postgres yet, and a standard Phoenix app requires it by default.

✅ 4. Setup PostgreSQL via Docker

Let’s create a stable, clean PostgreSQL setup using Docker. This is perfect for development as it keeps your main OS clutter-free.

1. Pull the PostgreSQL image and create a data folder Pull the image:

docker pull postgres:16

Create a folder to ensure data persists even if the container restarts:

Create a folder to ensure data persists even if the container restarts:

2. Run PostgreSQL via Docker Run this command:

docker run -d \
  --name postgres \
  -e POSTGRES_USER=postgres \
  -e POSTGRES_PASSWORD=postgres \
  -e POSTGRES_DB=chat_dev \
  -p 5432:5432 \
  -v ~/pgdata:/var/lib/postgresql/data \
  postgres:16

3. Check if PostgreSQL is running

docker ps

Expected result: postgres:16 Up 5432/tcp

4. Try connecting to the database If you don’t have psql installed locally, install it first (e.g., on Arch):

sudo pacman -S postgresql-libs

//Then connect:
psql -h localhost -U postgres -d chat_dev
# Password: postgres

5. Create the database for Phoenix Inside your chat_web project folder, run:

mix ecto.create

✅ Why is Docker better (especially on Arch Linux)? (If you are an Arch user like me 😃)

• Version Stability: Arch updates frequently, which risks breaking PostgreSQL versions. Docker isolates the version, making it stable for development.
• Clean OS: No need to clutter your system with systemd services.
• Easy Reset: Messed up your DB? Just delete the container and the volume folder.

🎯 Once everything is ready, here is what we’ll learn in this series:

Part 1 — Phoenix PubSub

• Sending real-time messages without Redis.
• Setting up Node-to-Node PubSub.
• Broadcasting directly to the browser (live).

Part 2 — Phoenix Channels

• Browsers joining rooms (like WhatsApp groups).
• Real-time chat between browsers.
• Integration: Browser ↔ Phoenix ↔ BEAM ChatCluster.

Part 3 — Phoenix Presence

• Displaying who is online.
• Monitoring user join/leave events.
• Synchronizing presence across nodes.

The database has been successfully created.

This means Phoenix + Ecto + PostgreSQL are now 100% ready to go.

We’ll stop here for now. We’ve laid a solid foundation — a clean Dockerized database and a running Phoenix server. That’s enough configuration for one day!

In the next part, we stop configuring and start building. We will:

✅ 1. Integrate PubSub into Phoenix (Connecting the backend nodes). ✅ 2. Build a Real-time Broadcast Module (Zero manual WebSockets required). ✅ 3. Add Presence (Tracking who is online and who joins a room). ✅ 4. Create the Chat UI (Finally, something to look at!).

̶S̶e̶e̶ ̶y̶o̶u̶ ̶i̶n̶ ̶P̶a̶r̶t̶ ̶2̶!̶ 🚀

🚀 Update: Part 2 is Live!

The configuration is done. It’s time to stop setting up and start building. We are going to create the LiveView UI and unleash the power of PubSub.

👉 **Click here to read Part 2: Connect & Render the UI**