ラズパイ & Node.js でMQTTサーバを立てる

HEROKUを使えば、サクッとMQTTサーバができるらしいが、色々自前でやりたいので調べてみたら、「mosca」ってのを使えば、Node.jsでサーバ作れるし、「mqtt.js」を使えば、クライアント側もできるらしいので、早速やってみた。
Node.jsはすごいねぇ。

Brokerサーバの構築

1.moscaのインストール
npm install mosca
2.基本的なスクリプト
var mosca = require('mosca');
var server = new mosca.Server({
	port: <サーバのポート番号>,
});

/*準備完了*/
server.on('ready', function(){
	console.log('Server is ready.');
});

/*クライアントが接続された*/
server.on('clientConnected', function(client){
	console.log('broker.on.connected.', 'client:', client.id);
});

/*クライアントが切断されrた*/
server.on('clientDisconnected', function(client){
	console.log('broker.on.disconnected.', 'client:', client.id);
});

/*Subscriberからデータの配信要望が来た*/
	server.on('subscribed', function(topic, client){
	console.log('broker.on.subscribed.', 'client:', client.id, 'topic:', topic);
});

/*Subscriberからデータの配信停止要望が来た*/
	server.on('unsubscribed', function(topic, client){
	console.log('broker.on.unsubscribed.', 'client:', client.id); 
});
	
/*Publisherからデータが送信された*/
server.on('published', function(packet, client){
	if (/\/new\//.test(packet.topic)){
		return;
	}
	if (/\/disconnect\//.test(packet.topic)){
		return;
	}
	console.log('broker.on.published.', 'client:', client.id);
});

/*MQTTサーバをHTTP サーバに結びつける*/
var http = require('http');
var httpServer = http.createServer();
server.attachHttpServer(httpServer);
httpServer.listen(<サーバのポート番号>);

Node.jsでのクライアント機能の実装

1. mqtt.jsのインストール
npm install mqtt

※ブラウザから実行する場合は埋め込み利用も可

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
2. 初期化スクリプト
const mqtt = require('mqtt');
var client = mqtt.connect({
	host: ' ',
	port: ,
	clientId: '<自分のID>'	//任意(無しの場合は自動設定)
});

/*Brokerサーバに接続*/
client.on('connect', function(){
	console.log('publisher.connected.');
});

データの送信(Publisher)

/*データ配信*/
client.publish('<任意のTOPIC>',<送信データ>);

データの受信(Subscriber)

/*購読希望リクエスト*/
client.subscribe('<購読希望TOPIC>');

/*データ受信*/
client.on("message", (topic, payload) => {
	console.log(topic);
	var message = payload.toString('utf-8');
	//var message = String.fromCharCode.apply(null, payload);
	console.log(message);
});

参考サイト


無事MQTTサーバができたので、micro:bitとHalocodeを双方向で通信させてみた。

BlueJelly と bleno でBLE通信する際の文字列の取り回しについて

ブラウザでお手軽BLEをするのに、BlueJellyがすごく便利なんだが、Peripheral化させたラズパイ(Node.js + bleno)とデータのやり取りする時に、Byte Arrayとかなんとかメンドクサイのが出て来て訳が分からんので、とりあえず簡単に使う方法を整理。

●データを受ける(Read)

Peripheral側から飛んできたデータはArray Bufferになってるので、文字列に戻す

//Bluejelly イベント
ble.onRead = function (data, uuid){
 let xVal = buffToString(data.buffer);
 console.log(xVal);
}

/*ArrayBufferから値を読んで文字列に変換*/
const buffToString = function(xBuffer) {
  let xArrayBuffer = new Uint8Array(xBuffer);
  let xRes = String.fromCharCode.apply(null,xArrayBuffer);
  return xRes;
}
●データを送る(Write)

Peripheralにデータを送るには文字列をArrayBufferにして、送る。

let xSendVal = "送信データ";

//文字列をArrayBufferに変換
let arrayBuffe = new TextEncoder().encode(xSendVal);
ble.write('UUID名',arrayBuffe);
●Node.js側でWriteされたデータを文字列に戻す
//xVal = writeされたデータ
let xVal = Buffer.from(Uint8Array.from(Buffer.from(data))).toString();

Node.jsでラズパイのカメラモジュールを使う

