1、開發(fā)環(huán)境配置

????? Arduino IDE，文件->首選項(xiàng)->附加開發(fā)板管理器網(wǎng)址:https://www.arduino.cn/package_esp8266com_index.json

???? 然后工具->開發(fā)板->開發(fā)板管理器->搜索esp8266->安裝

??? 安裝完記得重啟，重啟后進(jìn)入軟件，查看是否安裝成功

?2、安裝所需工具以及庫

所需工具:

ESP8266FS（在閃存緩存文件)

下載完后解壓放到 你的arduino安裝文件目錄/tools 文件夾中，重啟即可

所需庫:

ESPAsyncWebServer

（本來是用ESP8266WebServer的，然后發(fā)現(xiàn)是同步TCP，考慮到網(wǎng)頁聊天室請求多了會阻塞，那么就不能用這個(gè)了）

ESPAsyncTCP (異步TCP，用來給上面的庫提供支持)

DNSServer

可以在庫管理器里面找找有沒有，實(shí)在不行就在git下載zip后，點(diǎn)開項(xiàng)目->加載庫->添加.zip庫就安裝好了

我的arduino ide反反復(fù)復(fù)安裝了幾次，然后出現(xiàn)一坨玩意兒

雖然說找不到，但是能編譯（撓頭），反正能跑就成

3、看看板子好使不

應(yīng)該都是mirco usb，先接上去看看能不能識別出來，端口有就沒問題了

然后開發(fā)板選擇可以問問賣家，不過我板子上面大大的lolin，選generic能燒進(jìn)去也能跑，樂

?重點(diǎn)來了，隨便寫點(diǎn)串口輸出的代碼，然后燒錄進(jìn)去，斷電情況下按住flash后上電上傳，上電情況下先按rst重啟之后馬上按flash上傳

void setup() {Serial.begin(115200); }void loop() {delay(200);Serial.println("hello"); }

輸出是這樣的

?就說明數(shù)據(jù)線和串口沒問題，因?yàn)橹拔矣袟l數(shù)據(jù)線看串口要么是亂碼，要么串口毫無征兆斷連。一度以為板子沒救了，結(jié)果換了根線好了

4、寫代碼

思路是這樣，別人一連上我的wifi就跳轉(zhuǎn)到聊天室頁面（AP模式），那么就需要設(shè)置dns，讓他無論怎么解析都會指向我的聊天室網(wǎng)址

先導(dǎo)頭文件

#include <ESP8266WiFi.h> #include <ESPAsyncWebServer.h> #include <DNSServer.h> DNSServer dnsServer; IPAddress apIP(192,168,4,1); const byte DNS_PORT = 53; void initDNS(void){if(dnsServer.start(DNS_PORT,"*",apIP)){Serial.println("success");}else{Serial.println("failed");} } void loop(){ //監(jiān)聽dnsServer.processNextRequest(); }

因?yàn)?266默認(rèn)192.168.4.1為ip，想改其他的也可以自己設(shè)置

如果想設(shè)置成ST模式可以看看mdns庫，可以通過域名訪問目標(biāo)ip

然后是ESPAsyncWebServer庫的使用（esp8266webserver庫需要在loop加一個(gè)監(jiān)聽，但是這個(gè)不用）

