【问题标题】:How to create two-way interactive web UI elements?如何创建双向交互的 Web UI 元素?
【发布时间】:2015-05-11 17:25:22
【问题描述】:

我似乎不知道要搜索的正确关键字,所以我将通过一个简单的示例来描述我正在尝试做的事情,并希望获得一些可能的技术/技术/库/教程。

一个或多个人可以查看包含颜色选择器的网页(例如:jqueryui 的颜色选择器,带有 3 个滑块和一个不断变化的颜色框)。当您第一次访问该页面时,您会看到当前选择的颜色(全局并在所有用户之间共享)。如果任何用户通过移动滑块更改颜色,则 (1) 新值会立即传递到服务器(它将控制物理灯光),并且 (2) 网页的任何其他查看者的颜色选择器都会更改也是。

因此,两个关键动态是: 第一 - 每当用户在屏幕上更改新值(例如:移动滑块)时,浏览器都会向服务器发送新值,以更新所有用户共有的全局值。和两个 - 每当全局值更改时,它都会发送到所有当前查看器的浏览器。 (如果两个用户同时尝试更改同一个控件,我不在乎哪个“获胜”,只是系统保持稳定)。

我怀疑这涉及到将 jqueryui 之类的 javascript UI 库与一些 ajax 或 Web 套接字功能连接起来,但我还没有找到任何参考或教程或库。

如果重要的话,最初的目标是通过 WiFi 被手机浏览器访问的树莓派服务器,并通过多个交互式 UI 元素控制“像素”LED 灯上显示的模式;上面描述的颜色选择器是一个简化的例子。

我可以在不立即交互的情况下做到这一点,方法是使用传统的表单和提交按钮,将值发送到服务器,以及刷新按钮,从服务器的当前值重绘页面。但我希望用户能够在移动滑块时看到物理灯光的变化(尽管有一些固有的小延迟)。而且我希望其他查看者能够从当前颜色(图案/参数)开始进行更改,而无需先手动刷新页面。

【问题讨论】:

  • 如果您想要一个好的答案,您可能需要在您的问题中添加一些代码。你有没有尝试过什么?如果是这样 - 请使用您问题中的代码 - 如果不是,请在寻求帮助之前尝试一下。
  • 它相当简单。通过 web-sockets(或 ajax-polling)在客户端和服务器之间建立双向通信通道。在频道上收听/发送命令,并相应地更新 UI
  • 可以包含html,js试过吗?
  • 我想不会有成千上万的人同时使用它,所以你可以做一些简单的事情: - 1 - 滑块值更改 -> 将值发送到 php 脚本,例如:put .php - 2 - php 脚本将值存储在数据库或仅一个文本文件就足够了 - 3 - get.php 是另一个从数据库返回值的脚本 - 4 - 每 x 秒进行一次 ajax 调用,设置间隔为 on get.php - 5 - 如果本地值不等于服务器值 -> 更新滑块

标签: javascript jquery ajax jquery-ui websocket


【解决方案1】:

我最近参加了一个微软网络开发营,他们在谈论信号 R,这听起来很像你正在尝试做的事情。如果您愿意,我可以通过 Dropbox 为您提供他们为信号 r 提供的演示实验室

【讨论】:

  • 是的,谢谢,这听起来确实是我正在寻找的一个很好的例子。但是,唉,在主机方面,我不知道 asp.net,尤其是在树莓派上。是否有类似的 PHP 或 Python 工具包(如果它必须以主机为中心)?或者只是使用javascript(如果它可以更接近主机不可知论)?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-10-30
  • 2016-12-13
  • 1970-01-01
  • 2021-08-19
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多