首先想说的是，web 开发者玩些机器人传感器硬件啥的，并不是新鲜话题或者技术，但作为已入行前端多年的我，第一次接触并且做到的时候，也是非常兴奋的。第一次在简书创作，请各位同道前辈多多包涵指教，先谢了！
对于一个 web 开发者，这些年感受最深最多的，恐怕就是前端开发世界的“善变”，变化让人深受其累，但同时也充分说明前端世界极其活跃。这些迫使让人习以为常的变化，就好比过山车，既让人忐忑，又带人一路快速领略风光无限。
这不，时下一大波物联网、人工智能、机器人的又开始抬头，而且势头强劲地从台面跑到台下并介入到我们的生活中来了。前端人以其与生俱来的危机感，一面左眼深陷 react 代码、手不离“键”，一面右眼时不时瞟一下 TensorFlow、SLAM 什么鬼的暗自骂道：我靠！
路漫漫其修远兮，吾常默念勿放弃。
好了以上就是作为一名 JSer 的我的纠结和废话。一开始入行前端时，谁也没想到除了页面 pages 之外还有什么其他高大上的东西是前端可以做的。既然这样，那么用 web 技术去操控机器人应该是个比较麻烦的事吧？
——任何麻烦的事，可以归纳并映射到写代码上大概是：
- 门槛太高，壁垒太硬 ——> 技术栈不具备，且短时间难以触及
- 琐碎太多，路途迂回 ——> 要做的事太多，比如啃一堆 8 级英文文档
- 敌强我弱，难以战胜 ——> 写得少、见得少，对付不了一个项目的十八般武艺
但在本文所介绍 sensorium.js 库看来，这些麻烦事早就被“铲平”了，借助它，web 开发者能轻松（如果你不轻松一定记得发邮件反馈2333~）地通过手中的 JavaScript 代码控制机器人，体验代码控制物理世界的快感！
web 设施
一个非常弱的前提：会 ajax，会用 promise.then() 回调（照实例写甚至不用会...），会用 npm 安装个 sensorium.js 包到你的项目根目录
npm install sensorium --save
如果有淘宝镜像，你自然会加个c，比如这样cnpm install sensorium --save 下载安装得更快。安装 OK 后开始铺代码。
三步创建好主控板实例对象
// 获取一个 sensorium 实例
var sensorium = new Sensorium();
// 设定一个通信通道
var xhr = new XMLHttpRequest();
sensorium.setTransport({
send: function(buf) {
let host = 'http://127.0.0.1:8800';
var data = '/?buf='+ JSON.stringify(buf);
xhr.open("GET", host + data ,true);
xhr.send(null);
},
onReceived: function(pipe) {
xhr.onreadystatechange = function(e) {
if (this.readyState == 4 && this.status == 200) {
let binaStr = this.response;
pipe(JSON.parse(binaStr).data);
}
};
}
});
// 获取一个主控板实例
// var mcore = sensorium.createMcore();
// 好了，主控板实例已经成功获取
// 接下来看这个对象能干嘛
操控机器人
简单的理解，主控板就是主电路板，每台计算机上都有，机器人也由它作为控制中心。机器人身上搭载的各种传感器、电子元件比如 LED 灯、电机、舵机等等，构成了机器人本身，机器人凭借这些部件，在程序的控制下就能完成特定的任务。
——上面貌似已经涉及到硬件上的东西了，不过也只作为一个简单的理解，只需保留这样一个概念即可。最后只要知道上面 js 代码的 mcore 就代表了机器人的一种主控板就好了。在这个“主控板”中，用以下代码来控制机器人完成一些任务。
// 点亮主控板上的 LED 灯为绿色
var mcore.RgbLedOnBoard().g(200).turnOn();
// 读取超声波测距
mcore.Ultrasonic(3).getData().then(val => console.log(val));
// 控制左右电机（如果接上了的话）以 200 的速度前进
mcore.VirtualJoystick().leftSpeed(200).rightSpeed(200).run()
一路链式调用，就是这么简单！
sensorium.js 简介
sensorium.js 库本身提供了更多的 API 来驱动各种各样的传感器，所以拿到传感器，各种组合，玩法就超多~这是后话。如果您已经搭建了基本的页面，并且完成主控板的实例化，那么（win: F12 或 mac: win+alt+j）打开浏览器（chrome）控制台，输入 mcore. 就能以快捷方式查看到 mcore 主控板所支持的所有 API，比如罗盘、火焰、陀螺仪等等：
sensorium.js 本身也就是这么简单易用，在 API 设计之初就是让大家无需知道领域知识，也能凭“直觉”轻巧的用起来（还是那句话，要是用得不轻松一定记得发邮件反馈，先谢啦2333~）
到现在为止，算是告了一段落。但是 “web 设施” 其实还没有建成通车，且不说老师傅，就是年轻的司机也能一眼看出来：就凭你上面那些玩意，这车就能开了？还有机器人在哪？
开启一个小后台服务
明眼人很快看出来，上面用了 ajax，但属于一厢情愿，没有后台来处理，ajax 有诉难求。
所以，除了上面安装的 sensorium 库，这里还得装一个库
sensorium-server.js 作为 ajax 的服务器来用。
npm install sensorium-server -g
建议用 -g 全局安装它，这样允许您可以在任何目录下开启这个服务。
请耐心等待下这个库的下载安装，因为里头依赖了一个 serialport.js 库，该库包含了一个 node-pre-gyp ，文件较大。
sensorium-server.js 简介
我们就着它安装的时候，简单介绍下 sensorium-server.js 库。
sensorium-server 是个简单职责单一甚至简陋的库，这也是子标题说是个“小后台服务”的原因。它的主要业务逻辑及用途是：
- 借助 nodejs 创建一个简单的
http服务器 -
http服务器主要负责将前端的 ajax 请求过来的数据转发给 serialport.js，并由 serialport.js 完成对主控板（mcore）的 I/O 操作，同时会将读取的传感器的值返回给http服务器 。 -
http服务器将接收到的读值再响应给前端 ajax - 打印来往消息日志
其实说白了，就是 web 或者说浏览器没办法直接连通机器人，操作硬件，所以中间就插一道 nodejs，让 nodejs 来带为处理，并且 nodejs 每处理一次请求都会打印一次日志，方便 web 开发者 debug。
至于它简陋，是现在只接受 GET 请求，以及只能接受简单的命令行参数配置比如 stopReq 表示禁止打印请求消息。后续会抽时间把这个库完善下，毕竟这么残破的库真不好意思占用一个 npm 仓位。。
提交 sensorium-server.js 这个库的目的，就是方便 web 开发者直接在浏览器中就能调试机器人，铲平 web 连通机器人的最后一道障碍。
但不得不声明的是，笔者找了一些同类库（如大名鼎鼎的 http-server）但是又实在没有谁提供这样的功能，于是半造轮子半创作下，快速写出来这个库，可能有一些未知 bug，但我保证自己用来是 ok 的。
好，看看命令行窗口，正常网速下，应该已经下载并安装好了。接下来于命令行中，在任何文件目录下开启这个服务：
sensorium-server
或者简写成这样：
ss
当看到命令行中打印出以下信息，就说明服务正常开启了：
Starting up http-server, serving 8800
http://127.0.0.1:8800
Hit CTRL + C to stop the server
开启了这个服务，你就无需关注通信传输部分了，只要借助 sensorium.js 提供的 API 专注于您前端代码即可。
至此，web 开发者已经完成了 “web 设施“ 的建设，也完成了 90% 的工作量。常言 “行百里半九十”，《纯web技术玩转机器人？（下篇）》将带您开完最后 10 里路。拜拜~
