DEV Community

Cover image for Building a Live Chat App with Phoenix LiveView
HexShift
HexShift

Posted on

Building a Live Chat App with Phoenix LiveView

#elixir #programming #tutorial #ui

Building a Live Chat App with Phoenix LiveView

Phoenix LiveView simplifies the process of creating real-time applications with Elixir. One great use case for LiveView is building a live chat application. In this tutorial, we’ll create a simple live chat app where messages are exchanged in real time, using Phoenix LiveView and Elixir.

Step 1: Install Phoenix LiveView

If you haven’t already, create a new Phoenix project with LiveView support:

mix phx.new live_chat --live
cd live_chat
mix phx.server
Enter fullscreen mode Exit fullscreen mode

This sets up a Phoenix project with all the necessary dependencies for LiveView. If you're adding LiveView to an existing project, make sure to add it in your mix.exs file:

defp deps do
  [
    {:phoenix_live_view, "~> 0.17.5"}
  ]
end
Enter fullscreen mode Exit fullscreen mode

Run mix deps.get to fetch the new dependency.

Step 2: Create the Chat LiveView

Next, let’s create the LiveView that will render our chat messages in real-time. Create a new LiveView file chat_live.ex:

# lib/live_chat_web/live/chat_live.ex
defmodule LiveChatWeb.ChatLive do
  use Phoenix.LiveView

  def mount(_params, _session, socket) do
    {:ok, assign(socket, messages: [])}
  end

  def handle_event("send_message", %{"message" => message}, socket) do
    new_message = %{id: UUID.uuid4(), text: message}
    messages = [new_message | socket.assigns.messages]
    {:noreply, assign(socket, messages: messages)}
  end

  def render(assigns) do
    ~L"""
    <div>
      <div id="chat-messages">
        <%= for message <- @messages do %>
          <div id="message-<%= message.id %>"><%= message.text %></div>
        <% end %>
      </div>
      <input type="text" id="message-input" phx-keyup="send_message" placeholder="Type your message" />
    </div>
    """
  end
end
Enter fullscreen mode Exit fullscreen mode

Step 3: Set Up the Route

Now, in your router.ex, make sure to map the LiveView route:

# lib/live_chat_web/router.ex
defmodule LiveChatWeb.Router do
  use LiveChatWeb, :router

  live "/chat", LiveChatWeb.ChatLive
end
Enter fullscreen mode Exit fullscreen mode

Step 4: Run Your Chat App

With the LiveView set up, run the Phoenix server:

mix phx.server
Enter fullscreen mode Exit fullscreen mode

Navigate to http://localhost:4000/chat in your browser. You’ll see a simple live chat app where users can type messages and see them instantly appear.

✅ Pros and ❌ Cons of Building a Chat App with Phoenix LiveView

✅ Pros:

  • ⚡ Real-time, server-side rendering without JavaScript
  • 🧠 Easy to integrate with Phoenix applications
  • 🚀 Performance optimized for real-time data handling
  • 🛠 No need for WebSockets or complex JavaScript frameworks

❌ Cons:

  • 🧩 Less flexibility compared to client-side frameworks like React for highly interactive UI
  • 📈 Requires proper scaling for handling many concurrent users
  • 🔄 More complex to manage advanced front-end interactions

Summary

Phoenix LiveView makes it incredibly easy to build real-time applications like a live chat app without writing JavaScript. By handling everything on the server side, LiveView keeps the codebase simpler while providing real-time updates to the user interface. You can expand this basic chat app further by adding features such as user authentication, private messages, and notifications.

For a more advanced guide on building scalable Phoenix LiveView applications, check out my 20-page PDF, Phoenix LiveView: The Pro’s Guide to Scalable Interfaces and UI Patterns, available on Gumroad for just $10:

Phoenix LiveView: The Pro’s Guide to Scalable Interfaces and UI Patterns

If this was helpful, you can also support me here: Buy Me a Coffee ☕

Top comments (0)