Since you have considered Pusher, you can get the necessary keys from Pusher. Once you have access to that, in the client, you can add the Pusher js library to the html file you want to "push" events to.
Then you need to subscribe to a channel(js).
var channelName = "my-channel"
var channel = pusher.subscribe(channelName);
Once you subscribe to a channel from client. Trigger an event along with the data you need to send using python pusher server lib (python):
push = pusher.Pusher(app_id='your-pusher-app-id', key='your-pusher-key', secret='your-pusher-secret')
push['my-channel'].trigger('dom-change-event', {'data': 'data'})
You can listen to this event from your client side(js):
channel.bind("dom-change-event", function(data){ // the data you Pushed from backed
$(".div-to-change").hide(); // with the help of jQuery select the dom, and hide it.
})
Pusher maintains a websocket connection with the client, and as soon as an event is triggered from the server, it is raised by Pusher at the client side.
DOM manipulation(change):
The DOM change that you were referring to can be done in many ways. Some are mentioned below:
- Have all the Content(html code) ready in your frontend and based on the server's push message you can show/hide different parts of your DOM like the one mentioned above.
- Construct the DOM on the fly with javascript based on the pusher message
- Send the HTML code from the server and simply append it to the DOM.
IMPORTANT thing to note here is that DOM manipulation is done using a library called jQuery in the above example. jQuery makes it easy for you do DOM manipulations. http://jquery.com/
Also refer to this article to get started on doing DOM manipulations(changes) using jQuery.
