树莓派制作空调遥控器2：在网页中控制空调

在树莓派上使用命令行控制空调，实在太麻烦了，还不如空调遥控器方便。如果能在手机上远程控制，就方便多了。

空调遥控器系列教程

一、《树莓派制作空调遥控器1：使用红外发射管制作空调遥控器》
二、树莓派制作空调遥控器2：在网页中调用树莓派控制空调
三、树莓派制作空调遥控器3: 天猫精灵控制空调

效果

网页做的比较简陋，大家可以根据自己的需求添加更多的按钮、美化界面。如下：

准备工作

完成了树莓派+红外发射管制作空调遥控器, 能够在树莓派上通过命令行控制空调的开、关等操作。
准备一台有公网IP的云服务器做中转，以便能够在外网访问树莓派，也可以使用其它方法做内网穿透。参考SSH端口转发原理和实战。

搭建Web服务器环境

本次实验使用 Nginx + PHP来制作空调控制器的网页。如果已经安装好了，可以跳过这一步。

安装Nginx

安装nginx:
sudo apt-get install nginx
安装完成后，网站根目录在/var/www/html, 编辑该目录下的index.nginx-debian.html文件，写入Hello, Nginx!。
测试是否安装成功：打开浏览器输入http://127.0.0.1，能看到刚刚编辑的Hello, Nginx!说明安装成功。或者使用命令行: curl 127.0.0.1 ，也能够输出Hello, Nginx!。

安装PHP

添加apt源。编辑apt源配置文件：
sudo vi /etc/apt/sources.list.d/raspi.list
在后面加入一行:
deb http://mirrordirector.raspbian.org/raspbian/ buster main contrib non-free rpi
更新软件包列表:
sudo apt update
安装PHP7.3:
sudo apt install -y -t buster php7.3-fpm php7.3-curl php7.3-gd php7.3-intl php7.3-mbstring php7.3-mysql php7.3-imap php7.3-opcache php7.3-sqlite3 php7.3-xml php7.3-xmlrpc php7.3-zip
安装过程中会提示某些服务需要重启，选择Yes即可。
测试是否安装成功:
php -v
如果显示php版本号，则安装成功，如下：

PHP 7.3.2-3 (cli) (built: Feb 8 2019 15:05:54) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.2, Copyright (c) 1998-2018 Zend Technologies
with Zend OPcache v7.3.2-3, Copyright (c) 1999-2018, by Zend Technologies

配置Nginx解析PHP

编辑Nginx配置文件sudo vi /etc/nginx/sites-enabled/default, 找到# pass PHP scripts to FastCGI server，在后面加入以下代码:
```
 location ~ \.php$ {   
     include snippets/fastcgi-php.conf;        
     fastcgi_pass unix:/run/php/php7.3-fpm.sock;    
}       
```
然后在index指令后面加上index.php，修改后文件内容如下：
修改配置后需要重新加载Nginx配置才能生效：
sudo nginx -s reload
测试解析PHP。创建一个文件/var/www/html/index.php，写入php代码:
```
 <?php  
 echo time();
```
保存后执行命令curl 127.0.0.1，返回时间戳即说明Nginx成功解析了php。

编写遥控器网页

目录结构

网页根目录在/var/www/html/，进入网页根目录，创建一个文件夹用于存储遥控器的网页:

cd /var/www/html
mkdir ac
cd ac

下面会创建index.html和controller.php两个文件，目录结构如下：

ac/
├── controller.php  // 控制空调开、关
└── index.html      // 遥控器界面

PHP代码控制空调

首先编写 controller.php文件：

<?php
// 获取从网页中获取遥控器的指令
$action = $_GET["action"];  

// 把遥控器的所有操作存到数组中
// 如果除了开、关，还有其它按钮，请加入到这个数组中
$actions = ['on', 'off'];   

// 如果传过来的操作，在上面数组中，则执行指令
if(in_array($action, $actions)){
    `irsend SEND_ONCE aircon {$action}`;
}

保存文件后，在浏览器中打开:

http://你的树莓派IP/ac/controller.php?action=on

如果一切正常，空调此时会“嘀”的一声，然后开启。同理，将on改成off即可关闭空调:

http://你的树莓派IP/ac/controller.php?action=off

遥控器界面

接下来编写HTML界面:

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>空调遥控器</title>
    <style>
        .btns {
            text-align: center;
        }
        .btn {
            width: 200px;
            height: 50px;
            margin-top: 30px;
            border: 1px solid #2ecc71;
            background-color: #fff;
            font-size: 18px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div class="btns">
    <button class="btn" onclick="ctrl('on')" style="color: #2ecc71;">打开空调</button>
    <button class="btn" onclick="ctrl('off')" style="color: #2ecc71;">关闭空调</button>
</div>
<img src="" alt="" id="test" style="display: none">
<script>
    function ctrl(action) {
        var img = document.getElementById('test');
        var rand = Math.random();
        img.src = 'controller.php?action='+action+"&r="+rand;
    }
</script>
</body>
</html>

这里偷懒了，没有写发送请求的JS，直接创建一个img标签，图片地址设置为控制空调的网址。
虽然最后图片加载失败，但是php被调用了。Anyway, It works.
在浏览器中打开:

http://你的树莓派IP/ac/index.html

点击对应按钮就可以控制空调啦，效果如下：

外网访问

完成以上网页后，只有跟树莓派同一个局域网内才能打开网页。本次实验使用一台云服务器，中转请求到树莓派上面，实现“内网穿透”。

在树莓派上执行:

1	ssh -NT -R :2009:127.0.0.1:80 root@111.111.111.111

其中root是云服务器的用户名，111.111.111.111改成云服务器的IP地址。
2009是在云服务器上开启一个端口，用于转发请求到树莓派。

接下来在浏览器中打开:

http://你的云服务器IP:2009/ac/index.html

即可看到熟悉的空调遥控器界面。