1、開發環境配置

????? Arduino IDE，文件->首選項->附加開發板管理器網址:https://www.arduino.cn/package_esp8266com_index.json

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

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

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

所需工具:

ESP8266FS（在閃存緩存文件)

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

所需庫:

ESPAsyncWebServer

（本來是用ESP8266WebServer的，然后發現是同步TCP，考慮到網頁聊天室請求多了會阻塞，那么就不能用這個了）

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

DNSServer

可以在庫管理器里面找找有沒有，實在不行就在git下載zip后，點開項目->加載庫->添加.zip庫就安裝好了

我的arduino ide反反復復安裝了幾次，然后出現一坨玩意兒

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

3、看看板子好使不

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

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

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

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

輸出是這樣的

?就說明數據線和串口沒問題，因為之前我有條數據線看串口要么是亂碼，要么串口毫無征兆斷連。一度以為板子沒救了，結果換了根線好了

4、寫代碼

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

先導頭文件

#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(){ //監聽dnsServer.processNextRequest(); }

因為8266默認192.168.4.1為ip，想改其他的也可以自己設置

如果想設置成ST模式可以看看mdns庫，可以通過域名訪問目標ip

然后是ESPAsyncWebServer庫的使用（esp8266webserver庫需要在loop加一個監聽，但是這個不用）

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

打開工程文件夾，創建一個data目錄

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

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

用send回調函數發送spiffs的文件，這個processor函數可以處理文件內的數據，有點流批，但是我沒用上，具體可以看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那部分網頁

網頁js部分關鍵函數就這樣,因為就發送一段字符串，所以我直接放在鏈接里用get請求(當然也可以用post，相應的服務端的接收方法也得改)，數據多的可以放在.send()里，具體可以看看xmlhttprequest咋用

//發送刷新請求并接收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塊下創建名為p的節點function addmessage(inside){var para = document.createElement("p");var node = document.createTextNode(inside);para.appendChild(node);var element = document.getElementById("div1");element.appendChild(para);} //發送信息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();}

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

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

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

數字記得用atoi()轉型就成。

點擊send就會啟用addmessage函數，fresh就是刷新最新一條，雖然服務器緩存十條，但是客戶端沒寫更新十條，因為我發現要搞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);

成品，電腦與爪機之間的通訊

ardunio和網頁源碼在這

CSDN的下載，需要積分

最后祝大家國慶快樂！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。