はじめに
開発環境
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
//各パッケージの読み込みconstmosca=require('mosca')varexpress=require('express');varapp=express();constserver=newmosca.Server()//mqttブローカーを定義varwebserver=require('http').createServer(app);//webサーバーを定義app.get("/",function(request,response){response.sendFile(__dirname+'/index.html');});webserver.listen(3000);//ポート3000でサーバーを開始vario=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)=>constmqtt=require('mqtt')constclient=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><metacharset="utf-8"><metaname="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><linkrel="stylesheet"href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css"><style>body{max-width:100%;}.slider{width:300px;}</style></head><body><pid="redp">red=50</p><inputtype="range"value="50"min="0"max="100"step="1"id="redrange"class="slider"><pid="bluep">blue=50</p><inputtype="range"value="50"min="0"max="100"step="1"id="bluerange"class="slider"><pid="greenp">green=50</p><inputtype="range"value="50"min="0"max="100"step="1"id="greenrange"class="slider"><script>constsocket=io();varredrange=document.getElementById("redrange");varredp=document.getElementById("redp");varinterval=window.setInterval(sendcolor,25);varred=0,blue=0,green=0;varoldred=0,oldblue=0,oldgreen=0;redrange.oninput=function(){redp.innerHTML="red="+this.value;red=this.value}varbluerange=document.getElementById("bluerange");varbluep=document.getElementById("bluep");bluerange.oninput=function(){bluep.innerHTML="blue="+this.value;blue=this.value}vargreenrange=document.getElementById("greenrange");vargreenp=document.getElementById("greenp");greenrange.oninput=function(){greenp.innerHTML="green="+this.value;green=this.value}functionsendcolor(){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>
constcharssid[]="あなたの家のSSID";constcharpasswd[]="あなたの家のpasswd";constchar*mqtt_server="mqttブローカー(nodejsサーバー)のIPアドレス";WiFiClientespClient;PubSubClientclient(espClient);longlastMsg=0;charmsg[50];intvalue=0;intred=0,blue=0,green=0;constintledR=A18;constintledG=A4;constintledB=A5;voidsetup(){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);}voidloop(){if(WiFi.status()==WL_DISCONNECTED){connectWiFi();}if(!client.connected()){reconnect();}client.loop();//client.publish("esp32/temperature", "ddd");}voidconnectWiFi(){WiFi.begin(ssid,passwd);Serial.print("WiFi connecting...");while(WiFi.status()!=WL_CONNECTED){Serial.print(".");delay(100);}Serial.print(" connected. ");Serial.println(WiFi.localIP());}voidcallback(char*topic,byte*message,unsignedintlength){Serial.print("Message arrived on topic: ");Serial.print(topic);Serial.print(". Message: ");StringmessageTemp;for(inti=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();}voidreconnect(){// Loop until we're reconnectedwhile(!client.connected()){Serial.println("Connecting to MQTT...");StringclientId="ESP32-"+String(random(0xffff),HEX);if(client.connect(clientId.c_str())){Serial.println("connected");// Subscribeclient.subscribe("esp32/red");client.subscribe("esp32/blue");client.subscribe("esp32/green");}delay(1000);randomSeed(micros());}}voidledcontrol(){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