Push content to a the browser...Change the DOM?

Ok. I have this passion project I've been working on.

I'm at the stage where I have a mobile app and a backend,
really I use a hosted messaging/cloud processing service as my NEW
backend, replacing my own servers.

The problem lies in my non ability to understand javascript.

I know how to go from mobile to backend and all that good stuff...
What i now what to do is simply change a DOM element.
From either GO code or Python code.

mobile ----> messaging/processing ----> browser/DOM

Basically push either a url or a string of html code so that it displays
in the browser

For this I understand my only choice is javascript.

I've looked at pusher and web sockets...

but i still dont understand how to ACTUALLY make the html element change.

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:

1. 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.
2. Construct the DOM on the fly with javascript based on the pusher message
3. 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.

Maybe you can use reverse AJAX, I use DWR Framework
http://directwebremoting.org/dwr/documentation/reverse-ajax/index.html

JavaScript to change an element

HTML

<div id="myDiv" class="divvy">some content</div>

JavaScript

// selecting elements
var elementById = document.getElementById("myDiv");     // returns the element by id
var elements = document.getElementByClassName("divvy"); // returns array of all elements with this class

References

• Mozilla Developer Network