SELECT2 AJAX LIVERELOAD CODE

The third part of the js makes the actual socket connection and join the channel phownix:live_reload and starts listening on messages for the event assets_change. Note the channel connection is made to the path /phoenix/live_reload/socket and if you remember correctly, this is the path added in endpoint.ex conditionally if code_reloading? is true. Socket ( ' /phoenix/live_reload/socket ' ) var interval = 100 In a brand new phoenix project created using mix phx.new command, you can notice that dev.exs has the following code: It suffices to understand Phoenix Channel makes it possible for the server to communicate with a browser with which it had earlier make an handshake.) Exploration Step 1 There are other transport layers such as LongPoll and these are beyond the scope of this post. In fact, Phoenix calls web sockets as transport layer. (Aside, Phoenix Channel is not directly tied with web sockets. Phoenix Channel makes use of web sockets protocol (similar to http protocol) which is becoming the new standard for making 2 way persistent connection between the browser and the server. So every response from the server needs a prior request from the client. Once the server responds to a client, it cannot later decide to send any additional data to the client on its own at a later time without a new request originating from the client. Traditionally, automatic updates to a webpage from the web server had been challenging as the HTTP protocol is client centric, meaning, it’s always the client who makes the request and the server responds to it. Phoenix Channel makes it possible to create persistent connection between client (browser) and the web server (cowboy). You won’t lose anything related to LiveReload. If you are already familiar with Phoenix Channel, you can skip this section.

A small javascript helper present in Phoenix LiveReload.

Phoenix Channel (bundled with Phoenix framework).

Live Reload functionality is made possible by these 4 components:

SELECT2 AJAX LIVERELOAD CODE

To better follow this post, I suggest that you create a new Phoenix project using mix phx.new hello and follow the code explanations by actually opening the relevant files in your project. Yes, this is the same one that is powering Phoenix LiveView, an actively developed new feature for Phoenix that is making javascript code redundant for many use cases. Phoenix LiveReload as this feature is called is made possible by using Phoenix Channels, a built-in feature in Phoenix framework. In this post, we will look into how this is working behind the scenes. Whether you are working on CSS/JS files or on your elixir module, providing an updated webpage before you switch your window from your code editor to browser is quite handy. Phoenix provides a good developer experience by auto reloading the webpage whenever you change the source code of your project in the development environment. How LiveReload works behind the scene - Demystifying Phoenix Magic ?

Select2 ajax livereload