基於Ngrok內網穿刺實現web端控制樹莓派IO口。

基於Ngrok內網穿刺實現web端控制樹莓派IO口。

Ngrok服務

1.1 參考

註冊Ngrok賬號


開通隧道，可以選擇免費的，也可以付費購買


購買之後會生成id號


對於去下載樹莓派上使用的服務端


上傳至樹莓派上並解壓，本文放置路徑/home/pi/

解壓後進入目錄，會發現有一個可執行文件——“sunny”,執行命令"./sunny clientid <你的Ngrok隧道id>"進入下面界面，顯示在線，說明服務部署成功。此時等到執行後面的index.py文件

2 樹莓派本地網頁準備

2.1 代碼編寫

本文想實現通過web遠程控制樹莓派，效果圖如下：


點擊函數通過正則表達式篩選出點擊的按鍵，並通過$(post)將請求傳至後臺腳本index.py

 $(function () {

                   $(".btn-trigger").click(function (){

                       var text = $(this).text().replace(/ /g, "").replace(/\n/g, "").replace(/\r/g, "").replace(/\t/g, "");

                       var cmd = "";

                       switch(text){

                           case "空調開":

                               cmd = "空調開";

                               break;

                           case "空調關":

                               cmd = "空調關";

                               break;

                           case "臥室燈開":

                               cmd = "臥室燈開";

                               break;

                           case "臥室燈關":

                               cmd = "臥室燈關";

                               break;

                           case "排氣扇開":

                               cmd = "排氣扇開";

                               break;

                           case "排氣扇關":

                               cmd = "排氣扇關";

                               break;

                           case "冰箱開":

                               cmd = "冰箱開";

                               break;

                           case "冰箱關":

                               cmd = "冰箱關";

                               break;

                           case "電飯煲開":

                               cmd = "電飯煲開";

                               break;

                           case "電飯煲關":

                               cmd = "電飯煲關";

                               break;

                           case "加溼器開":

                               cmd = "加溼器開";

                               break;

                           case "加溼器關":

                               cmd = "加溼器關";

                               break;

                           case "窗簾開":

                               cmd = "窗簾開";

                               break;

                           case "窗簾關":

                               cmd = "窗簾關";

                               break;

                           case "電視機開":

                               cmd = "電視機開";

                               break;

                           case "電視機關":

                               cmd = "電視機關";

                               break;

                       }

                       if(confirm("確定要執行該命令嗎？")){

   $.post("/cmd",cmd,function(data,status){});

                       }

                   });

               })

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
from bottle import get,post,run,request,template

@get("/")
def index():
    return template("index")
@post("/cmd")
def cmd():
    print ("按下了按鈕: "+request.body.read().decode())

    return "OK"
run(host="0.0.0.0")

2.12執行

將index.html和index.py上傳到樹莓派某個文件夾下面，執行python3 index.py

3 運行效果

4 完整代碼地址

喜歡的可以給個star鼓勵一下~