2017-08-03 43 views
0

背景:我有一個微控制器ESP8266,可以通過TCP/IP,UDP甚至使用WiFi的HTTP堆棧來啓用連接。一個按鈕連接到這個微控制器並觸發觸發事件。我將這些信息(現在用於測試的UDP)發送給運行HTML輪播(網頁)的計算機。我想實時創建按鈕和網頁之間的交互。我發現一個簡單的HTML/CSS/JS網頁不允許讀取UDP套接字,因此我在計算機上安裝了一個Web服務器以使用PHP。網頁上的實時交互

注意:實時是指直接交互(低於30毫秒到100毫秒),但在實際數據流中應該沒問題。

問題:我在Web實現上掙扎。我在HTML/CSS/JS中找到適當的輪播。我已經在PHP文件中收到了一些UDP數據包,但我不知道如何執行實時交互(觸發輪播中的圖像更改)。我閱讀了Ajax,但它似乎在客戶端。事實上我沒有Web應用程序設計的背景。

我想知道是否有可能,如果是基本信息開始工作。

回答

0

雖然我不完全瞭解您的微控制器設置,但我可以告訴您,實時更改html元素和值是可以實現的。我工作的地方使用Angular.js,它有一個方便的「範圍」變量,直接鏈接到HTML。因此,如果代碼中的值發生變化,它也會在網站上發生變化(無需重新加載頁面)。開始時相對比較簡單,但先查看演示或其他東西,也許我理解錯誤的問題。

https://angular.io/

0

是的,這是絕對有可能的。你的兩個選項是輪詢和websocket。如果您的後端是PHP,我會開始編寫一些JavaScript以每200毫秒輪詢給定URL處的服務器。處理該URL端點的PHP代碼然後會從某個數據存儲中讀取值,比如說memcached中的緩存鍵。

  1. 按下按鈕
  2. UDP報文發送
  3. PHP代碼接收UDP消息並設置緩存鍵
  4. 當你的投票代碼運行下一次會收到更新的數據,然後可以在顯示值的網頁。

這是一個非常基礎的(和低效的)設置,但它很簡單,應該讓你開始。

0

我們正在努力解決這個問題,並最終使用NGINX和PUSH模塊。

它允許服務器(NGINX)的Post消息被推送到瀏覽器上顯示的網頁。

在我們的設置中,控制器將一個包含JSON數據的POST發送到運行NGINX的小型Linux主板。 NGINX然後將其發送給任何用戶。該網頁包含幾行js代碼以訂閱訂閱源。當JSON到達頁面時,它會觸發js接收代碼,並且我們更新網頁中顯示的字段。該設置非常靈敏,沒有測量延遲,似乎在60ms內。