Phoenix Framework - Building a Chat Room with Phoenix Live View and Server Side Rendering
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
leexor 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
- Elixir v1.8 requires Erlang 20.0 or later
OS Support for Elixir and Phoenix:
- Mac OSx
- Unix and Linux
- Raspberry Pi
- 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
- Phoenix Image: https://phoenixframework.org/
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.
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