さくらのIoTモジュールのWebSocketで「ｵﾄｰﾁｬｿｲﾝｼﾞｹｰﾀｰ」作成

来週お父ちゃんは一週間位海外出張のため、今持て余しているもう一つのモジュールを使って、居場所をインジケータ表示するものを作って見よう！という事になりました。

ということで、「さくらのIoT Platform α版」の双方向通信である「WebSocket」を試してみました。

Web → モジュールの一方通行なので、今後サービス開始予定である「Incoming Webhook」の方でも良かったのでしょうが、こちらは未だ開始されていないようなので、WebSocket を使用しました。

動作

お父ちゃんが出張先でWebから居場所を送信する
モジュールでインジケータ表示される

というものです。

モジュール側はお父ちゃんが作成していますので、またそちらの記事を参照頂ければと思います。

私の方では、「ウェブページからモジュール（WebSocket）へデータを送信する」という部分を担当しました。

ソースコード

以下にソースコードを貼り付けます。

JavaScript

今回は非公開ページなので、アクセストークンなどが丸見えでもまぁいいかということで、JavaScript で書いています。

<script>
	var ws = null;
	var ws_connect_timer = setInterval(function(){
	    if(ws == null || ws.readyState != 1){
	        ws = new WebSocket('wss://secure.sakura.ad.jp/iot-alpha/ws/Tokenの値');
	        ws.onmessage = function(e){
	            console.log(e.data);
	        };
	        ws.onclose = function(){
			    document.getElementById('status').innerHTML='Close';
	        };
	        ws.onopen = function(){
			    document.getElementById('status').innerHTML='Open';
	        };
			ws.onerror = function(event) {
			    document.getElementById('status').innerHTML='Error';
			};
        	ws.onmessage = (ev) => {
			    const data = JSON.parse(ev.data);
				let moduleData = `${data.payload.channels[0].value}`
			    console.log(`[${data.payload.channels[0].value}] ${moduleData}`);
				
				var radioVal = jQuery("input[name='place']:checked").val();
				if (radioVal == undefined) {
					jQuery('#radio' + moduleData).attr('checked', true);
				}
//			    document.getElementById("count").innerHTML=currentData;
			};
	    }
	}, 5000);
	
	function submit() {
		var radioVal = jQuery("input:radio[name='place']:checked").val();

	    const obj = {
	        module: 'モジュール名',
	        type: 'channels',
	        datetime: new Date().toISOString(),
	        payload: {channels: [{channel: 0, type: 'I', value: Number(radioVal)}]}
	    };
	    ws.send(JSON.stringify(obj));
	}
</script>

var ws = null;

var ws_connect_timer = setInterval(function(){

if(ws == null || ws.readyState != 1){

ws = new WebSocket('wss://secure.sakura.ad.jp/iot-alpha/ws/Tokenの値');

ws.onmessage = function(e){

console.log(e.data);

};

ws.onclose = function(){

document.getElementById('status').innerHTML='Close';

};

ws.onopen = function(){

document.getElementById('status').innerHTML='Open';

};

ws.onerror = function(event) {

document.getElementById('status').innerHTML='Error';

};

ws.onmessage = (ev) => {

const data = JSON.parse(ev.data);

let moduleData = `${data.payload.channels[0].value}`

console.log(`[${data.payload.channels[0].value}] ${moduleData}`);

var radioVal = jQuery("input[name='place']:checked").val();

if (radioVal == undefined) {

jQuery('#radio' + moduleData).attr('checked', true);

}

// document.getElementById("count").innerHTML=currentData;

};

}

}, 5000);

function submit() {

var radioVal = jQuery("input:radio[name='place']:checked").val();

const obj = {

module: 'モジュール名',

type: 'channels',

datetime: new Date().toISOString(),

payload: {channels: [{channel: 0, type: 'I', value: Number(radioVal)}]}

};

ws.send(JSON.stringify(obj));

}

</script>

html

<h2>WebSocket Status : <span id="status">Wait</span></h2>
<p id="count"></p>
	
<p>
	<input id="radio1" type="radio" name="place" value="1">ホテル
	<input id="radio2" type="radio" name="place" value="2">職場
	<input id="radio3" type="radio" name="place" value="3">観光
	<input id="radio4" type="radio" name="place" value="4">就寝
</p>

<p>
	<button onclick="submit()" />送信</button>
</p>