How the states of containers are updated on Rancher UI?

I found the state can be updated automatically in Rancher UI even if I do some actions on containers through SSH , such as ‘docker stop’…, but I can not trace any http/ws interaction between browser and rancher backend, how can the states are updated ?

The UI is updated via the websocket connection to /v1/projects/<project id>/subscribe.

(On the host side, the Rancher agent watches for docker events and send them up through its websocket connection to the server…)

Thanks for your kind reply!

When resource changed event is received:

...
  else if ( message.name === 'resource.change' && message.data )
  {
    var resource = message.data.resource;

    var info = 'name='+resource.name + ', state='+resource.state;
    if ( resource.transitioning !== 'no' )
    {
      info += ', transitioning='+resource.transitioning + ', message='+resource.transitioningMessage
    }

    console.log(message.resourceType, message.resourceId, 'changed:', info);
  }
...

In the above code, the received data is only logged to console, but how can the UI is updated?

That’s just an example of watching the event stream…

In our actual UI there’s a store which has a copy of every resource model in browser memory. The new copy that comes in from the change event is turned into a model and replaces the old copy (or is added to the store if it wasn’t known about before). When a model is added/removed/changed, the relevant pieces of the screen are automatically re-rendered by Ember.js to show the change.

Very thanks to your detail explaination, I understand it now!