2018年8月18日土曜日

Node.js 色々(html socket.io child_proces)

前回はnodeをwindows10にインストールし,ブラウザにHallo worldを表示
してみました.次回RaspberryPiにインストールしてみるといいましたが,
かなり昔の話で方法を忘れてしまいました.こまめにメモするんだった・・・

今回は一通りセットアップが終わったRaspberryPiを使用し,
私が良く使うモジュールについてメモしたいと思います.

RaspberryPiはsambaでファイル共有し,sshでリモート接続できるように
なっています.とりあえず適当なテストフォルダを用意しtest.js,test.htmlを
作りました.細かいことはわかりませんが,jsはサーバで実行されるプログラムで
htmlはクライアント(ブラウザ)で実行されるプログラムという認識でいいのでしょうか.



・html
接続があった場合,外部のhtmlファイルを表示させてみようと思います.
何をするにもまずはこれからですね.
test.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Client</title>
</head>
<body>
  <p>Hello World!!</p>
</body>
</html>

test.js
var app = require('http').createServer(handler)
var fs = require('fs');

app.listen(3000); // HTTPポートオープン

//接続があった場合の処理
function handler (req, res) {
//ファイルリード
  fs.readFile(__dirname + '/test.html',
  //エラーの場合の処理
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading test.html');
    }
//通常処理
    res.writeHead(200);
    console.log("Server Started!!");
    res.end(data);
  });
}

windowsのターミナルから接続し,作ったディレクトリに移動します.
node testでサーバを起動できます.
ブラウザから「RasPiのアドレス:3000」にアクセスします.
「Hello World!!」が表示できたかと思います.



・socket.io
サーバとクライアントで通信させてみようと思います.
これができるとブラウザ経由でRasPiを操作できるようになります.

htmlファイルはボタンを追加し,massageを送れるようにします.
emitでデータを送ります.送るデータはjson形式というらしい.また,
socket.ioモジュールを読み込みます.
test.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Client</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <p>Hello World!!</p>
  <input type="button" value="on" onclick="send('hello!!')"/>
</body>
<script>
var socket = io.connect();

function send(send_data){
    socket.emit('massage',{ data:send_data});
};
</script>
</html>

jsファイルは受け取ったメッセージをコンソール上に表示します.
モジュールとしてsocket.ioを追加.onで受信した場合の処理を記述します.
test.js

var app = require('http').createServer(handler)
var fs = require('fs');
var io = require('socket.io')(app); //socket.io

app.listen(3000); // HTTPポートオープン

//接続があった場合の処理
function handler (req, res) {
//ファイルリード
  fs.readFile(__dirname + '/test.html',
  //エラーの場合の処理
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading test.html');
    }
//通常処理
    res.writeHead(200);
    console.log("Server Started!!");
    res.end(data);
  });
};

//アクセスがあった場合
io.on('connection', function (socket) {
  //massageを受信した場合
  socket.on('massage', function (data) {
    // クライアントから受け取ったデータを出力する
    console.log(data);
  });
});

同じようにnodeを起動し,ブラウザからアクセスします.
ボタンを押したら { data: 'hello!!' } が表示されると思います.



・child_proces
サーバー上のshellコマンドなどを動かしたい時,child_procesで動かすことができます.

test.jsのみ書き換え,先ほどのボタン入力があった場合に「ls -l」を実行してみたいと
思います.child_processモジュールを追加し,socket.onのところにコードを追加します.
test.js

var app = require('http').createServer(handler)
var fs = require('fs');
var io = require('socket.io')(app); //socket.io
var exec = require('child_process').exec; //child_process

app.listen(3000); // HTTPポートオープン

//接続があった場合の処理
function handler (req, res) {
//ファイルリード
  fs.readFile(__dirname + '/test.html',
  //エラーの場合の処理
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading test.html');
    }
//通常処理
    res.writeHead(200);
    console.log("Server Started!!");
    res.end(data);
  });
};

//アクセスがあった場合
io.on('connection', function (socket) {
  //massageを受信した場合
  socket.on('massage', function (data) {
    // クライアントから受け取ったデータを出力する
    console.log(data);
    
    //ls -lを実行
    exec('ls -l', function(err, stdout, stderr){
  console.log(stdout);
  });
  });
});


同じようにnodeを起動し,ブラウザからアクセスします.
ボタンを押したら以下のように表示されると思います.
{ data: 'hello!!' }
合計 28
drwxr-xr-x 41 pi pi  4096  8月 18 21:34 node_modules
-rw-r--r--  1 pi pi 10624  8月 18 21:34 package-lock.json
-rw-r--r--  1 pi pi   250  8月 18 21:34 package.json
-rwxr--r--  1 pi pi   381  8月 18 21:35 test.html
-rwxr--r--  1 pi pi   976  8月 18 21:50 test.js




ここまでで,3つのNodeモジュールを使用してみました.
実はこの3つだけで非常に幅広いことが可能になります.
例えば,ブラウザ経由で音楽をかけたり,RaspPiに接続された温度計の情報を
ブラウザに表示したりすることが可能かと思います.夢が広がりますね.

あと良く使うのはexpressモジュールですが,まだうまく扱えていないので
次回まとめたいと思います.



2018年8月17日金曜日

Node.js windows10にインストールしてみる

お久しぶりです.
2018年上半期は就活&その他イベントで忙しく,なかなか更新できませんでした.
そんな中何となくnode.jsいじっていたので,少しまとめておきたいと思います.
今回はインストールからwebサーバーのサンプルまで.

windows10はココからダウンロードできました.
インストールは特に設定もなくnextしていけばOK.
windows power shell で以下のようにバージョンが確認できれば完了です.

> node -v
v8.11.2

ウェブサーバのサンプルを試してみます.
適当なエディタで以下のようなファイルを作成.
hello_http.js



const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});



power shellで作ったファイルがあるフォルダに移動.
>cd "作ったファイルのパス"

以下コマンドでサーバ起動
>node hello_http
Server running at http://127.0.0.1:3000/

ブラウザにlocalhost:3000と入力し,アクセスできます.





これで一応windows10環境でnode.jsが使えるようになりました.
以前までの私は,慣れない中いくつものソフトをインストールしwebサーバ
を構築しやっと簡単なことができるといった感じだったのでNodeの簡単さに非常に
感動しています.

ただ私はRaspberryPiで使用する事を前提にNodeをいじっていたので,
次回からはRaspberry Piにインストールする方法と使ってみて便利だったモジュール
の紹介をしたいと思います.