はじめに
##開発環境
node.js 12以降
npm 6以降
Arduino core for the ESP32 1.04以降
作るもの
スマホ等のブラウザからnode.jsを通してESP32にLEDの制御信号を送り,ESP32でリアルタイムにLEDを制御します。
またスマホからnode.jsサーバーにはwebsocketを、node.jsからESP32にはMQTTを用います。
##対象読者
node.jsを触ったことのある人
ESP32にコードを書き込める人
フルカラーLEDを持っている人
#node.js側の実装
まず以下のコマンドを実行する
$mkdir 好きな名前
$cd さっき決めた名前
$npm init (質問に答える エンター連打でもヨシ！)
##パッケージのインストール
して以下のコマンドを実行ください
$npm install express mosca mqtt socket.io -s
サーバーのコードを作成
index.jsを作成して以下のコードを書き込む
index.js
//各パッケージの読み込み
const mosca = require('mosca')
var express = require('express');
var app = express();
const server = new mosca.Server()//mqttブローカーを定義
var webserver = require('http').createServer(app);//webサーバーを定義
app.get("/", function (request, response)
{
response.sendFile(__dirname + '/index.html');
});
webserver.listen(3000);//ポート3000でサーバーを開始
var io = require('socket.io').listen(webserver);
server.on('ready', () => console.log('server started'))
server.on('clientConnected', client =>
console.log(`client connected: ${client.id}`))
server.on('published', (packet) =>
const mqtt = require('mqtt')
const client = mqtt.connect('mqtt://localhost')
client.on('message', (topic, msg) =>
{
console.log(`topic: ${topic}, msg: ${msg}`)
})
io.on('connection', function (socket)
{
socket.on('red', function (msg)//赤LEDの値が届いたらその値をESP32に送信する
{
console.log("red=" + msg);
client.publish('esp32/red', msg);
});
socket.on('blue', function (msg)//青LEDの値が届いたらその値をESP32に送信する
{
console.log("blue=" + msg);
client.publish('esp32/blue', msg);
});
socket.on('green', function (msg)//緑LEDの値が届いたらその値をESP32に送信する
{
console.log("green=" + msg);
client.publish('esp32/green', msg);
});
});
##htmlファイルを作成する
index.html を作成して以下のコードを書き込む
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP32</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
<style>
body {
max-width: 100%;
}
.slider {
width: 300px;
}
</style>
</head>
<body>
<p id="redp">red=50</p>
<input type="range" value="50" min="0" max="100" step="1" id="redrange" class="slider">
<p id="bluep">blue=50</p>
<input type="range" value="50" min="0" max="100" step="1" id="bluerange" class="slider">
<p id="greenp">green=50</p>
<input type="range" value="50" min="0" max="100" step="1" id="greenrange" class="slider">
<script>
const socket = io();
var redrange = document.getElementById("redrange");
var redp = document.getElementById("redp");
var interval = window.setInterval(sendcolor, 25);
var red = 0, blue = 0, green = 0;
var oldred = 0, oldblue = 0, oldgreen = 0;
redrange.oninput = function ()
{
redp.innerHTML = "red=" + this.value;
red = this.value
}
var bluerange = document.getElementById("bluerange");
var bluep = document.getElementById("bluep");
bluerange.oninput = function ()
{
bluep.innerHTML = "blue=" + this.value;
blue = this.value
}
var greenrange = document.getElementById("greenrange");
var greenp = document.getElementById("greenp");
greenrange.oninput = function ()
{
greenp.innerHTML = "green=" + this.value;
green = this.value
}
function sendcolor()
{
if (red != oldred)
{
oldred = red;
socket.emit('red', red);
}
if (blue != oldblue)
{
oldblue = blue;
socket.emit('blue', blue);
}
if (green != oldgreen)
{
oldgreen = green;
socket.emit('green', green);
}
}
</script>
</body>
</html>
#ESP32にコードを書き込む
まずhttps://github.com/knolleary/pubsubclient
よりPubSubClientライブラリを入れて以下のコードを書き込む
#include <WiFi.h>
#include <PubSubClient.h>
const char ssid[] = "あなたの家のSSID";
const char passwd[] = "あなたの家のpasswd";
const char* mqtt_server = "mqttブローカー(nodejsサーバー)のIPアドレス";
WiFiClient espClient;
PubSubClient client(espClient);
long lastMsg = 0;
char msg[50];
int value = 0;
int red=0,blue=0,green=0;
const int ledR = A18;
const int ledG = A4;
const int ledB = A5;
void setup() {
ledcSetup(0, 12800, 8);
ledcAttachPin(ledR, 0);
ledcSetup(1, 12800, 8);
ledcAttachPin(ledG, 1);
ledcSetup(2, 12800, 8);
ledcAttachPin(ledB, 2);
Serial.begin(115200);
connectWiFi();
client.setServer(mqtt_server, 1883);
client.setCallback(callback);
}
void loop() {
if ( WiFi.status() == WL_DISCONNECTED ) {
connectWiFi();
}
if (!client.connected()) {
reconnect();
}
client.loop();
//client.publish("esp32/temperature", "ddd");
}
void connectWiFi()
{
WiFi.begin(ssid, passwd);
Serial.print("WiFi connecting...");
while (WiFi.status() != WL_CONNECTED) {
Serial.print(".");
delay(100);
}
Serial.print(" connected. ");
Serial.println(WiFi.localIP());
}
void callback(char* topic, byte* message, unsigned int length) {
Serial.print("Message arrived on topic: ");
Serial.print(topic);
Serial.print(". Message: ");
String messageTemp;
for (int i = 0; i < length; i++) {
Serial.print((char)message[i]);
messageTemp += (char)message[i];
}
Serial.println();
if (String(topic) == "esp32/red") {
red=messageTemp.toInt()*255/100;
}
if (String(topic) == "esp32/blue") {
blue=messageTemp.toInt()*255/100;
}
if (String(topic) == "esp32/green") {
green=messageTemp.toInt()*255/100;
}
ledcontrol();
}
void reconnect() {
// Loop until we're reconnected
while (!client.connected()) {
Serial.println("Connecting to MQTT...");
String clientId = "ESP32-" + String(random(0xffff), HEX);
if (client.connect(clientId.c_str())) {
Serial.println("connected");
// Subscribe
client.subscribe("esp32/red");
client.subscribe("esp32/blue");
client.subscribe("esp32/green");
}
delay(1000);
randomSeed(micros());
}
}
void ledcontrol(){
Serial.println(red);
ledcWrite(0,red);
ledcWrite(1,blue);
ledcWrite(2,green);
}
#ESP32に配線をする
フルカラーLEDをそれぞれ32,33,25に接続する
#起動する
まず以下のコマンドを実行する
$node index.js
次にESP32に電源を入れる
ブラウザから サーバーのIP:3000 にアクセスする
以上です。
#終わりに
初めてのQiitaなので見るに堪えないところがあればご指摘お願いします。
また今日使ったコードはgithubにあげています。
https://github.com/iotConnecter/iotprototypes
#参考サイト
https://wak-tech.com/archives/752
https://qiita.com/hilucky/items/0e394760a1445593cea5