第1步：為什么選擇WebSocket？

網(wǎng)上有大量的WiFi遠(yuǎn)程機(jī)器人。他們中的大多數(shù)都有一個(gè)簡(jiǎn)單的Web界面，可以通過幾個(gè)箭頭按鈕控制機(jī)器人。它足以證明電路工作原理。然而，響應(yīng)時(shí)間太慢，甚至將它與幾塊錢的RC車相比：（

每個(gè)遠(yuǎn)程控制命令只能是1或2個(gè)字節(jié)，但是單個(gè)HTTP請(qǐng)求會(huì)引入數(shù)百個(gè)字節(jié)的開銷并需要等待建立每次都有一個(gè)新的連接.WebSocket可以消除這種開銷并獲得超過10倍的性能提升。

你可能不熟悉Web Socket，但實(shí)現(xiàn)起來非常簡(jiǎn)單。這個(gè)Arduino源代碼文件只有5個(gè)KB大小，已包含客戶端HTML + Javascript和服務(wù)器端HTTP + Web Socket服務(wù)器。這是學(xué)習(xí)Web Socket的一個(gè)很好的起點(diǎn)。

第2步：準(zhǔn)備

ESP8266開發(fā)板

任何ESP8266開發(fā)板都應(yīng)該沒問題，這次我使用的是NodeMCU。

電機(jī)驅(qū)動(dòng)板

任何2個(gè)電機(jī)驅(qū)動(dòng)板都應(yīng)該沒問題，這次我使用的是L9110S。

2WD機(jī)器人底盤

任何2WD機(jī)器人底盤都應(yīng)該沒問題，我手頭沒人，所以我只是用一些LEGO制作一個(gè)。

電池

ESP8266工作電壓為3.3V，大多數(shù)開發(fā)板都有調(diào)節(jié)器來制作它。在大多數(shù)情況下，它可以在5V - 12V的范圍內(nèi)供電。我這次使用帶電池座的8.4 V充電電池。

步驟3：軟件

Arduino IDE

下載并安裝Arduino IDE

ESP8266支持

按照ESP8266官方步驟添加ESP8266支持

第4步：HTML＆amp; Javascript

Web Socket遠(yuǎn)程可以分為兩部分，即客戶端和服務(wù)器端。客戶端是移動(dòng)電話的簡(jiǎn)單網(wǎng)頁。主要區(qū)域是畫布，一旦您觸摸并滑動(dòng)它，x和y坐標(biāo)值將通過已建立的Web Socket連接傳遞到服務(wù)器端。下面是完整的網(wǎng)頁源代碼，它在Arduino源代碼中縮小為單行字符串值：

ESP TOUCH REMOTE

步驟5：引腳連接

這是連接摘要：

ESP8266 Dev Board -》 Motor Driver Board

Vin -》 Vcc -》 Battery +ve

GND -》 GND -》 Battery -ve

GPIO4 （D2） -》 A-IA

GPIO0 （D3） -》 A-IB

Motor A -》 Left motor

GPIO14 （D5） -》 B-IA

GPIO12 （D6） -》 B-IB

Motor B -》 Right motor

第6步：上傳程序

在Arduino IDE中打開ESPWebSocketRemote.ino

連接您的ESP8266開發(fā)板

在工具菜單中選擇您的ESP8266開發(fā)板類型和端口

按上傳

步驟7：首次設(shè)置步驟

大多數(shù)WiFi機(jī)器人要求您連接來自你的手機(jī)，但我不認(rèn)為這是正確的方法。因?yàn)檫@意味著任何人的手機(jī)都可以連接到您自己的機(jī)器人。而且每次你需要等待你的機(jī)器人WiFi AP啟動(dòng)然后使用你的移動(dòng)搜索WiFi并連接它，它有點(diǎn)耗費(fèi)時(shí)間。

我認(rèn)為正確的方法應(yīng)該是機(jī)器人自動(dòng)啟動(dòng)時(shí)連接到您的移動(dòng)熱點(diǎn)。

但我仍然不想在源代碼中存儲(chǔ)我的熱點(diǎn)憑證，WiFiManager可以幫我解決這個(gè)問題。

WiFiManager會(huì)自動(dòng)嘗試連接最后連接的WiFi。如果失敗，請(qǐng)啟動(dòng)AP和強(qiáng)制網(wǎng)絡(luò)門戶等待您輸入WiFi詳細(xì)信息，然后重新啟動(dòng)。

因此，首次設(shè)置步驟為：

打開ESP8266 Robot

連接到“espweremote”AP

填寫您的手機(jī)熱點(diǎn)詳細(xì)信息

步驟8：連接步驟

打開手機(jī)熱點(diǎn)

打開ESP8266機(jī)器人

等待ESP8266機(jī)器人連接到手機(jī)hotspot

觸摸并在畫布上滑動(dòng)（白色方塊）以控制機(jī)器人

第9步：快樂遠(yuǎn)程！

是時(shí)候玩你的低圈時(shí)間遠(yuǎn)程機(jī)器人了！

第10步：下一步是什么？

ESPWebSocketRemote是一個(gè)非常簡(jiǎn)單的例子，你可以做更多的事情。

例如：

使用PWM在不同坐標(biāo)上滑動(dòng)時(shí)更改兩種電機(jī)速度

添加更多控制，例如機(jī)器人燈t，武裝甚至發(fā)射火箭：》

裝飾HTML布局

建造一個(gè)更大的機(jī)器人

body{padding:024px024px;background-color:#ccc;}
#main{margin:0auto0auto;}