Building Real-Time Web Applications with Phoenix LiveView/

...

/

Build a Simple LiveView

Build a Simple LiveView

Learn how to build a simple LiveView in Phoenix.

We'll cover the following...

The Pento app’s first LiveView will be a simple game called “You’re Wrong!”. It will ask the users to guess a number and then tell them they’re wrong.

We’ll have to do three things:

  • Build a route
  • Render a page
  • Handle the events

Let’s go!

How to define the route

LiveView routes are defined in our Phoenix application’s router. First, we open up lib/pento_web/router.ex and add the live route for "/guess" like this:

Press + to interact
scope "/", PentoWeb do 
   pipe_through :browser
   live "/", PageLive, :index
   live "/guess", WrongLive 
end

We set up everything in the code below. The results can be viewed just by running it.

Most Phoenix route definitions use HTTP methods, primarily get and post. A LiveView route is a little different. Live view routes are defined with a call to the live macro (more on that later) and point to a long-running LiveView. The initial HTTP request and response will flow through this route. After that, the WebSocket will handle the communication.

How to render the LiveView

Let’s shift to the code that implements our LiveView. We created a new file inside lib/pento_web/live called wrong_live.ex.

These concepts are foundational, so we’ll address them in three parts.

First, we define the live_view module in the lib/pento_web/liv/wrong_live.ex file like ...