CODEWITHSUNDEEP
javascriptajaxangularjs
Marcelo F.
Marcelo F.

Reputation: 395

Update data in (really) real-time with Javascript

hi

I want to build a control panel for a web art application that needs to run in fullscreen, so all this panel, that controls stuff like colors and speed values, have to be located at a different window.

My idea is to have a database storing all these values and when I make a change in the control panel window the corresponding variable in the application window gets updated too. So, it's basically a real-time update that I could do with AJAX setting a interval to keep checking for changes BUT my problem is: I can't wait 30 seconds or so for the update to happen and I guess a every-1-second AJAX request would be impossible.

Final question: is there a way to create a sort of a listener to changes in the database and fire the update event in the main application only immediately after I change some value in the control panel? Does Angular or another framework have this capability?

(Sorry for the long explanation, but I hope my question is clearer by offering the context [: )

Upvotes: 0

Views: 9990

Answers (4)

klapvee
klapvee

Reputation: 137

i use https://pushjs.io/, had exactly the same problem and this is a really simple solution for your problem. It is capable of sending and listening to events without any database interference.

Upvotes: 0

Hernan Rajchert
Hernan Rajchert

Reputation: 926

For the realtime I would recommend using a library like socket.io or using a database like firebase.

For the fullscreen I would recommend using a library like angular-screenfull

Upvotes: 0

Paul S.
Paul S.

Reputation: 66364

If one window is opening the other windows via JavaScript, you can keep the reference to the opened window and use otherWindow.postMessage to pass messages across

"Parent" window looks like

// set up to receive messages
window.addEventListener('message', function (e) {
    if (e.origin !== 'http://my.url')
        return; // ignore unknown source
    console.log(e.message);
});

// set up to send messages
var otherWindow = window.open('/foo', '_blank');
otherWindow.postMessage('hello world', 'http://my.url');

"Child" windows look similar

// same setup to recieve
// ...

// set up to send
var otherWindow = window.opener;
// ... same as before

Upvotes: 0

JoshWillik
JoshWillik

Reputation: 2645

A web socket powered application would have this benefit. This carries a bit more complexity on the back end, but has the benefit of making your application as close to real-time as can be reasonably expected.

The Mozilla Development Network has some good documentation on websockets.

On the front end, the WebSocket object should work for you on most modern browsers.

I'm not sure what your back end is written in, but Socket.IO for Node.js and Tornado for Python will make your applications web-socket capable

Upvotes: 1

Related Questions