[Arduino] Node.jsでSocket.IOを使ってLEDをWebページから操作する

Arduino 資料一覧

Node.jsでSocket.IOを使ってLEDをWebページから操作する

2017/1/14更新

対応バージョン: Node.js 4.2.6, Johnny-Five 0.10.6, Socket.IO 1.7.2

Node.jsでSocket.IOを使ってArduino UnoにつないだRGBフルカラーLED(OSTA5131A)(カソードコモン)をWebページから操作する。

Node.jsを動かす母艦はUbuntu 16.04とする。

Johnny-FiveのインストールやLED結線などの事前準備は以下を参照のこと。

Socket.IOインストール

まずSocket.IOをインストールする。Socket.IOはnpmを使って簡単にインストールできる。

% sudo npm install -g socket.io

ソース

次に以下のJavaScriptコードとHTMLを書きNode.jsで実行する。

socketio.js

var fs = require("fs");
var http = require("http");
var server = http.createServer();

var five = require("johnny-five");
var board = new five.Board();

board.on("ready", function() {
  // Server
  server.on("request", function(req, res) {
    var stream = fs.createReadStream("index.html");
    res.writeHead(200, {
      "Content-Type": "text/html"
    });
    stream.pipe(res);
  });

  // Socket.IO
  var io = require("socket.io").listen(server);
  server.listen(8000);

  // LED
  var led = new five.Led.RGB({
    pins: {
      red: 6,
      green: 5,
      blue: 3
    }
  });

  // Control
  io.on("connection", function(socket) {
    socket.on("msg", function(color) {
      console.log(color);

      if (color == "off") {
        led.off();
      } else {
        led.color(color);
      }
    });
  });
});

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>arduino-socket.io</title>
  <script src="/socket.io/socket.io.js"></script>
  <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
</head>

<body>
  <form>
    <p>
      <input type="radio" name="color" value="red">RED</input>
      <input type="radio" name="color" value="green">GREEN</input>
      <input type="radio" name="color" value="blue">BLUE</input>
      <input type="radio" name="color" value="off">(OFF)</input>
    </p>
    <p>
      <input type="submit" value="submit" />
    </p>
  </form>

  <script type="text/javascript">
    var socket = io();
    $('form').submit(function() {
      socket.emit("msg", $("input[name=color]:checked").val());
      return false;
    });
  </script>
</body>
</html>

実行

% node socketio.js 
1484404749919 Device(s) /dev/ttyACM0  
1484404749927 Connected /dev/ttyACM0  
1484404753174 Repl Initialized  
>>

Webブラウザからアクセス

localhost:8000にアクセスし、ラジオボタンで色を指定してsubmitをクリックすると指定した色でLEDが点灯する。OFFを選ぶと消灯する。

参考サイト

Arduino (Wikipedia)

Arduino技術情報 (Qiita)

Arduino関連情報 (Device Plus)

Arduino記事一覧 (Think IT)

Node.js技術情報 (Qiita)

Johnny-Five技術情報 (Qiita)

Socket.IO技術情報 (Qiita)

エレクトロニクス豆知識 (ROHM)