纯web技术玩转机器人？（上篇）

首先想说的是，web 开发者玩些机器人传感器硬件啥的，并不是新鲜话题或者技术，但作为已入行前端多年的我，第一次接触并且做到的时候，也是非常兴奋的。第一次在简书创作，请各位同道前辈多多包涵指教，先谢了！

对于一个 web 开发者，这些年感受最深最多的，恐怕就是前端开发世界的“善变”，变化让人深受其累，但同时也充分说明前端世界极其活跃。这些迫使让人习以为常的变化，就好比过山车，既让人忐忑，又带人一路快速领略风光无限。

这不，时下一大波物联网、人工智能、机器人的又开始抬头，而且势头强劲地从台面跑到台下并介入到我们的生活中来了。前端人以其与生俱来的危机感，一面左眼深陷 react 代码、手不离“键”，一面右眼时不时瞟一下 TensorFlow、SLAM 什么鬼的暗自骂道：我靠！

路漫漫其修远兮，吾常默念勿放弃。

好了以上就是作为一名 JSer 的我的纠结和废话。一开始入行前端时，谁也没想到除了页面 pages 之外还有什么其他高大上的东西是前端可以做的。既然这样，那么用 web 技术去操控机器人应该是个比较麻烦的事吧？

——任何麻烦的事，可以归纳并映射到写代码上大概是：

• 门槛太高，壁垒太硬 ——> 技术栈不具备，且短时间难以触及
• 琐碎太多，路途迂回 ——> 要做的事太多，比如啃一堆 8 级英文文档
• 敌强我弱，难以战胜 ——> 写得少、见得少，对付不了一个项目的十八般武艺

web 设施

三步创建好主控板实例对象

// 获取一个 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 简介

到现在为止，算是告了一段落。但是 “web 设施” 其实还没有建成通车，且不说老师傅，就是年轻的司机也能一眼看出来：就凭你上面那些玩意，这车就能开了？还有机器人在哪？

开启一个小后台服务

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
或者简写成这样：
ss
当看到命令行中打印出以下信息，就说明服务正常开启了：

Starting up http-server, serving 8800
  http://127.0.0.1:8800
Hit CTRL + C to stop the server

至此，web 开发者已经完成了 “web 设施“ 的建设，也完成了 90% 的工作量。常言 “行百里半九十”，《纯web技术玩转机器人？（下篇）》将带您开完最后 10 里路。拜拜~