一、背景介绍
在播放PPT的时候，常常要去按键盘。这样很不方便。弯腰按键盘很影响播放ppt的效果。因此，大佬出场，通常有小弟在后面帮着按ppt。
不过如果没有小弟帮着按，就只能自己想办法了。最常见的，是有一种硬件，能实现PPT的遥控，它是这样的：
它分为2个部分，一个是usb适配器，插在电脑上。另一个部分是遥控器。通过2.4GHz去遥控，usb适配器会收到信号，并转化为虚拟按键。
二、如何自己做一个遥控器？
我曾经用过Attiny85做过类似的硬件遥控器，能实现上述效果。但是今天，介绍一种软件的方式。确切的说，是前端的方式。
前端还能做遥控？在以前是不能的。除非用socket，或者用express建立一个服务端的api。
但是现在，可以巧妙的借助服务端渲染来实现同样的效果。这个神器就是next.js。
next.js是服务端渲染（ssr）的react框架。它常用于商品展示或内容等页面，目的是为了让搜索引擎搜索到。
但其实，服务端渲染还有另一种用法，就是可以遥控。因为在服务端渲染时，是可以在服务端执行脚本的。
robot.js是一个自动化的node框架，原本用于自动化地进行UI操作，如定时打开浏览器发布微博、自动加好友等。
当next.js与robot.js结合后，就能实现用前端去遥控后端。
三、具体做法
1、建立一个名为 ppt_remote 的项目
npx create-next-app ppt_remote
2、安装 robotjs：
cd ppt_remote
npm install robotjs --save
3、启动：
npm run dev
4、打开pages/index.js，输入如下内容：
import robot from 'robotjs';
export default function Home() {
return (
<div className="container">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<button onClick={
()=>{
// robot.keyTap("up");
}
}>up</button>
<button onClick={
()=>{
// robot.keyTap("down");
}
}>down</button>
</main>
</div>
)
}
结果出现错误了
为什么会这样？
实际上原因是，next是服务端渲染的，但是在前端页面中的事件却并不能在服务端执行。因此，前端引入服务端的库，就会报错。
而next.js的结构中，api目录下的文件就是纯服务端的。因此，要把robotjs的功能，放在api文件夹下。
5、分别建立api/up.js 和 api/down.js
api/up.js
import robot from 'robotjs';
export default (req, res) => {
robot.keyTap("up");
res.statusCode = 200
res.json(true)
}
api/down.js
import robot from 'robotjs';
export default (req, res) => {
robot.keyTap("down");
res.statusCode = 200
res.json(true)
}
6、相应地，上下两个按钮的对应事件，则用fetch调用，另外，在index.js里移除import robot from 'robotjs';：
<button onClick={
()=>{
fetch('/api/up');
}
}>up</button>
<button onClick={
()=>{
fetch('/api/down');
}
}>down</button>
7、为了让next能在手机上访问，更改package.json：
"scripts": {
"dev": "next dev -H 0.0.0.0",
}
这样，绑定端口的则不是localhost，而是0.0.0.0
重新启动。
四、最终效果
在电脑上随便打开一个ppt，然后在手机浏览器里打开网页，即电脑的ip地址:3000，效果如下：
这样，就可以优雅地演讲ppt了，不必再跑到电脑前弯腰按键盘了。
