two side data binding javascript library usage for multiscreen application

Question

I am a c# developer and I am writing kiosk applications. Our kiosks has two screens. One screen for customer and one screen for operator. Customer can input personal information from touch screen. I wonder how do I handle multiple screens in a html page. For example I create one html page for customer and operator. And web page has two text input, name and credit card number. When customer writes one letter using screen keyboard, the operator should see "x" simultaneously for each letter. I mean two different browser object and one html page. Should I handle this with knockout, angular, etc..? I am handling this problem with C# WPF mvvm pattern. I am using one binding object for two different window object and mvvm pattern handles two side data binding for me.

Answer 1

So, that's a big topic for a single question. Those two users ("customer" and "operator") have two different web browsers that just request the same page, right? Server-sided that's one binding, but its two different clients that don't know anything about each other (unless you tell them).

The technology that could help you is WebSockets. You basically open a two-way connection between browser and server, which allows multiple browsers to speak with each other (via the server). There are awesome demos and case studies outside.

A quite common library for dealing with WebSockets is socket.io. It can be used with AngularJS (tutorial) as well as everything else.

Your use case is then processed as follows:

• the "customer" types x in his input field
• the AngularJS two-way binding updates the model
• the socket.io connection sends the update to the server
• the server sends the update via socket.io to all connected browsers (which is the "operator")
• socket.io in the "operator"s browser gets notified
• it updates the AngularJS model
• the two-way binding updates the view
• x appears on the screen of the "operator"