SlideShare a Scribd company logo
1 of 23
2016年6月3日
1
ホーム・ネットワークWG 主査
長島 宏明/コアーズ株式会社
http://www.slideshare.net/HiroakiNagashima1/toppers2016
μKadecotのUI
 WebブラウザーをUIとしたコントローラー
2
HTTP/WebSocket
Kadecot API
ECHONET Lite
Webアプリのコンテンツを保存
Webブラウザーとの通信
 WebブラウザーはHTTPプロトコルで、HTMLファ
イルをダウンロードして、内容を表示します。
 HTMLに動きをつけるため、JavaScriptを実行する
ことが出来、UIも実装することが出来ます。
 Webブラウザー側がUIのような動的な内容でも、
Webサーバー側のファイルは静的でよい。
 μKadecotのWebサーバーは、静的なファイルを提
供し、Webブラウザー側で動的に動くUIとして、
作っています。
 WebSocketで通信し続けることで、UIはWebサー
バーからの通知を受けることが出来ます。
3
通信の中身
 WireSharkでTCPの通信内容を見ると
4
HTTPリクエスト
WebSocketのセッショ
ン開始が要求される
HTTPレスポンス
WebSocketのセッショ
ンを開始したところ
WebSocketの通信内容
HTTPヘッダ
 HTTPは文字による通信なので、ヘッダにあるパラ
メータの値を取り出すためにはパーサーが必要
5
HTTPパーサーで通信に必
要な情報を取得
HTTPのTCPセッションを
そのまま継続し、
WebSocketとして通信を
継続する
GET / HTTP/1.1
Host: 192.168.2.110:41314
Sec-WebSocket-Version: 13
Origin: http://app.kadecot.net
Sec-WebSocket-Protcol: wamp.2.json
Sec-WebSocket-Extensions: permessage-define
Sec-WebSocket-Key: miKP7cdGJu5CJsgeTvCW2w==
Upgrade: websocket
HTTP/1.1 101 Switching Protcols
Upgrade: websocket
Connection: keep-alive, Upgrade
Sec-WebSocket-Accept: rWDVozzBDYmdw1WbQ6QTT9Ijs6I=
Sec-WebSocket-Protcol: wamp.2.json
HTTPリクエスト
HTTPレスポンス
WebSocket
 WebSocketはフレーム単位に区切られたデータが送
られる
6
F
I
N
R
S
V
1
R
S
V
2
R
S
V
3
opcode
M
A
S
K
Payload len
Extended Payload length
(if payload len == 126 or 127)
Extended Payload length continued, if payload len == 127
Masking-key, if MASK set to 1
Masking-key (continued) Payload Data
Payload Data continued ...
ヘッダ ペイロード
クライアントからサーバーへのペイロードデータはマスクする
WebSocketのデータ
 WebSocketのペイロードデータに決まりはなく、自
由
 UIとの通信として使用するので、UIからの要求で
Webサーバー側で処理を実行したい。
 RPC(リモート・プロシージャ・コール)
 Webサーバー側で起きたことを、ユーザーへ通知し
たい。
 Pub/Sub(パブリッシュ・サブスクライブ)
 Kadecot APIでは、WAMPという手順で、RPCと
Pub/Subを実現しています。
7
Kadecot API
 WAMPはJSON形式のデータで、データの中身の書
き方や手順を決めている
 WAMPの手順で、プロシージャ名やパラメータの使
い方を決めたものがKadecot API
8
[
CALL,
Request|id,
{
"deviceId": 1
},
"com.sonycsl.kadecot.echonetlite.procedure.set",
[],
{
"propertyName": "OperationStatus",
"propertyValue": [48]
}
]
Kadecot API
JSONパーサーで通信に必要
な情報を取得
ECHONET Liteとの対応
 ECHONET Liteは機器オブジェクトやそのプロパ
ティに対して数値が割り振られています。
 Webブラウザー側のJavaScriptでは、数値より文字
列を使うのが一般的。
 Kadecot APIでは、ECHONET Liteの機器オブジェ
クトとプロパティについて、数値ではなく文字列で
識別するようになっています。
9
動作状態(OperationStatus)=0x80
[CALL, …, “OperationStatus”: 48]
文字列数値相互変換
 μKadecotは、Kadecot APIの文字列による命令を、
ECHONET Liteの数値に変換する処理を持ちます。
 また、ECHONET Liteでの応答や通知を、Kadecot
