代码拉取完成，页面将自动刷新
官方QQ群：213587787（热烈欢迎小白，学生，大佬，各位对电子行业感兴趣的伙伴们
官方QQ群：213587787（热烈欢迎小白，学生，大佬，各位对电子行业感兴趣的伙伴们
官方QQ群：213587787（热烈欢迎小白，学生，大佬，各位对电子行业感兴趣的伙伴们
产品视频https://www.bilibili.com/video/BV18P4y167wo/
产品视频https://www.bilibili.com/video/BV18P4y167wo/
产品视频https://www.bilibili.com/video/BV18P4y167wo/
本产品基于esp8266开发板模块，充放电模块，锂电池，快递纸板，pcv板。一共花费大概在30-40，适合刚入门的小白
网络聊天室可以直接烧录进开发板
下载【网络聊天室1.2.bin】然后直接烧录进开发板
不会直接留言，一般秒回
烧录软件和bin文件都在蓝奏云
（1.2为最初版本，数字越大版本越高，内容越丰富！）
烧录演示视频：https://lusun.com/v/8lyJwlEdkO0
蓝奏云地址：https://wwmg.lanzouy.com/b01p6obeh
密码:8266
Arduino【必须要1.8.x的版本，2.0以上不可用】（单片机编程软件） （百度一下怎么下载，需要教程到时候留言吧，我再做一个教程）软件是免费的0💴
Macromedia Dreamweaver 8（html网页编程软件）免费的0💴
正面1
正面2
反面
上面
下面
1. 首先安装好ESP8266FS（esp8266的闪存系统)
先找到项目文件夹的位置【示意图如下👇】
把tools的压缩包下载，解压到项目文件夹，下载地址【示意图如下👇】
打开arduino，如果显示esp8266缓存系统就表示成功了【示意图如下👇】
2. 准备库文件
2.ESPAsyncTCP (异步TCP，用来给ESPAsyncWebServer库提供支持)
蓝奏云下载下载地址【示意图如下👇】
3.DNSServer直接在arduino的库管理器里面下载DNSServer（全部都下载一遍吧，因为我也忘了是哪个了）【示意图如下👇】
3. 代码部分（arduino）
#include <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
#include <DNSServer.h>
int led = 2;
DNSServer dnsServer;
IPAddress apIP(192,168,4,1);
const byte DNS_PORT = 53;
const char *ssid = "网页聊天室";
const char *password = "";
String context[10];
String tmp;
int count = 0;
AsyncWebServer server(80);
void initDNS(void){
if(dnsServer.start(DNS_PORT,"*",apIP)){
Serial.println("dns success");
}
else{
Serial.println("failed");
}
}
String processor(const String& var){
return String();
}
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();
Serial.println(context[count]);
Serial.println(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]);
Serial.println(context[i]);
tmp = context[i];
}
}
}
}else{
Serial.println("NULL message");
}
}
void fresh(AsyncWebServerRequest *request){
/***
int i =atoi( request->getParam(0)->value().c_str());
Serial.println(i);
Serial.println(context[i]);
***/
request->send(200,"text/plain",tmp);
}
void handleRoot(AsyncWebServerRequest *request) //回调函数
{
Serial.println("Root opened");
request->send(SPIFFS,"/test_1.html",String(),false,processor);
}
void setup()
{
Serial.begin(115200);
Serial.println();
analogWriteFreq(1000); // 频率设置为1kHz，即周期为1ms
analogWriteRange(1000); // 范围设置为1000，即占空比步长为1us
analogWrite(2, 800); // GPIO2 - D4 - LED
WiFi.softAP(ssid,password);
Serial.print("IP Address:");
Serial.println(WiFi.localIP());
server.on("/", HTTP_GET, handleRoot);
server.onNotFound(handleRoot);
server.on("/fresh",HTTP_GET,fresh);
server.on("/addmessage",HTTP_GET,addmessage);
server.begin(); //启动服务器
if(!SPIFFS.begin()){
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
initDNS();
Serial.println("Web server started");
}
void loop(){
dnsServer.processNextRequest();
}
写完之后保存一下，直接保存在桌面， 然后再创建一个data文件夹 ，用来存放资源文件
下面的是html网页文件 【示意代码如下👇】
（html不太熟悉，写的比较乱，反正能用就行，欢迎大佬来修改一下）
<!DOCTYPE html>
<html lang="zh-CH">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style type="text/css">
<!--
.STYLE1 {
color: #FF0000;
font-family: "宋体";
}
.new {
font-family: "新宋体";
font-style: normal;
background-color: #FFFF33;
}
-->
</style>
<body onLoad="AutoFresh()">
<style>
button{
width: 50px;
height: 50px;
}
p{
margin: 30px;
}
h1{
margin: 10px;
}
h{
margin: 30px;
}
div{
height: auto;
width: 400px;
border-width: 2px;
border-style: solid;
border-color: black;
}
input{
height: 50px;
width: 300px;
border-width: 2px;
border-style: outset;
border-color: black;
}
</style>
<script>
var text
var tmp;
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
i = 0;
function AutoFresh() {
i++;
document.getElementById("test").innerHTML = "刷新"+i+"次";
setTimeout("AutoFresh()", 500);
fresh();
}
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();
}
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();
}
</script>
<!--
<input id="name"></input>
-->
<input id="message"></input>
<button onClick="sendmessage()">
发送</button>
<div id="div1">
<h1 id="test1">信息中心</h1>
<h id="test">hello</h>
</div>
<form name="form1" method="post" action="">
<label>
<label> </label>
<div align="justify" class="new"><br>
<textarea name="textarea" cols="" rows="5" readonly="readonly">作者：356673632
版本：1.0
</textarea>
</div>
<h3 class="fw-bolder mb-1" style="color: #e6a0ef;">官方公告</h3>
<div align=center><b>恶魔工作室</b></div><table cellspacing=0 cellpadding=1 width="50%" bgcolor=#ecf1fb border=0>
<center>
<table border>
<tr><th bgcolor=ffaa00><marquee direction=up height=100 width=400 id=m onmouseout=m.start() onMouseOver=m.stop() scrollamount=2 align="center">
<font size=3>
<p><a href="地址" target="_blank">内容内容内容内容</a>
<p>○内容内容内容内容内容内容内容</p>
<p>○内容内容内容内容内容内容内容</p>
<p>○内容内容内容内容内容内容内容</p>
<p>○内容内容内容内容内容内容内容内容内容内容内容</p>
<p>○内容内容内容内容内容内容</p>
<p>○内容内容内容内容内容○</p><p>
<a href="地址" target="_blank">内容</a></p>
</font></marquee></th>
</table>
<center>
<a href="http://">联系网址（还没写捏）</a>
</div>
</label>
</form>
<p> </p>
<p> </p>
<p> </p>
</body>
然后把html文件保存在data文件夹里面，html文件名为：test_1.html
【1】开发板连接上电脑
【2】电脑识别到开发板（ch340）
【3】上传arduino代码
** 
【4】把html上传到esp8266的缓存系统
给开发板做一个开关（我这里为了省钱直接将杜邦线一分为二了，建议有钱的话可以搞一个拨动开关）
使用说明 (暂无)
HTML：恶魔（356673632）
Arduino：恶魔（356673632）
立创EDA：恶魔（356673632）
Gitee：恶魔（356673632）
哔哩哔哩：恶魔（356673632）
【你没看错，都是一个人在奋斗 
】
特技（暂无）
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。