August 19, 2019 (almost 4 years ago)
Phoenix LiveView is a new experiment that allows developers to build rich, real-time user experiences with server-rendered HTML. If you’re not familiar with Phoenix, it’s the fully-featured web framework for the Elixir programming language. At Mux we use Phoenix and Elixir to power our API. I decided to start playing around with LiveView to see what it’s capable of. The idea I had for an example app is Snitch, it’s like “Twitch,” but for snitches (put away your checkbooks potential investors). Under the hood, of course, we’re using Mux Live Streaming.
From the user’s perspective, first you create a “channel”. When that channel is created, Snitch will give you RTMP streaming credentials (just like Twitch does). As the user, you enter those streaming credentials into your mobile app or broadcast software and start streaming.
Right here we have the perfect test case for LiveView. In the UI we show the user the streaming credentials and are now waiting for them to start streaming. Mux is going to send webhooks to our server when relevant events happen. For example:
In a typical web application, without LiveView, common solutions are to either use websockets to push new data to client applications or have those applications poll the server. About every second or so the browser would send a request to the server to get the updated data. But now with LiveView when a webhook hits the server we can re-render on the server-side and push those changes to the client.
After following the installation instructions, let’s add a route for the Mux Webhooks:
Then, in the Mux UI we can add this as our webhooks route. For local development I’m using ngrok to receive webhooks on my localhost server.
The webhook controller is going to receive the payload and update the “channel” in our database by calling Snitch.Channels.update_channel . Let’s look at the update_channel/2 function:
notify_subs/1 is the new function we are going to call when a channel gets updated. This is where the LiveView magic happens.
This function is going to broadcast a message so that subscribers can react to this change. More on that shortly.
Now let’s update the controller and tell the controller to render with LiveView:
And let’s create SnitchWeb.LiveChannelView. When we call notify_subs() up above, this LiveChannelView is the code that needs to subscribe and push an update to the client.
To summarize what’s happening above:
The only difference in the show and show_active templates that we use in LiveChannelView is that instead of eex extension we use the leex extension which stands for live embedded elixir.
The full code is up here on github. You can clone it and run it yourself. You’ll also need to sign up for a free account with Mux to get an API key. Feel free to reach out if you have any questions!
Are you currently using LiveView? If so, what are you using it for?
Are you a developer that is curious about Elixir and Phoenix? You might be interested to come work on our API and now is the right time to join Mux and here is where I talk about why I joined Mux.
I will be representing Mux at Elixir Conf this year. Come find our booth and say hi, mention that you read this article and we’ll have a present for you.
No credit card to start. $20 in free credits when you're ready.
Online video consumption is accelerating rapidly, and video Content Delivery Networks (CDNs) have been instrumental in sustaining this growth.
By Scott Kidder
HTTP Adaptive Streaming (HAS) is unquestionably and by orders of magnitude the dominant way of streaming media on the internet. Part history, part “hindsight is 20/20” revisionist history, and part te ...
By Christian Pillsbury
Most people know some basics of color theory but what many do not realize is how complicated this becomes when we try to record and playback color accurately.
By Matthew Szatmary