背景
在前一篇关于blockly的文章中，我参考了webduino对Web Speech的包装，并将其移植到blockly4pi中。
webduino对blockly的使用，有许多出彩的地方。这篇文章将简要对其核心部分做个分析，为了更深入地借鉴它的设计
入手
我买了webduino的smart模块，所以我们从最简单的案例入手：将smart的led灯设为红色
首先当然是将smart连上wifi，完成后它分配到网址:192.168.0.119（显示在wifi名称中）
接着我们拼搭出积木块
运行后，成功点亮红灯
分析
首先查看上边的积木生成的代码:
1
2
3
4
5
6
7
8
|
var rgbled;
boardReady({board: 'Smart', url: '192.168.0.119'}, function (board) {
board.systemReset();
board.samplingInterval = 50;
rgbled = getRGBLedCathode(board, 15, 12, 13);
rgbled.setColor('#ff0000');
});
|
可以看到webduino通过积木生成js代码, 然后运行js代码来控制start.(我的blockly4pi同时生成js和python)
容易看出,boardReady是浏览器与start通信的代理,接着我们进入源码,去跟踪boardReaety,它定义在这里
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
function boardReady(options, autoReconnect, callback) {
var callback = (typeof autoReconnect === 'function' ? autoReconnect : callback),
index = boards.length,
board = createBoard(options),
terminate = function () {
board = null;
delete boards[index];
boards.splice(index, 1);
if (autoReconnect === true) {
setTimeout(function () {
boardReady(options, autoReconnect, callback);
}, 5000);
}
};
board.once(webduino.BoardEvent.ERROR, function (err) {
if (board.isConnected) {
board.once(webduino.BoardEvent.DISCONNECT, terminate);
board.disconnect();
} else {
terminate();
}
});
board.once(webduino.BoardEvent.READY, callback);
boards.push(board);
}
|
其中board定义在Board
通过EventEmitter传递全局消息
休眠一秒
在js中休眠是个有趣的话题，我们知道js是非阻塞的,webduino使用await来实现(很新的特性，之后会通过babel来在浏览器里编译，后文再说)
对应的代码是
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
(async function () {
var rgbled;
boardReady({board: 'Smart', url: '192.168.0.119'}, async function (board) {
board.systemReset();
board.samplingInterval = 50;
await delay(1);
rgbled = getRGBLedCathode(board, 15, 12, 13);
rgbled.setColor('#ff0000');
});
}());
|
这部分很有意思，我们仅仅添加一个等待一秒的模块，生成的代码结构整体变了，新添加的模块并不特殊，它生成的代码为
1
2
3
4
5
|
Blockly.JavaScript['delay'] = function (block) {
var value_secs_ = Blockly.JavaScript.valueToCode(block, 'secs_', Blockly.JavaScript.ORDER_NONE);
var code = 'await delay(' + value_secs_ + ');\n';
return code;
};
|
可以推测，代码在generate之前有个预处理,大概是根据generate出来的代码里是够包含await关键字来处理，我们可以搜索源码来验证我们的想法:search await,果不其然
代码执行
早期
blockly-src/demos/code/code.js Code.runJS这个好理解,早期的做法，目前被废弃
早期的执行机制如注释中说的Just a quick and dirty eval，简单粗暴
1
2
3
4
5
6
7
|
var code = Blockly.JavaScript.workspaceToCode(Code.workspace);
Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
try {
eval(code);
} catch (e) {
alert(MSG['badCode'].replace('%1', e));
}
|
后来的机制颇为费解
后来的机制
我们可以从bindClick runButton追踪起、经过Code.reloadSandbox(),在这个函数中将模块generate为代码:Code.getContext,generate的过程会判断是否需要使用babel编译，如果需要会做好编辑，在之后的程序中用babel编译它:Code.transform
如此一来我们就得到了可在普通浏览器里运行的js代码,如果是早期的做法，至此丢到eval里就结束了，目前的做法要复杂些，把代码丢到一个iframe中跑,用到了iframe-api (本质上是window.postMessage)
一些核心步骤如下:
通信过程
websocket
我们先关注采用websocket的通信过程(本地运行)
onmessage handle定义了收到smart数据的回调
值得注意的是，数据的传输使用了二进制数据
之后通过事件系统发布消息,emit的定义之处在EventEmitter emit
ps:使用mqtt与云端通信的部分在这 MqttTransport.js
控制流
有了上边这些探索，我们可以挑战最后一个问题了，控制指令是如何抵达smart的，拿最初的例子来说，把点亮红灯积木块跑起来的时候发生了什么？
首先是积木生成对应的代码
1
2
|
rgbled = getRGBLedCathode(board, 15, 12, 13);
rgbled.setColor('#ff0000');
|
board我们在前头说过，检索源码发现getRGBLedCathode不过是对webduino.module.RGBLed的包装
于是我们到webduino-js继续探索.我们沿着rgbled.setColor('#ff0000');一路追踪下去，看到DataTransfer.js , webduino采用二进制来通信，发送数据的地方定义在send -> sendOut 在此我们可以看到数据的发送也是用的二进制（收发都是)
其他感兴趣的地方
与页面元素交互
demo_light_click generator
参考
