|
1. 前言 为了用ESP8266和手机或者网页等进行通讯控制，那么就必须准守网络通讯协议。常用的协议就是基于TCP/IP上的Http协议。但目前Websocket协议使用更加方便。因为其使用方便，功能更强大。其比Http的主要优点是：协议的字头简单，不像Http字头很多。另外，客户端和服务器端不需要不停的进行问答模式，这种轮询方式消耗资源很大。Websocket协议的可以使服务器和客户端实现平等关系，客户端可以向服务器端发送请求，服务器也可以向客户端推送信息，这样客户端就不需要不行的发送请求，服务器才响应，这样资源可以节约。下图是Websocket进行通讯的模式。  2. 基本介绍 2.1 Ardunio使用Http协议 这个大多使用Arduino Core For ESP8266内核，Ardunio IDE内的管理地址为：http://arduino.esp8266.com/stable/package_esp8266com_index.json Gihub下载地址： https://github.com/esp8266/Arduino  这个库很强大，http的例程，wifi的例程，基本控制的例程都有，当然也提供了所需的各种API。 下载开发板内核后自动安装成为ardunio内建库，如下图，注意下载速度较慢时可以翻墙或者直接在github下载。  各种例程，可以快速上手。  2.2 Ardunio使用Websoket协议通讯 Websoket目前已经有多个库的支持，用的较多的是github下载地址： https://github.com/Links2004/arduinoWebSockets  也提供了不少响应的例程：  3. Websocket例程使用介绍 3.1打开WebsocketSever_LEDcontrol例程： 硬件模块任意，只要带ESP8266芯片，这个例程实现的是在网页端，用Websocke的方式进行数据通讯，控制3色LED颜色变化。 代码如下：
/*
* WebSocketServer_LEDcontrol.ino
*
* Created on: 26.11.2015
*
*/
#include
#include
#include
#include
#include
#include
#include
#define LED_RED 15
#define LED_GREEN 12
#define LED_BLUE 13
#define USE_SERIAL Serial
ESP8266WiFiMulti WiFiMulti;
ESP8266WebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81);
void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
switch(type) {
case WStype_DISCONNECTED:
Serial.printf("[%u] Disconnected!\n", num);
break;
case WStype_CONNECTED: {
IPAddress ip = webSocket.remoteIP(num);
Serial.printf("[%u] Connected from %d.%d.%d.%d url: %s\n", num, ip[0], ip[1], ip[2], ip[3], payload);
// send message to client
webSocket.sendTXT(num, "Connected");
}
break;
case WStype_TEXT:
Serial.printf("[%u] get Text: %s\n", num, payload);
if(payload[0] == '#') {
// we get RGB data
// decode rgb data
uint32_t rgb = (uint32_t) strtol((const char *) &payload[1], NULL, 16);
analogWrite(LED_RED, ((rgb >> 16) & 0xFF));
analogWrite(LED_GREEN, ((rgb >> 8) & 0xFF));
analogWrite(LED_BLUE, ((rgb >> 0) & 0xFF));
}
break;
}
}
void setup() {
//USE_SERIAL.begin(921600);
Serial.begin(115200);
//USE_SERIAL.setDebugOutput(true);
Serial.println();
Serial.println();
Serial.println();
for(uint8_t t = 4; t > 0; t--) {
Serial.printf("[SETUP] BOOT WAIT %d...\n", t);
Serial.flush();
delay(1000);
}
pinMode(LED_RED, OUTPUT);
pinMode(LED_GREEN, OUTPUT);
pinMode(LED_BLUE, OUTPUT);
digitalWrite(LED_RED, 1);
digitalWrite(LED_GREEN, 1);
digitalWrite(LED_BLUE, 1);
WiFiMulti.addAP("hello", "12345678"); //这里输入自己的wifi名称和密码
while(WiFiMulti.run() != WL_CONNECTED) {
delay(100);
}
Serial.println("Connected!连接成功");
// start webSocket server
webSocket.begin();
webSocket.onEvent(webSocketEvent);
if(MDNS.begin("esp8266")) {
Serial.println("MDNS responder started");
}
// handle index
server.on("/", []() {
// send index.html
// server.send(200,"text/plane","hello");
server.send(200, "text/html", "var connection = new WebSocket('ws://'+location.hostname+':81/', ['arduino']);connection.onopen = function () { connection.send('Connect ' + new Date()); }; connection.onerror = function (error) { console.log('WebSocket Error ', error);};connection.onmessage = function (e) { console.log('Server: ', e.data);};function sendRGB() { var r = parseInt(document.getElementById('r').value).toString(16); var g = parseInt(document.getElementById('g').value).toString(16); var b = parseInt(document.getElementById('b').value).toString(16); if(r.length < 2) { r = '0' + r; } if(g.length < 2) { g = '0' + g; } if(b.length < 2) { b = '0' + b; } var rgb = '#'+r+g+b; console.log('RGB: ' + rgb); connection.send(rgb); }LED Control:R: G: B: ");
});
server.begin();
// Add service to MDNS
MDNS.addService("http", "tcp", 80);
MDNS.addService("ws", "tcp", 81);
digitalWrite(LED_RED, 0);
digitalWrite(LED_GREEN, 0);
digitalWrite(LED_BLUE, 0);
}
void loop() {
webSocket.loop();
server.handleClient();
}
3.2 程序运行注意 （1）ESP8266是使用WIFI上网，因此需要用到wifi库 ; （2）连接WIFI要输入自己的wifi名称和密码 （3）注意上网使用的服务器地址，这里不需要按websocket的方式输入，前面增加WS://，因为程序内已经加好了头和尾。 WebSocket(‘ws://’+location.hostname+’:81/’,… （4）服务器的地址必须和客户端的地址在一个ip范围内 最简单的办法是都用手机做热点，连接到手机上。并且能够查看到和热点连接的服务器地址和客户端地址。如图为手机热点查看连接设备的情况。 
（5）当然也可以在程序中增加打印ip地址的语句 （6）在网页中输入服务器地址连接到服务器中，不需要输入WS：//  这个是程序中内嵌的web，移动滑动条可以调节颜色变化。 （7）网页的源码在安装库下，采用的JavaScript编写，如果需要，可以进行修改，其中服务器地址要注意。另外，网页代码要变成ardunio的语句，可以使用相关工具，可网上寻找。 （8）网页调整滑动条，串口输出变化如下：   硬件连接LED图：  （8）用手机APP连接，并发送数据 这里，手机登录地址和网页登录地址相同。
 
|