lohasave.blogg.se - Phoenix liveview examples

#PHOENIX LIVEVIEW EXAMPLES UPDATE#

So, we will create a new module lib/note_app/notes/note.ex and the following code. Ideally, it should be placed in the context API layer but we haven't created any context API layer. Question arises where do we place this function.

The name of the channel/topic, in our case it is "notes".

The PubSub instance of our app, in our case it is NoteApp.PubSub.

The Phoenix.PubSub module has a subscribe function that takes 2 parameters.

It will be a function that will be called by the LiveView module.

We've understood the concept of the subscriber.

Below diagram will give you an idea about subscribers and Subscriber When the broadcast message is received to the subscribed Process their state is updated which ultimately re-renders the view. Similarly, when a message is published from a topic, the message is broadcast to all the subscribers of that topic. When a message is published on a topic, the message is broadcast. In application, our LiveView(module) process subscribes to a particular channel(s). The documentation itself says it's a Realtime Publisher/Subscriber service. Phoenix PubSub is an API that is responsible for doing live updates in the app.

#PHOENIX LIVEVIEW EXAMPLES UPDATE#

Refer to the gif below for the complete real-time update version of the app that we are going to make.

In this blog, we are going to add this new feature to our previous blog code. In our previous version of the Notetaking app when we add the note in the screen and if there is a browser screen opened parallel with the existing one then that new note won't be reflected, you have to refresh the browser to see the result. For example, in a chat app, you don't have to explicitly refresh your screen to see the change in the screen.

What does that mean? It means to do an update in your application screen without explicitly refreshing your application. In my previous blog on the Note-taking app, we missed harnessing the most important feature of Phoenix LiveView i.e real-time update.