javascript - 多屏应用的两侧数据绑定(bind)javascript库使用

Question

我是一名 C# 开发人员，我正在编写信息亭应用程序。我们的售货亭有两个屏幕。一个屏幕给客户，一个屏幕给运算符(operator)。客户可以从触摸屏输入个人信息。我想知道如何处理 html 页面中的多个屏幕。例如，我为客户和运算符(operator)创建了一个 html 页面。网页有两个文本输入，姓名和信用卡号。当客户使用屏幕键盘写一个字母时，运算符(operator)应该同时看到每个字母的“x”。我的意思是两个不同的浏览器对象和一个 html 页面。我应该用 knockout ， Angular 等来处理这个问题吗？我正在使用 C# WPF mvvm 模式处理这个问题。我为两个不同的窗口对象使用一个绑定(bind)对象，mvvm 模式为我处理两侧数据绑定(bind)。

Answer 1

所以，这是一个单一问题的大主题。这两个用户(“客户”和“运算符(operator)”)有两个不同的 Web 浏览器，只请求相同的页面，对吗？服务器端是一个绑定(bind)，但它是两个不同的客户端，彼此之间一无所知(除非你告诉他们)。

可以帮助您的技术是WebSockets .您基本上打开了浏览器和服务器之间的双向连接，这允许多个浏览器相互通信(通过服务器)。有真棒demos和外部案例研究。

处理 WebSockets 的一个很常见的库是 socket.io .它可以与 AngularJS ( tutorial) 以及其他任何东西一起使用。

然后按如下方式处理您的用例:

• “客户”在他的输入字段中输入x
• AngularJS 双向绑定(bind)更新模型
• socket.io 连接将更新发送到服务器
• 服务器通过 socket.io 将更新发送到所有连接的浏览器(即“运算符(operator)”)
• “运算符(operator)”浏览器中的 socket.io 收到通知
• 它更新 AngularJS 模型
• 双向绑定(bind)更新 View
• x 出现在“运算符(operator)”的屏幕上