APIで使用する文字列に変換する処理も必要です。
 この文字列数値相互変換は、文字列ツリーで数値を
持つことで、実現しています。
10
Op erat
tion
ionStutas
er
0x80
0x81
0x82
通信レイヤー
 Kadecot APIは複数の通信レイヤーの上でやり取り
する
11
Webブラウザ μKadecot
TCP
HTTP
WebSocket
WAMP/JSON
Kadecot API
[CALL, …]
[RESULT, …]
通信レイヤーの処理
 各通信レイヤーを処理するソフトが必要
12
TOPPERS /SSP
uIP
Jsonsl
TOPPERS /ECNLhttp-parser
H/W依存部
WAMP
アプリWebSocket
Kadecot API
TCP UDP
ECHONET Lite機器を操作する
RPCとPub/SubのJSON表現を提供
JSON形式通信データのパーサー
HTTPのセッションを継続利用して通信
HTTPヘッダーのパーサー
TCP/IPプロトコルスタック
対応関係
 通信レイヤーと各ソフトの対応
13
μKadecot
TCP
HTTP
WebSocket
WAMP/JSON
Kadecot API
[CALL, …]
[RESULT, …]
TOPPERS /SSP
uIP
Jsonsl
http-parser
H/W依存部
WAMP
WebSocket
Kadecot API
TCP
ソフト構成
14
 いくつかのオープンソースを使用しています
TOPPERS/SSP RTOS
TOPPERS/ECNL ECHONET Lite通信ミドルウェア
Petit FatFS 内蔵ROM、SDカード用ファイルシステム
uIP TCP/IPプロトコルスタック、DHCPクライアント、
HTTPサーバー
JSONSL JSONパーサー
http-parser HTTPパーサー
mod_websocket WebSocket(base64,sha1を使用)
ファイル構成
 CubeSuite+のビルド環境になっています。
15
kadecot
jsonsl.*
main.*
csp
ecnl_ssp
src
ukadecot
kadecot_names.*
wamp*.*
pfatfs
arduino.*
data_flash.*
ssp
uip
CubeSuite+プロジェクトファイル
SSP版ECNL
Kadecot API/WAMP/JSON
JSONパーサー
Kadecotのクラス名とプロパティ名の処理
Kadecot API用WAMPの処理
内蔵ROMとSDカードのファイルシステム
アプリケーション
μKadecot
Arduino互換GPIO処理
CPU内蔵Flash-ROM用処理
ECHONET Liteコントローラー
TOPPERS/SSP
uIP TCP/IPプロトコルスタック
ファイル構成(つづき)
 SSPには待ちがないので、uIPを使用
16
apps
main.*
target
task
src
ukadecot
wamp*.*
pfatfs
arduino.*
data_flash.*
ssp
uip
webserver
dhcpc
websocket.*
sha1.*
http_parser.*
httpd*.*
base64.*
lib/net/sys
httpd-fs
Kadecot API用WAMPの処理
内蔵ROMとSDカードのファイルシステム
アプリケーション
μKadecot
Arduino互換GPIO処理
CPU内蔵Flash-ROM用処理
ECHONET Liteコントローラー
TOPPERS/SSP
uIP TCP/IPプロトコルスタック
IPアプリケーション
DHCPクライアント
Webサーバー
WebSocket用Base64
HTTPサーバー
HTTPパーサー
WebSocket用ハッシュ生成関数
WebSocketフレーム処理
内蔵Webコンテンツ
uIPの主な処理
uIPターゲット依存部
uIPを動作させるタスク
ASPとSSPの違い
 ASP版のそれぞれのタスクは、メールボックスの待
ちでメインループを作っている
 SSPには待ちがないので、uIPのプロトスレッドを使
