Phoenix Framework - Building a Chat Room with Phoenix Live View and Server Side Rendering

Repository: https://github.com/phoenixframework/phoenix

What Will I Learn?

• You will learn how to use Phoenix LiveView
• You will learn about Server Side Rendering
• You will learn how to use leex or LiveView Templates
• You will learn how to setup and use Live Controllers
• You will learn about Phoenix PubSub
• You will learn about the Conn and Assigns Maps

Requirements

System Requirements:

• Elixir v1.8 requires Erlang 20.0 or later

OS Support for Elixir and Phoenix:

• Mac OSx
• Unix and Linux
• Windows
• Raspberry Pi
• Docker

Required Knowledge

• You need to have a fair understanding of Elixir
• You need to have some understanding of Phoenix
• You need to understand the EEx template system

Resources for Elixir and Phoenix:

• Elixir Website: https://elixir-lang.org
• Elixir Installation Instructions: https://elixir-lang.org/install.html
• Awesome Elixir Github: https://github.com/h4cc/awesome-elixir
• Phoenix Website: https://phoenixframework.org/
• Phoenix Installation Instructions: https://hexdocs.pm/phoenix/installation.html
• Elixir Documentation: https://elixir-lang.org/docs.html
• Phoenix Documentation: https://hexdocs.pm/phoenix/Phoenix.html
• LiveView Github Repository: https://github.com/phoenixframework/phoenix_live_view

Sources:

• Phoenix Image: https://phoenixframework.org/

Difficulty

• Intermediate

Description

In this Elixir and Phoenix Framework Video Tutorial series, we take a look at the new library Phoenix LiveView. LiveView allows us to build web applications that make use of Server Side Rendering. We use this library to build a real-time Chat Room Application along with the Pheonix PubSub in Phoenix 1.4.

Understanding How LiveView Works

In the past, web applications were built using a simple server that would serve static pages and static assets. As web technologies became more powerful and higher bandwidth connections became the average; developers started to create applications that also included dynamic pages. To truly facilitate this process, many client-side frameworks and libraries were developed. Libraries like React, Angular and Vue allow the developer to push many of the servers responsibilities into a client-side applications. LiveView on the other hand chooses to push the rendering responsibilities into the server side application to minimize the use of these client side technologies and streamline the development process.

In this flow chart, we map out the general architecture of a Phoenix LiveView application. Like with any Phoenix Application, we build out a server which can be connected to a database via the Ecto library. This Server then serves out a small static or dynamic page with very minimal JavaScript and HTML. The purpose of this JavaScript and HTML is to connect the client to a Phoenix Channel. This Pheonix Channel is just an abstraction over a WebSocket and it dynamically pushes out HTML in response to changes made on the client side and the browser. Rather then Diffing the DOM (document object model) using a library like react, we can Diff the DOM via this Channel and respond to user interaction in real-time.

Passing Data Around using the Assigns Map

One of the major pieces of the Phoenix Channel abstraction is this idea of an Assigns map. In the Elixir language, it is common to store and reference data inside of a Map structure because it is very efficient. In Phoenix, the websocket connection and HTTP connections are represented with large Elixir Map structures. Phoenix allows users to modify these maps by attaching meta-data that is pertinent to the application. This Assigns map is very important with LiveView because this is the primary way to pass the data from the server to the client.

The code above highlights two specific functions. The first function called fetch takes in the websocket and a user name and then attaches that username to the Assigns map of the socket by using a function called assign. It also attaches any chat messages to a messages key and the overall changeset of the data set to a changeset key. Below fetch there is a handle_event function. This is one of two handle_event functions in this project. This one pattern matches on the string "validate" with is an event that is passed back through the Assigns map by the client. By doing this, we are able to validate the chat form in real-time by updating the changeset and then passing the new instance back into the Assigns map. These keys are then available in the leex (LiveView) templates.

Full Github Source Code can be found here: https://github.com/tensor-programming/live_view_chat_example

Video Tutorial

Curriculum

Related Videos

• Phoenix 1.3 Chat Application Tutorial
• Phoenix 1.3 Contexts and Ecto Schemas

GraphQL Series

• Phoenix 1.3 GraphQL API - Part 1
• Phoenix 1.3 GraphQL API - Part 2
• Phoenix 1.3 GraphQL API - Part 3