javascript - 如何将 Arduino IDE 代码连接到 socket.io 服务器？

Question

谁能告诉我如何将 Arduino IDE 代码连接到 socket.io，我通过服务器制作了一个继电器控制器，这是我的 Arduino 代码（可以吗？）：

#include <ESP8266WiFi.h> //library ESP8266wifi yang telah diimportkan

#define ON LOW
#define OFF HIGH

const char* ssid     = "Testtt";
const char* password = "12345678";
 
const int relay1 = 3;
const int relay2 = 1;
const int relay3 = 16;
const int relay4 = 5;
const int relay5 = 4;
const int relay6 = 14;
const int relay7 = 12;
const int relay8 = 13;

int state1 = OFF; 
int state2 = OFF; 
int state3 = OFF; 
int state4 = OFF;
int state5 = OFF; 
int state6 = OFF; 
int state7 = OFF; 
int state8 = OFF;


//port 80 untuk http
WiFiServer server(80); 

void setup(){
  Serial.begin(115200); 
  delay(10);

  pinMode(relay1,OUTPUT);
  pinMode(relay2,OUTPUT);
  pinMode(relay3,OUTPUT);
  pinMode(relay4,OUTPUT);
  pinMode(relay5,OUTPUT);
  pinMode(relay6,OUTPUT);
  pinMode(relay7,OUTPUT);
  pinMode(relay8,OUTPUT);
  
  digitalWrite(relay1, ON);
  digitalWrite(relay2, ON);
  digitalWrite(relay3, ON);
  digitalWrite(relay4, ON);
  digitalWrite(relay5, ON);
  digitalWrite(relay6, ON);
  digitalWrite(relay7, ON);
  digitalWrite(relay8, ON);
 
  
  Serial.print("Connect to Wifi.... ");
  Serial.println(ssid);
 
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) 
  {delay(300);
  Serial.print(".");}
  Serial.println("");
  Serial.println("Connected");
 
  server.begin(); 
  Serial.println("Access Server");
 
  
  Serial.print("Alamat ip yang digunakan untuk pengaksesan: ");
  //contoh format ip address : http://192.168.1.1/
  Serial.print("http://");
  Serial.print (WiFi.localIP());
  Serial.println("/"); 

}
 
void loop() {
  WiFiClient client = server.available(); 
  if (!client) {
    return;
  }
 
  //menunggu client, data dikirim
  Serial.println("New Client");
  //jika client tidak available
  while(!client.available()) {delay(5);}
  String request = client.readStringUntil('\r');
  Serial.print(request);client.flush();
  
  //penulisan data pada browser dengan alamat diatas
  client.println("HTTP/1.1 200 OK");client.println("Content-Type: text/html");
  client.println("");
 
  //Relay 1
  client.print("Relay 1 - State: ");
  // Control relay 1
  if(request.indexOf("/relay1=ON")!= -1)
  {digitalWrite(relay1, ON);
  state1 = ON;}

  if(request.indexOf("/relay1=OFF")!= -1)
  {digitalWrite(relay1, OFF);
  state1 = OFF;}

  
  //Relay 2
   client.print("Relay 2 - State: ");
  // Control relay 2
  if (request.indexOf("/relay2=ON") != -1)  {
    digitalWrite(relay2, ON);
    state2 = ON;
    }
  if (request.indexOf("/relay2=OFF") != -1)  {
    digitalWrite(relay2, OFF);
    state2 = OFF;
    }
      
   //Relay 3
   client.print("Relay 3 - State: ");
  // Control relay 3
  if (request.indexOf("/relay3=ON") != -1)  {
    digitalWrite(relay3, ON);
    state3 = ON;
    }
  if (request.indexOf("/relay3=OFF") != -1)  {
    digitalWrite(relay3, OFF);
    state3 = OFF;
    }
    
     //Relay 4
    client.print("Relay 4 - State: ");
  // Control relay 4
  if (request.indexOf("/relay4=ON") != -1)  {
    digitalWrite(relay4, ON);
    state4 = ON;
    } 
  if (request.indexOf("/relay4=OFF") != -1)  {
    digitalWrite(relay4, OFF);
    state4 = OFF;
    }

    //Relay 5
    client.print("Relay 5 - State: ");
  // Control relay 5
  if (request.indexOf("/relay5=ON") != -1)  {
    digitalWrite(relay5, ON);
    state5 = ON;
    } 
  if (request.indexOf("/relay5=OFF") != -1)  {
    digitalWrite(relay5, OFF);
    state5 = OFF;
    }

    //Relay 6
    client.print("Relay 6 - State: ");
  // Control relay 6
  if (request.indexOf("/relay6=ON") != -1)  {
    digitalWrite(relay6, ON);
    state6 = ON;
    } 
  if (request.indexOf("/relay6=OFF") != -1)  {
    digitalWrite(relay6, OFF);
    state6 = OFF;
    }

    //Relay 7
    client.print("Relay 7 - State: ");
  // Control relay 7
  if (request.indexOf("/relay7=ON") != -1)  {
    digitalWrite(relay7, ON);
    state7 = ON;
    } 
  if (request.indexOf("/relay7=OFF") != -1)  {
    digitalWrite(relay7, OFF);
    state7 = OFF;
    }

    //Relay 8
    client.print("Relay 8 - State: ");
  // Control relay 8
  if (request.indexOf("/relay8=ON") != -1)  {
    digitalWrite(relay8, ON);
    state8 = ON;
    } 
  if (request.indexOf("/relay8=OFF") != -1)  {
    digitalWrite(relay8, OFF);
    state8 = OFF;
    }
     
  delay(5);
  Serial.println("Client disconnected");
  Serial.println("");
 
}

