Phoenix LiveView live_link
Tags: phoenix, phoenixframework, elixir, liveview
Published: 2019-07-01 10:28:09

---
title: Phoenix LiveView live_link
published: true
tags: phoenix, phoenixframework, elixir, liveview
canonical_url: https://www.poeticoding.com/phoenix-liveview-live_link/
cover_image: https://1o6jjh24p1t92lcqci49qg8a-wpengine.netdna-ssl.com/wp-content/uploads/2019/06/phoenix_liveview_live_link_featured_image.jpg
description: How to use live_link and understand when to use live_link and when live_redirect. Inspecting the messages between LiveView and the browser.
---

{% youtube MIKMZpPPuMI %}

**[Subscribe to get FREE Tutorials by email](https://pages.convertkit.com/c021826e86/5ddcb20a27)**. Start learning Elixir and Phoenix to build features and apps!





In [the previous article focused on `live_redirect`](https://www.poeticoding.com/phoenix-liveview-change-the-url-without-refreshing-the-page/), we've seen how in Phoenix LiveView we can change the URL without changing the location or refreshing the page.



In this way we can keep the URL updated with the current page state, making easier for the user to bookmark or share it.



![LiveView Pictures](https://1o6jjh24p1t92lcqci49qg8a-wpengine.netdna-ssl.com/wp-content/uploads/2019/06/liveview_pictures_pushstate-1.gif)



We are going to see how to refactor the code with [live_link](https://github.com/phoenixframework/phoenix_live_view/blob/957b7ebfb66034cb093a81d991c044f7e532aa5d/lib/phoenix_live_view.ex#L913), making the code simpler and reducing the number of messages exchanged between our browser and LiveView.



## Pictures example with `live_redirect/2`



Let's consider the [LiveView Pictures page example](https://www.poeticoding.com/phoenix-liveview-change-the-url-without-refreshing-the-page#pictures-example),  and see how, in this case, is convenient to use `live_link/2` instead of `live-redirect/2`.



In this example we have a list of thumbnails. When we click on a thumbnail, LiveView changes the URL and updates the page showing the full-size image.



```elixir

defmodule DemoWeb.PicturesLive do

  ...

  def render(assigns) do

    ~L"""

    ...

    

    <%= for {id, pic} <- pictures do %>

    

    <div class="column" 

         phx-click="show" 

         phx-value="<%= id %>">

      <%= pic.author %>

      <img src="<%= picture_url(pic.img, :thumb) %>">

    </div>

    

    <% end %>



    ...

    """

  end

end

```



Each thumbnail element has  `phx-click="show"` and `phx-value="<%= id %>"` attributes. In this way when we click a thumbnail the `"show"` event is sent to the server along with the picture id.



```elixir

def handle_event("show", id, socket) do

  {:noreply, live_redirect(socket, to: Routes.live_path(socket, DemoWeb.PicturesLive, id))}

end

```



The LiveView process handles this event with `handle_event("show", id, socket)` function, sending a `live_redirect` message back to the browser.





## Inspect LiveView messages



Let's see better what happens, checking the messages exchanged between the browser and Phoenix.



*I'm using the Chrome inspector, but with other browsers should be similar.*



We open the inspector, we select the network tab and clicking `WS` we show only the WebSocket connections. Refreshing the page we now see the WebSocket connection used by Phoenix LiveView and clicking on it we can see the messages exchanged between the browser and LiveView.



![inspector image with few messages](https://www.poeticoding.com/wp-content/uploads/2019/06/liveview_messages_live_redirect.gif)



Clicking on a thumbnail we see four messages




```json

[...,"event",{"type": "click", "event": "show", "value":"XesILKdmkwM"}]



[...,"live_redirect",{"kind": "push", "to": "/pictures/XesILKdmkwM"}]

```



* When clicking a thumbnail, the browser sends a "show" event message to LiveView.

* Phoenix sends back a *live_redirect* message with the new `URL` and the LiveView front-end javascript library [changes the URL to the new one using `history.pushState()`](https://github.com/phoenixframework/phoenix_live_view/blob/bcacd1d0545e923f069738fe244c27904a58973d/assets/js/phoenix_live_view.js#L573). 



```json

[...,"link",{"url":"/pictures/XesILKdmkwM"}]



[...,"phx_reply",{"response":{"diff": {...}}}]

```



* After changing the URL, the browser sends a message back to the server with the new URL

* LiveView processes this message with [`handle_params/3`](https://github.com/poeticoding/phoenix_live_view_example/blob/master/lib/demo_web/live/pictures_live.ex#L39), renders the new page and sends back a response with the differences to apply on the page.



This back and forth of messages is redundant,  we can avoid the first two messages (*click* and *live_redirect*) with `live_link`.



## live_link



By using `live_link` we don't need to handle the click event ourself. We can then remove the two attributes, `phx-click` and `phx-values`, along with the `handle_event("show", id, socket)` function.



```elixir

defmodule DemoWeb.PicturesLive do



  def render(assigns) do

    ... 

    <%= for {id, pic} <- pictures do %>

    

      <%= live_link to: Routes.live_path(@socket, DemoWeb.PicturesLive, id) do %>



        <div class="column">

          <%= pic.author %>

          <img src="<%= picture_url(pic.img, :thumb) %>">

        </div>



      <% end %>

    <% end %>

		

		...

	end

end

```





We wrap our thumbnail tag with `live_link` and use the same `Routes.live_path/3` function as we did with `live_redirect`.

Since we are inside a LiveView template, we just need to use `@socket` instead of `socket`.



We see how in this way the code becomes simpler and using the browser inspector, we also see that for each click we just have two messages.



```json

[...,"link",{"url":"http://localhost:4000/pictures/XesILKdmkwM"}]



[...,"phx_reply",{"response":{"diff": {...}}}]

```



With *live_link*, the browser changes immediately the URL without sending any click event (like we did before). Once changed, the new URL is sent to the server which re-renders the page and sends back a message with the differences to apply.



## When using `live_link` and when `live_redirect`?



So, when to use `live_link` and when `live_redirect`?



In the [Pictures example](https://www.poeticoding.com/phoenix-liveview-change-the-url-without-refreshing-the-page/#pictures-example), the user interacts with the frontend clicking the links. It's clear that `live_link` is the right choice - it makes the code simpler and we get less exchanged messages.



[In the animated URL](https://www.poeticoding.com/phoenix-liveview-change-the-url-without-refreshing-the-page/#animated-url) example though, there is no user interaction (apart from starting/stopping the animation). Every 100 milliseconds the server tells the browser to change the URL, so in this `live_redirect` is the way to go.


**[Subscribe to get FREE Tutorials by email](https://pages.convertkit.com/c021826e86/5ddcb20a27)**. Start learning Elixir and Phoenix to build features and apps!