const char *ssid = "網(wǎng)頁聊天室"; const char *password = "";AsyncWebServer server(80); void setup(){ //串口波特率初始化Serial.begin(115200); //設(shè)置AP模式WiFi.softAP(ssid,password);//將handleRoot函數(shù)與根目錄綁定server.on("/", HTTP_GET, handleRoot); server.onNotFound(handleRoot); //掛載SPIFFS文件系統(tǒng)if(!SPIFFS.begin()){Serial.println("SPIFFS Error");return;}initDNS();Serial.println("Web server started"); }

打開工程文件夾，創(chuàng)建一個(gè)data目錄

?data里面塞一個(gè)html，這個(gè)html可以塞圖片，只不過需要先send html再send圖片，也可以塞.css，jqery包，.js之類雜七雜八的，總之把data當(dāng)根目錄就成

用工具下的data upload就可以把data文件傳到flash里面

用send回調(diào)函數(shù)發(fā)送spiffs的文件，這個(gè)processor函數(shù)可以處理文件內(nèi)的數(shù)據(jù)，有點(diǎn)流批，但是我沒用上，具體可以看github庫作者怎么介紹

String processor(const String& var){return String(); } void handleRoot(AsyncWebServerRequest *request) {//request->send(SPIFFS, "/圖片目錄", "image/jpg", false);request->send(SPIFFS,"/test_1.html",String(),false,processor); }

簡陋無比的頁面，用ajax更新message那部分網(wǎng)頁

網(wǎng)頁js部分關(guān)鍵函數(shù)就這樣,因?yàn)榫桶l(fā)送一段字符串，所以我直接放在鏈接里用get請求(當(dāng)然也可以用post，相應(yīng)的服務(wù)端的接收方法也得改)，數(shù)據(jù)多的可以放在.send()里，具體可以看看xmlhttprequest咋用

//發(fā)送刷新請求并接收function fresh(){xmlhttp.onreadystatechange = function(){if(xmlhttp.readyState == 4&& xmlhttp.status == 200){if(tmp==xmlhttp.responseText||text==xmlhttp.responseText){}else{tmp = xmlhttp.responseText;addmessage(xmlhttp.responseText);}}};xmlhttp.open("GET", "fresh", true);xmlhttp.send();} //在div1塊下創(chuàng)建名為p的節(jié)點(diǎn)function addmessage(inside){var para = document.createElement("p");var node = document.createTextNode(inside);para.appendChild(node);var element = document.getElementById("div1");element.appendChild(para);} //發(fā)送信息function sendmessage(){text = document.getElementById("message").value;document.getElementById("message").value = ""; xmlhttp.onreadystatechange = function(){if(xmlhttp.readyState == 4&& xmlhttp.status == 200){addmessage(xmlhttp.responseText);}};xmlhttp.open("GET", "addmessage?text="+text, true);xmlhttp.send();}

服務(wù)器通過request的getparam獲取參數(shù)后的數(shù)據(jù)，比如/fresh?text=哈嘍&id=1

要獲取text就是request->getParam(0)->value();

要獲取id就是request->getParam(1)->value();

數(shù)字記得用atoi()轉(zhuǎn)型就成。

點(diǎn)擊send就會啟用addmessage函數(shù)，fresh就是刷新最新一條，雖然服務(wù)器緩存十條，但是客戶端沒寫更新十條，因?yàn)槲野l(fā)現(xiàn)要搞json拼合字符串然后用js刷新啥的，好麻煩（開擺）

void addmessage(AsyncWebServerRequest *request){Serial.println("adding");if(request->params()){Serial.println("in first");if(count<10){Serial.println("in second");context[count]=request->getParam(0)->value().c_str();request->send(200,"text/plain",context[count]);tmp = context[count];count++;}else{Serial.println("in third");for(int i = 9;i>=0;i--){delay(200);context[i] = context[i-1];if(i==0){context[i] = request->getParam(0)->value().c_str();request->send(200,"text/plain",context[i]);tmp = context[i];}}}} } void fresh(AsyncWebServerRequest *request){request->send(200,"text/plain",tmp);}

?arduino ide 的setup里面加兩句

server.on("/fresh",HTTP_GET,fresh);server.on("/addmessage",HTTP_GET,addmessage);

成品，電腦與爪機(jī)之間的通訊

ardunio和網(wǎng)頁源碼在這

CSDN的下載，需要積分

最后祝大家國慶快樂！

總結(jié)

以上是生活随笔為你收集整理的【萌新教学】ESP8266项目初试网页聊天室(附源码)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。