用して、同じように記述している。
17
メールボックス メールボックス
Ethernet
ド
ラ
イ
バメールボックス
アプリケーション
ECHONET Lite 通信ミドルウェア
(TOPPERS/ASP TINET 含む)
ECHONET Lite
通信処理部
UDP通信処理部
(TINET)
18
#include <kernel.h>
/*
* メインタスク
*/
void main_task(intptr_t exinf)
{
ER ret;
TMO timer = TMO_FEVR;
intptr_t p_msg = 0;
for(;;){
/* 応答電文待ち */
ret = trcv_dtq(MAIN_DATAQUEUE, &p_msg, timer);
if ((ret != E_OK) && (ret != E_TMOUT)){
return;
}
/* メッセージ受信処理 */
if (ret == E_OK) {
}
/* タイムアウト処理 */
else if (ret == E_TMOUT) {
}
}
}
#include <kernel.h>
#include <uip.h>
#include <pt.h>
struct pt main_pt;
struct uip_timer main_pt_timer;
/*
* メインタスク
*/
static
PT_THREAD(main_task_pt(void))
{
ER ret;
TMO timer = TMO_FEVR;
intptr_t p_msg = 0;
PT_BEGIN(&main_pt);
for(;;){
timer_set(&main_pt_timer, timer);
/* 応答電文待ち */
PT_WAIT_UNTIL(&main_pt, (((ret = prcv_dtq(MAIN_DATAQUEUE, &p_msg)) == E_OK)
|| ((ret = timer_expired(&main_pt_timer) ? E_TMOUT : E_WBLK) == E_TMOUT)));
if ((ret != E_OK) && (ret != E_TMOUT)){
PT_EXIT(&main_pt);
}
/* メッセージ受信処理 */
if (ret == E_OK) {
}
/* タイムアウト処理 */
else if (ret == E_TMOUT) {
}
}
PT_END(&main_pt);
}
void main_task(intptr_t exinf)
{
main_task_pt();
}
ASPでのメインループ例 SSP+uIPでのメインループ例
プロトスレッドを使用
することで、ASPとの
差異が少ない記述
共通
uIPプロトスレッド
 PT_WAIT_UNTILを使うとポーリング関数でも、タ
イムアウト付きの関数のような動作をする
19
メッセージ受信待ち
メッセージ受信処理
メッセージ受信待ち
メッセージ受信処理
メッセージがない場合 メッセージがあった場合
メッセージ受信待ち
メッセージ受信処理
ASPの場合
メッセージが
来るまで待ち
関数を
リターン
処理に入る
タスク構成
 SSPではメールボックスがないのでデータキューに
変更
 データキューはポーリング方式のみなので、プロト
スレッドで、並列化
 Webサーバーは、uIPの作りなのでタスク化せず、
プロトスレッドで、並列化
20
データキュー データキューデータキュー
アプリケーション ECHONET Lite
通信処理部
UDP通信処理部
データキュー
Kadecot/WAMP
WebSocket
Webサーバー
uIP
ECNLコントローラ対応
 μKadecotのECNLは、コントローラ対応のための拡
張を行っています。
 インスタンスリスト通知を受信すると、他ノード
テーブルを更新し、新しいノードであった場合は、
テーブルに追加します。
 通知/SET/GETプロパティマップを受信すると、対
応した機器のプロパティマップを更新します。
 まだ、ノード内の機器構成が変わった時の処理を実
装していません。
21
今後の予定
 μKadecotでは以下が未実装なので、今後更新してい
きたい。
 WebSocketのPing/Pong処理(やり取りがしばらく
ない時に、通信を切れないようにするためのキープア
ライブ処理)
 WebSocketのバイナリ通信(テキスト通信のみ実装
している)
 ノード内の機器オブジェクトの更新処理
 SSL/TSLによる暗号化通信
 mrubyによる、バックグラウンド処理
22
23
ありがとうございました

More Related Content

Similar to Toppersカンファレンス2016・チュートリアル

WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリWebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリKohei Kadowaki
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Sho Ito
 
Web on Kernel
Web on KernelWeb on Kernel
Web on Kerneldynamis
 
マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?Microsoft
 
マルチクラウド環境でモビンギはどのようにコンテナを動かしているか
マルチクラウド環境でモビンギはどのようにコンテナを動かしているかマルチクラウド環境でモビンギはどのようにコンテナを動かしているか
マルチクラウド環境でモビンギはどのようにコンテナを動かしているかMasafumi Noguchi
 
ABC 2012 Spring Robot Summit
ABC 2012 Spring Robot Summit ABC 2012 Spring Robot Summit
ABC 2012 Spring Robot Summit 三七男 山本
 
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要いまさら聞けないHTML5概要
いまさら聞けないHTML5概要yoshikawa_t
 
Cocoa勉強会#42-UIWebKitをコンポーネントとして使う
Cocoa勉強会#42-UIWebKitをコンポーネントとして使うCocoa勉強会#42-UIWebKitをコンポーネントとして使う
Cocoa勉強会#42-UIWebKitをコンポーネントとして使うMasayuki Nii
 
