网页上的实时互动

Question

背景：我有一个微控制器ESP8266，可通过TCP连接TCP / IP，UDP甚至HTTP堆栈。一个按钮连接到该微控制器并触摸触发事件。我将该信息（现在以UDP进行测试）发送到运行HTML轮播（网页）的计算机。我想实时创建按钮和网页之间的交互。我发现一个简单的HTML / CSS / JS网页不允许读取UDP套接字，所以我在计算机上安装了一个Web服务器来使用PHP。

注意：实时意味着直接交互（低于30毫秒到100毫秒）但在实际数据流中应该没问题。

问题：我在Web实现上挣扎。我在HTML / CSS / JS中找到了合适的轮播。我已经在PHP文件中收到了一些UDP数据包，但我不知道如何进行实时交互（在轮播中触发图像更改）。我读到了关于Ajax的内容，但似乎是在客户端。事实上，我没有Web应用程序设计的背景知识。

我想知道实际上是否有可能，如果是基本信息，就可以开始研究它。

Answer 1

虽然我不完全了解您的微控制器设置，但我可以告诉您，实时更改html元素和值是绝对可能的。我工作的地方使用Angular.js，它有一个方便的“范围”变量，它直接链接到HTML。因此，如果代码中的值发生变化，它也会在网站上发生变化（无需重新加载页面）。它的开头比较简单，但先查看演示或其他内容，也许我理解错误的问题。

https://angular.io/

Answer 2

是的，这绝对是可能的。您的两个选项是轮询和websockets。如果您的后端是PHP，我首先编写一些JavaScript来每隔200毫秒在给定的URL上轮询服务器。然后，处理该URL端点的PHP代码将从某个地方的数据存储中读取值，让我们在memcached中说一个缓存键。

1. 按按钮
2. 发送UDP消息
3. PHP代码接收UDP消息并在缓存键中设置值
4. 当您的轮询代码接下来运行时，它会收到更新的数据，然后您可以在网页上显示这些数据。

这是一个非常基本（且效率低下）的设置，但它很简单，应该让你入门。

Answer 3

我们遇到了同样的问题并最终使用了NGINX和PUSH模块。

它允许将发送到服务器的消息（NGINX）推送到浏览器上显示的网页。

在我们的设置中，控制器将一个包含JSON数据的POST发送到运行NGINX的小型Linux板。 NGINX然后将此发送给任何订户。该网页包含几行js代码以订阅该订阅源。当JSON到达页面时，它会触发js接收代码，并更新网页中显示的字段。设置非常灵敏，没有测量延迟，似乎在60ms内。