远程继电器模块实现(nodemcu D1 + 继电器)

小明IO2024-06-02 10:43

前言

接下来将实现一个远程继电器，实时远程控制和查询的开关状态。用 5v 直流电控制 220v 交流电。

硬件上： 使用 nodemcu D1 和 JQC-3FF-S-Z 继电器。

软件上： 使用 nodejs 作为服务端，和 html 作为客户端。

在开始之前在电脑中建立一个文件夹 /project

效果

远程继电器模块

材料准备

硬件

名称 数量
nodemcu D1 1
JQC-3FF-S-Z 继电器 1
杜邦线 若干
led(3.3v) 1
面包板 1

服务端依赖

/project/package.json

js 复制代码 
{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.20.2",
    "express": "^4.18.2",
    "socket.io": "^4.7.1"
  }
}

IDE

Arduino

vsCode

服务端实现

/project/index.js

js 复制代码 
const bodyParser = require("body-parser");
const express = require("express");
const path = require("path");
const app = express();
const http = require("http");
const { Server } = require("socket.io");
const server = http.createServer(app);

const port = 3005;

/**
 * 所有开关的状态记录
*/
const switchs = {
    // 台灯开关
    desklamp: "0",
};

app.use(bodyParser.json({ limit: "50mb" }));
// for parsing application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));
// 前端静态服务,包括文件和页面
app.use(express.static(path.join(__dirname,"./client")))

app.all("*",function (req,res,next) {
    res.set({
        "Content-Type": "text/plain",
        "Access-Control-Allow-Credentials": "true",
        "Access-Control-Allow-Headers": "X-Requested-With,Content-Type,token,authorization",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Origin": req.headers.origin,
        "Access-Control-Allow-Methods": "POST,GET",
        "Content-Type": "application/json",
    });
    next();
});

const io = new Server(server,{
    allowEIO3: true,
    credentials: true,
    cors: {},
}); 
io.on("connection",(socket) => {
    try {
        console.log("一个新的 scoket 连接"); 

        /**
         * 用户连接即推送信息
         */ 
        io.to(socket.id).emit("switchs",switchs);

        /**
         * 查询请求，返回所有开关状态
        */
        socket.on("query",function (data) {
            console.log(`[query]`, data ? data : "");
            io.to(socket.id).emit("switchs",switchs);
        });

        
        /**
         * 设置开关状态
         * { id: "desklamp", data: "0" | "1" }
        */
        socket.on("set",function (body) {
            const id = body.id;
            const status = body.data;
            if(!id) {
                console.log('没有传入id，更新失败！')
                return
            };
            switchs[id] = status;
            console.log(`[set]`, id, body.data); 
            
            // 更新完后广播
            io.emit("switchs",switchs);
        });

        // 发生错误时触发
        socket.on("error",function (err) {
            console.log("socket 错误：",err);
        });
    } catch (err) {
        console.log("socket 错误：",err);
        io.to(socket.id).emit("error",`系统异常：${err}`);
    }
});

server.listen(port,() => {
    console.log(`服务正在运行： http://localhost:${port}`);
});

代码分析

  1. 首先是使用 3005 端口启动了一个服务器.
  2. 将 ./client 设置为静态文件夹，该文件夹中将会放置客户端页面
  3. 使用 socket.io 插件实现一个 ws 服务。
  4. 监听 query 消息，用于返回当前开关状态
  5. 监听 set 消息，用于改变开关状态

代码中 switchs 写为对象形式是为了方便后期继续扩展别的继电器。

客户端实现

/project/client/index.html

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>
</head>

<body>
    <div id="info" style="margin-bottom: 16px; width: 100%;height: 300px;border: 1px solid red;"> </div>
    <button id="btn">手动查询</button>
    <button id="open">开灯</button>
    <button id="close">关灯</button>
</body>

</html>
<script type="module">
    import { io } from "https://cdn.socket.io/4.4.1/socket.io.esm.min.js";
 
    const server = "ws://" + location.host;

    const socket = io(server, {
        reconnectionDelayMax: 10000,
        auth: {},
        query: { }
    });

    function onSwitchs(data) {
        console.log("[switchs]接收:", data);
        document.querySelector("#info").innerHTML = JSON.stringify(data, null, 4)
        
    }

    socket.on("switchs", onSwitchs);

    const btn = document.querySelector("#btn");
    const obtn = document.querySelector("#open");
    const cbtn = document.querySelector("#close");
    btn.addEventListener("click", function () {
        // 发送输入框数据
        socket.emit("query")
    })
    obtn.addEventListener("click", function () {
        // 发送输入框数据
        socket.emit("set", { id: "desklamp", data: "1" })
    })
    cbtn.addEventListener("click", function () {
        // 发送输入框数据
        socket.emit("set", { id: "desklamp", data: "0" })
    })
</script>

页面如下：

浏览器访问：127.0.0.1:3005

代码分析

代码比较简单，只是实现了控制开关和查询的按钮。

硬件代码

/project/main/main.ino

js 复制代码 
#include <ESP8266WiFi.h>
#include <Arduino.h>
#include <ArduinoJson.h>
#include <WebSocketsClient.h>
#include <SocketIOclient.h>
#include <Hash.h>


#ifndef STASSID
#define STASSID "oldwang"
#define STAPSK "wifi密码"
#endif

// 继电器引脚 高电平断开，低电平接通
int jdqPot = 12;

// 开关状态   "0"关闭， "1" 开启
String switchStatus = "0";

const char* ssid = STASSID;
const char* password = STAPSK;