Raspberry Pi Zeroとカメラモジュールを入手したので、Node.jsで制御させてみた。
コマンドラン叩く系とかは面倒くさいのので敬遠してたが、「pi-camera」ってモジュール入れたら、簡単にできた。

npm install pi-camera

モジュールを入れたらサイトにあるサンプルスクリプトを参考に、JavaScriptファイルを作成して書いて実行。

const PiCamera = require('pi-camera');

const myCamera = new PiCamera({
  mode: 'photo',
  output: `${ __dirname }/test.jpg`,
  width: 640,
  height: 480,
  nopreview: true,
});
 
myCamera.snap()
  .then((result) => {
    // Your picture was captured
  })
  .catch((error) => {
     // Handle your error
  });

撮影完了までに5秒くらいの待つけど、これは仕様らしいので、諦めるしか無いっぽい。
動画にも対応してる様なので、次は動画にチャレンジ。

参考サイト
Pi-Camera(npm)
pi-camera(GitHub)

ejsでテンプレートのパスが通らない件

Node.js + express + ejsの環境で、下記みたいに書いてたが、ejsのテンプレートファイルが見つからないって、エラー(Error: Cannot find module ‘views/’)になる。

app.get("/", function(req, res) {
    res.render('./views/temp.ejs', { title: 'SAMPLE'});
});

で、どうしたもんかと2日ばかり悩んだが、express.staticで、ルートのパスを指定すれば、動いた。

app.use(express.static('./views'));

app.get("/", function(req, res) {
    res.render('temp.ejs', { title: 'SAMPLE'});
});

…ただ、これが正解かどうかは怪しいので、どなたか正解プリーズ!

ラズパイ3にgoogle-home-notifierを入れるメモ

Raspberry Pi 3 にgoogle-home-notifier入れようと思ったら微妙に手間取ったので、メモ。

$ npm init
$ npm install google-home-notifier

※「fatal error: dns_sd.h: そのようなファイルやディレクトリはありません」 ってエラーが出た場合は下記を実行してから、再度インストールする。
$ sudo apt-get install libavahi-compat-libdnssd-dev

Goome homeのアドレスをサクッと調べるために、「multicast-dns」も入れとく。
$ npm install multicast-dns
参考サイト:
Raspberry PiからGoogle Homeを喋らせる
Google Homeの名前とIPアドレスを検出する方法

Monacaデバッカーがコケる件

Android版のMonacaデバッカーを7.0.2にアップデートしたら、プロジェクトの再生で急にコケる様になった。

●端末が縦固定に設定されてる。
●プロジェクトがLandscape(横)設定にしてる。

この組み合わせの場合に発生するっぽい。
ちなみに、アプリにしたらこの問題は発生しない。

ついでに、ダッシューボードにログインする度にアカウントの言語設定がリセットされちゃうのも、地味に困る

iOSのSafariでColorboxの表示がセンターに来ない件

モーダル表示で何かと便利なColorboxだが、iOSのSafariだと、ウィンドウがが縦センターじゃなく上の方に出る。どうも、表示時のアニメーションが原因らしい。

なので、’transition’を’none’にしてアニメーションを切ってみたら、ちゃんと出てきた。(デフォルト値は’elastic’)

$(".colorbox").colorbox({transition:"none"});

古いスマホでe.preventDefault()が効かない件

ちょっと古いスマホ(iPhone5SとかAndroidの4.x 辺り)のブラウザだと、e.preventDefault()が効かないので、a タグの処理が走ってしまう….

で、ググったりテストしたりして、分かったこと。

  • onClickだと、どうやっても無理。
  • onTouchEndでも、どうにも無理。
  • onTouchStartなら行けそう!
  • e.stopPropagation()はなんか、効くっぽい。

って事で、以下の様な感じにしたら、なんとか動いた。


$('a').on("touchstart",function(e){
	e.preventDefault(); 	 ←普通はこれでキャンセル
	e.stopPropagation();	 ←問題スマホは、これでキャンセル
	//処理内容
}

線を描くアニメーション

Canvasでサクッと描画できるのはいいけど、描画過程を見せたくて、線を引っ張る過程をアニメーションさせる方法を模索中。

Line Animation

始点のと終点の座標から、角度と線分の長さを割り出し、始点から終点に向かって、ちょっとづつ線を描いては消す…ってのを繰り返すってだけがが、そこそこ成功。

なお、描画にはタイマー関数ではなく、「requestAnimationFrame」を使ってます。

>>Canvasアニメーションの要点