再入門、サーバープッシュ技術
再入門、サーバープッシュ技術再入門、サーバープッシュ技術
再入門、サーバープッシュ技術Shin Sekaryo
 
【17-A-5】ウェブアーキテクチャの歴史と未来
【17-A-5】ウェブアーキテクチャの歴史と未来【17-A-5】ウェブアーキテクチャの歴史と未来
【17-A-5】ウェブアーキテクチャの歴史と未来Developers Summit
 
Vuzix Developer Conference
Vuzix Developer ConferenceVuzix Developer Conference
Vuzix Developer ConferenceKeiji Ariyama
 
Interactive connection2
Interactive connection2Interactive connection2
Interactive connection2Takao Tetsuro
 
2 TomcatによるWebアプリケーションサーバ構築 第1章 Tomcatのインストールと設定
2 TomcatによるWebアプリケーションサーバ構築 第1章 Tomcatのインストールと設定2 TomcatによるWebアプリケーションサーバ構築 第1章 Tomcatのインストールと設定
2 TomcatによるWebアプリケーションサーバ構築 第1章 Tomcatのインストールと設定Enpel
 
Kilimanjaro Event
Kilimanjaro EventKilimanjaro Event
Kilimanjaro Eventdynamis
 
Lesson01
Lesson01Lesson01
Lesson01MRI
 
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~Oda Shinsuke
 
Browser and Mozilla
Browser and MozillaBrowser and Mozilla
Browser and Mozilladynamis
 
レポート
レポートレポート
レポートxin song
 
20180510_ICON技術セミナー5_芦村
20180510_ICON技術セミナー5_芦村20180510_ICON技術セミナー5_芦村
20180510_ICON技術セミナー5_芦村ICT_CONNECT_21
 

Similar to Toppersカンファレンス2016・チュートリアル (20)

WebRTC再び
WebRTC再びWebRTC再び
WebRTC再び
 
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリWebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
 
Web on Kernel
Web on KernelWeb on Kernel
Web on Kernel
 
マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?
 
マルチクラウド環境でモビンギはどのようにコンテナを動かしているか
マルチクラウド環境でモビンギはどのようにコンテナを動かしているかマルチクラウド環境でモビンギはどのようにコンテナを動かしているか
マルチクラウド環境でモビンギはどのようにコンテナを動かしているか
 
ABC 2012 Spring Robot Summit
ABC 2012 Spring Robot Summit ABC 2012 Spring Robot Summit
ABC 2012 Spring Robot Summit
 
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
 
Cocoa勉強会#42-UIWebKitをコンポーネントとして使う
Cocoa勉強会#42-UIWebKitをコンポーネントとして使うCocoa勉強会#42-UIWebKitをコンポーネントとして使う
Cocoa勉強会#42-UIWebKitをコンポーネントとして使う
 
再入門、サーバープッシュ技術
再入門、サーバープッシュ技術再入門、サーバープッシュ技術
再入門、サーバープッシュ技術
 
【17-A-5】ウェブアーキテクチャの歴史と未来
【17-A-5】ウェブアーキテクチャの歴史と未来【17-A-5】ウェブアーキテクチャの歴史と未来
【17-A-5】ウェブアーキテクチャの歴史と未来
 
Vuzix Developer Conference
Vuzix Developer ConferenceVuzix Developer Conference
Vuzix Developer Conference
 
Interactive connection2
Interactive connection2Interactive connection2
Interactive connection2
 
2 TomcatによるWebアプリケーションサーバ構築 第1章 Tomcatのインストールと設定
2 TomcatによるWebアプリケーションサーバ構築 第1章 Tomcatのインストールと設定2 TomcatによるWebアプリケーションサーバ構築 第1章 Tomcatのインストールと設定
2 TomcatによるWebアプリケーションサーバ構築 第1章 Tomcatのインストールと設定
 
Kilimanjaro Event
Kilimanjaro EventKilimanjaro Event
Kilimanjaro Event
 
Lesson01
Lesson01Lesson01
Lesson01
 
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~
 
Browser and Mozilla
Browser and MozillaBrowser and Mozilla
Browser and Mozilla
 
レポート
レポートレポート
レポート
 
20180510_ICON技術セミナー5_芦村
20180510_ICON技術セミナー5_芦村20180510_ICON技術セミナー5_芦村
20180510_ICON技術セミナー5_芦村
 

Toppersカンファレンス2016・チュートリアル

Editor's Notes

  1. ありがとうございました。