这段代码是否可以（对于服务器，我不知道如何将其从聊天应用程序服务器更改为用于控制中继的按钮服务器，对于 html，我不知道代码是否正确）或执行我需要改变一些吗？请给我解决方案，谢谢...

服务器：

const express = require('express');
const app = express();
const http = require ('http');
const server = http.createServer(app);
const {Server} = require("socket.io");
const io = new Server(server);
const port = 3000;


app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
    res.sendFile('index.html', { root: __dirname });

});

io.emit('some event', {someProperty: 'some value', otherProperty: 'other value'});

io.on('connection', (socket) => {
  socket.broadcast.emit('hi');
});

io.on('connection', (socket) => {
    console.log('a user has connected');
    socket.on('disconnected', () => {
        console.log('user has disconnected');
    });
});

io.on('connection', (socket) => {
    socket.on('chat message', (msg) => {
        console.log('message: ' + msg);
    });
});

server.listen(port, () => {
    console.log('listening on port: ' + port);
});

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
      .RelayOn  { background: red;}
      .Relayoff { background:#fff;}
     </style>

     <!-- define the toggle function -->
     <script language="javascript">
        function toggleState(item){
           if(item.className == "RelayOn") {
              item.className="RelayOff";
           } else {
              item.className="RelayOn";
           }
        }
     </script>
</head>
<body>
    <br>
    <input type="button" id="btn" value="button-1" 
        class="off" onclick="toggleState(this)" /></br>
        <p>
        <input type="button" id="btn" value="button-2" 
        class="off" onclick="toggleState(this)" /></p>
        <p>
        <input type="button" id="btn" value="button-3" 
        class="off" onclick="toggleState(this)" /></p>
        <p>
        <input type="button" id="btn" value="button-4" 
        class="off" onclick="toggleState(this)" /></p>
        <p>
        <input type="button" id="btn" value="button-5" 
        class="off" onclick="toggleState(this)" /></p>
        <p>
        <input type="button" id="btn" value="button-6" 
        class="off" onclick="toggleState(this)" /></p>
        <p>
        <input type="button" id="btn" value="button-7" 
        class="off" onclick="toggleState(this)" /></p>
        <p>
        <input type="button" id="btn" value="button-8" 
        class="off" onclick="toggleState(this)" /></p>
        
</body>
</html>

条件是当按钮（当前状态为关闭）点击时，Relay-1 开启，再次点击时 Relay-1 关闭

标签： javascripthtmlnode.jssocket.ioarduino-ide