📄️ LiveView API
We are going to be using Typescript in our examples because LiveViewJS is very thouroughly typed which provides great type
📄️ LiveView API - `mount`
mount is called by the LiveViewJS runtime when your LiveView is first mounted (over HTTP and Websocket). mount is where you initialize the context (i.e. state) of your LiveView (using socket.assign) and otherwise configure the LiveView. The webserver integrations automatically make session data available via the session which can be useful if you need to use data from the user's session. Don't worry about params for now, we'll cover that later.
📄️ LiveView API - `render`
render is responsible for taking the context (i.e. state) of the LiveView and generating the HTML/CSS for the client. The LiveViewJS framework automatically passes the current context of the LiveView into render along with meta data (things like the csrfToken, page url, etc.). It uses the html method to generate the HTML/CSS for the client.
📄️ LiveView API - `handleEvent`
handleEvent is called automatically by the LiveViewJS framework when the a user action causes the browser to send an event to the server (e.g. clicks, keyboard input, form updates, focus/blur, etc). (More details on User Events). The handleEvent function is responsible for updating the context (i.e. state) of the LiveView based on the event.
📄️ LiveView API - `handleParams`
Let's explore the handleParams method. Since the previous example (counterLiveView) did not use handleParams, we'll define helloLiveView.ts and explore the handleParams method with it. As you can see below, helloLiveView.ts defines mount, handleParams, and render.
📄️ LiveView API - `handleInfo`
handleInfo is how server-side events (a.k.a Info) are handled. These server-side events are initiated by processes that are happening on the server for example: database updates, background jobs, pub/sub messages, or some other asynchronous process. Just like handleEvent and handleParams, handleInfo is automatically passed the info event (i.e. server event) along with the socket and can use it to manipulate the context of the LiveView or otherwise respond to the info messages it receives.
📄️ User Initiated Event with `handleInfo`
Search is a common use case where a user initiated event might be handled by handleInfo.
📄️ Background Task with `handleInfo`
A "live" dashboard that updates with the latest metrics periodically is another use case that shines with server events handled asynchronously by handleInfo.
📄️ Pub/Sub with `handleInfo`
Pub/Sub is a common pattern for decoupling processes by allowing messages to be sent to a topic by one process and received asynchronously by another. LiveViewJS (and Phoenix LiveView for that matter) are built on top of Pub/Sub and Pub/Sub is what enables building the real-time, mulit-player features with such ease (along with the LiveView programming model). We will go into more detail on Pub/Sub in the Real-Time Multi-Player docs.