dark

esp8266 websocket javascript示例，使用arduino ide使用css樣式按鈕-NodeMcu

Total
0
Shares
0
0
0



使用ESP8266的Arduino IDE如何實現websocket協議。示例代碼即將推出。 。

11 comments

  6. //this is the esp32 version of the code. if you are using esp8266 change the libraries like it's shown in the video

    #include <WiFi.h>

    #include <WebSocketsServer.h>

    #include <WebServer.h>

    const char* ssid="";

    const char* password="";

    int LED=2;

    int websocketMillis=50;

    WebServer server(80);

    WebSocketsServer webSocket=WebSocketsServer(88);

    String webSite,JSONtxt;

    boolean LEDonoff=true;

    const char webSiteCont[] PROGMEM = R"=====(

    <!DOCTYPE HTML>

    <HTML>

    <META name="viewport" content="width=device-width, initial-scale=1">

    <SCRIPT>

    InitWebSocket()

    function InitWebSocket()

    {

    websock = new WebSocket("ws://"+window.location.hostname+":88/");

    websock.onmessage=function(evt)

    {

    JSONobj = JSON.parse(evt.data);

    document.getElementById('btn').innerHTML = JSONobj.LEDonoff;

    if(JSONobj.LEDonoff == 'ON')

    {

    document.getElementById('btn').style.background='#FFA200';

    document.getElementById('btn').style["boxShadow"]="0px 0px 0px 0px #FFA200";

    }else{

    document.getElementById('btn').style.background='#111111';

    document.getElementById('btn').style["boxShadow"]="0px 0px 0px 8px #111111";

    }

    }

    }

    function button(){

    btn = 'LEDonoff=ON';

    if(document.getElementById('btn').innerHTML === 'ON')

    {

    btn = 'LEDonoff=OFF';

    }

    websock.send(btn);

    }

    </SCRIPT>

    <style>

    #btn{

    display: inline-block;

    text-decoration:none;

    background: #8cd460;

    color: rgba(255,255,255, 0.80);

    font: 100px arial, sans-serif;

    font-weight: bold;

    line-height: 320px;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    margin:30%;

    margin-top:60px;

    text-align: center;

    vertical-align: middle;

    overflow: hidden;

    box-shadow: 0px 0px 0px 8px #8cd460;

    border: solid 2px rgba(255,255,255,0.47);

    transition: 0.4s;

    }

    </style>

    <BODY>

    <a href="#" id="btn" ONCLICK='button()'></a>

    </BODY>

    </HTML>

    )=====";

    void WebSite(){

    server.send(200,"text/html",webSiteCont);

    }

    void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t welength)

    {

    String payloadString = (const char *)payload;

    Serial.print("payloadString= ");

    Serial.println(payloadString);

    if(type == WStype_TEXT)

    {

    byte seperator=payloadString.indexOf('=');

    String var = payloadString.substring(0,seperator);

    Serial.print("var= ");

    Serial.println(var);

    String val = payloadString.substring(seperator+1);

    Serial.print(" ");

    if(var == "LEDonoff"){

    LEDonoff = false;

    if(val == "ON"){

    LEDonoff = true;

    }

    }

    }

    }

    void setup() {

    Serial.begin(115200);

    pinMode(LED,OUTPUT);

    WiFi.begin(ssid,password);

    while(WiFi.status() != WL_CONNECTED)

    {

    Serial.println(":");

    delay(500);

    }

    WiFi.mode(WIFI_STA);

    Serial.println("Start Esp");

    Serial.println(WiFi.localIP());

    server.on("/",WebSite);

    server.begin();

    webSocket.begin();

    webSocket.onEvent(webSocketEvent);

    }

    void loop() {

    webSocket.loop();

    server.handleClient();

    if(LEDonoff == true)

    {

    digitalWrite(LED,HIGH);

    }else{

    digitalWrite(LED,LOW);

    }

    String LEDswitch = "OFF";

    if(LEDonoff == true){

    LEDswitch = "ON";

    }

    JSONtxt ="{"LEDonoff":""+LEDswitch+""}";

    webSocket.broadcastTXT(JSONtxt);

    }

Comments are closed.