const char* websockets_server_host = "192.168.xx.xx"; //"www.xxx.top";  // 服务器名
const uint16_t websockets_server_port = 3005;         // 端口

SocketIOclient socketIO; 

StaticJsonDocument<1024> iomsg;

void socketIOEvent(socketIOmessageType_t type, uint8_t* payload, size_t length) {
  switch (type) {
    case sIOtype_DISCONNECT:
      Serial.printf("[IOc] Disconnected!\n");
      break;
    case sIOtype_CONNECT:
      Serial.printf("[IOc] Connected to url: %s\n", payload);
      // join default namespace (no auto join in Socket.IO V3)
      socketIO.send(sIOtype_CONNECT, "/");
      break;
    case sIOtype_EVENT:
      // 获取到服务的消息后打印出来
      Serial.printf("[IOc] get event: %s\n", payload);
      deserializeJson(iomsg, &(*payload));
      if (iomsg[0] == "switchs") { 
        if (iomsg[1]["desklamp"] == "1") {
          // 开灯
          switchStatus = "1";
        }else{
          // 关灯 
          switchStatus = "0";
        }
      } 
      break;
    case sIOtype_ACK:
      Serial.printf("[IOc] get ack: %u\n", length);
      hexdump(payload, length);
      break;
    case sIOtype_ERROR:
      Serial.printf("[IOc] get error: %u\n", length);
      hexdump(payload, length);
      break;
    case sIOtype_BINARY_EVENT:
      Serial.printf("[IOc] get binary: %u\n", length);
      hexdump(payload, length);
      break;
    case sIOtype_BINARY_ACK:
      Serial.printf("[IOc] get binary ack: %u\n", length);
      hexdump(payload, length);
      break;
  }
}

void setup() {
  // Serial.begin(115200);
  Serial.begin(9600);
  Serial.setDebugOutput(true);

  pinMode(jdqPot, OUTPUT);

  Serial.println();
  Serial.println();
  Serial.print("wifi 连接中 ");
  Serial.println(ssid);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  Serial.println("socketIO begin: ");
  // server address, port and URL
  socketIO.begin(websockets_server_host, websockets_server_port, "/socket.io/?EIO=4");

  // event handler
  socketIO.onEvent(socketIOEvent);
}

unsigned long messageTimestamp = 0;
void loop() {
  socketIO.loop();

  uint64_t now = millis();

  //  1分钟向服务器发送一次心跳消息
  if (now - messageTimestamp > 60000) {
    // if (now - messageTimestamp > 20000) {
    messageTimestamp = now;
    sendMsg("heartbeatMonitoring", "hi");
    // 测试打开开关
    // sendMsg("set", "1");
    // digitalWrite(jdqPot, LOW);
  }

  // 根据状态控制继电器状态
  if (switchStatus == "0") {
    // 关闭
    digitalWrite(jdqPot, LOW);
  } else {
    // 接通
    digitalWrite(jdqPot, HIGH);
  }
}

// 发送信息的方法
// @msgName 服务端监听的事件名
// @msg     会当到 data 中进行发送
void sendMsg(char msgName[100], char msg[100]) {
  // 创建一个 scoket.io json 消息
  DynamicJsonDocument doc(1024);
  JsonArray array = doc.to<JsonArray>();

  // 消息名称
  // ps: socket.on('event_name', ....
  array.add(msgName);

  // 添加消息内容
  JsonObject param = array.createNestedObject();
  param["data"] = msg;
  param["id"] = "desklamp";

  // JSON to String (serializion)
  String output;
  serializeJson(doc, output);

  // Send event
  socketIO.sendEVENT(output);

  Serial.print("send:");
  Serial.println(output);
}

注意

arduinoWebSockets 这个依赖必须去 github 下载，不能在 Arduino IDE 中直接搜索安装，因为不是一个作者写的，不一样。下载地址：https://github.com/Links2004/arduinoWebSockets 。

下载后的依赖放到IDE首选项中设置的地址中即可，还不懂就百度一下安装 arduino 依赖库。

ArduinoJson 依赖直接在 Arduino IDE 中搜索安装即可

IDE 中开发版选择和 nodemcu 一样：

引脚接线

D1 继电器 led
5V DC+
3.3V NO
GND DC- 负极
D6 IN
COM 正极

附上一张 nodemcu d1 引脚和 arduino 引脚的对应图

相关推荐
一路向前的月光4 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   4 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
Fan_web4 小时前
jQuery——事件委托
开发语言·前端·javascript·css·jquery
Jiaberrr5 小时前
Element UI教程：如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
EVERSPIN6 小时前
分享国产32位单片机的电机控制方案
单片机·嵌入式硬件
每天一杯冰美式oh6 小时前
51单片机的家用煤气报警系统【proteus仿真+程序+报告+原理图+演示视频】
嵌入式硬件·51单片机·proteus
安冬的码畜日常7 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签（上）
开发语言·前端·javascript·信息可视化·数据可视化·d3.js
太阳花ˉ7 小时前
html+css+js实现step进度条效果
javascript·css·html
john_hjy7 小时前
11. 异步编程
运维·服务器·javascript
热门推荐
01【经验分享】Ubuntu22.04安装微信(linux官方版)02安卓系列机型永久去除data分区加密 详细步骤解析032024年高教社杯数学建模国赛C题超详细解题思路分析04CTF网络安全大赛简单的web抓包题目：HEADache05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07pve(Proxmox VE)安装i225v网卡驱动08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10RAG 实践- Ollama+RagFlow 部署本地知识库