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项目初试网页聊天室(附源码)相关推荐

聊聊语音聊天室app源码实时音视频中的技术难点：回声消除+噪声消除
聊聊语音聊天室app源码实时音视频中的技术难点:回声消除+噪声消除在聊聊语音聊天室app源码各个实时音视频互动场景中,回声和噪声对于影响用户体验而言都是很大的问题.音视频正在发展成为互联网线上沟通的 ...
聊天室软件源码前端性能优化，缓存角度的相关分析
在我们考虑提高聊天室软件源码页面渲染速度之前先来思考一个问题,一个页面的速度由什么决定?显而易见,这里主要包含两方面的影响因素. 1.资源传输时间(tcp链接时间和响应时间) 2.dom渲染时间这两 ...
PHP匿名在线聊天室系统源码自适应PC+WAP端
介绍: PHP匿名在线聊天室系统源码自适应PC+WAP端可发语音.图片修改数据库config\settings.php可拿去搭建专门跟客户聊天的网站网盘下载地址: http://kekewl. ...
PHP匿名在线聊天室系统源码
PHP匿名在线聊天室系统源码,自适应PC+WAP端,可发语音.图片.带有三套主题模板,完美可用. [完整源码链接] PHP匿名在线聊天室系统源码.zip-PHP文档类资源-CSDN文库
Java毕设项目在线答题系统计算机（附源码+系统+数据库+LW）
Java毕设项目在线答题系统计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ecli ...
分享66个PHP聊天室类源码，总有一款适合您
分享66个PHP聊天室类源码,总有一款适合您 66个PHP聊天室类源码下载链接:https://pan.baidu.com/s/1_Fbbc3WMVWN7jjgTRaCnXw?pwd=h75j 提取码 ...
Anlin-chat多功能聊天室php源码下载，极速安装
一.名称:Anlin-chat多功能聊天室php源码二.简介(作用): 可修改成网站客服系校园站统可盈利,利用打赏.VIP.内容付费.广告盈利.资源付费等方法盈利. 三.下载地址: 聊天室zi ...
Java毕设项目便利店库存管理计算机（附源码+系统+数据库+LW）
Java毕设项目便利店库存管理计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ecl ...
Java毕设项目信贷管理系统计算机（附源码+系统+数据库+LW）
Java毕设项目信贷管理系统计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ecli ...
Java毕设项目电费管理系统计算机（附源码+系统+数据库+LW）
Java毕设项目电费管理系统计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ecli ...

【萌新教学】ESP8266项目初试网页聊天室(附源码)

1、开发环境配置

2、安装所需工具以及库

3、看看板子好使不

4、写代码

【萌新教学】ESP8266项目初试网页聊天室(附源码)相关推荐

最新文章

热门文章