IOT物聯網之ESP8266的世界: ESP8266應用篇：手機WiFi遙控密碼鎖

◎ 前言：

在之前的範例的中，我們曾設計一個以手機WiFi直接遙控一個使用ESP-01模組的繼電器板，然後再去控制一些較大電力的開關或是燈具等家電的例子，而這些設備的特性就是比較不需要考慮到隱密性或安全性的問題，如果要提高使用的安全性，只要把ESP8266的AP上加上一組比較長或者難記的連線密碼就應該可了！

如果我們想要把這個系統拿來控制公司單位或者公寓大樓的出入門戶，或者是常見的置物櫃及電鎖等設備時，安全性就不太夠了！因此本單元打算把之前的手機遙控開關裝置，進階為具有密碼功能的控制系統，這樣一來就可以使用在一些需要比較高安全性的場合了。

由於我們使用的是所謂乾接點的繼電器去控制其他電子裝置，因此可以不受該裝置所使用的電源種類與消耗功率的限制，只要更改該裝置的種類，便可應用在許多不同的場所；例如接上電磁鎖，便可以使用在公寓大廈或者建築物的門禁管制上，或是公用的保管箱、置物櫃等。接下來就讓我們看看這個裝置具有的功能與動作內容。

◎ 系統功能與動作說明：

1、本系統使用ESP6266/ESP-01繼電器模組板設計一具密碼功能的無線WiFi遙控開關裝置，此裝置鎖使用的密碼可為數字或英文字母，且長度不限制。

2、使用者可使用任何一款具有無線WiFi介面的手機、平板電腦或筆記型電腦作為控制的裝置，只要該裝置內建有網頁瀏覽器即可，不必考慮該裝置的作業系統為何。

3、本裝置設計為一網頁的伺服器，當使用者連接上本裝置內建的網頁伺服器首頁時，在密碼輸入欄位鍵入正確的密碼後按下一【開啟(On)】按鈕，便可啟動繼電器動作一段特定的時間，然後再回復原來關閉的狀態，此繼電器動作的時間可依所驅動裝置的不同由設計者改變，且動作的結果會回傳到連線裝置瀏覽器的螢幕上讓使用者知道。

本次製作所使用的零件是目前市面上很流行的［ESP8266/ESP-01繼電器WiFi模組］，它的外觀如下面的【圖一】所示：

ESP-01_Relay

圖一、 ESP8266/ESP-01 WiFi繼電器模組外觀

在圖中左上方的是ESP8266/ESP-01 WiFi繼電器模組完整外觀，而右上方的照片是拿掉ESP-01後的零件上視圖，其中用紅線框起來標記１的部分是LED動作的指示LED燈，也是ESP-01這塊模組上的GP00腳；從照片中可看出模組上的繼電器接點可以承受10Amp的電流，其工作電壓交流可到250VAC，當使用在一般家庭的125VAC電源，也可以控制到1250Watt的功率，這麼大的功率對一般的應用來說應該是很夠了。

至於模組左上方標記２黃色8Pin的插座，是供ESP-01模組連接用的插座，如果參考下方的底視圖可得知，中間標記３綠色2Pin的接線栓是這塊模組的電源輸入腳，工作電壓是5V。至於右邊標記４綠色3Pin的接線栓則是模組上的繼電器輸出控制腳，這個繼電器是所謂的單刀雙擲(SPDT)型繼電器，其中的”COM”是共同腳，”NC”是常閉接點，而”NO”則是常開接點；至於要如何使用就依個人的需要了，一般來說是使用”COM”與”NO”腳，也就是不動作(Off)時兩個點是開路的，當按下開(ON)或啟動時才會連接在一起。

ESP-01s

圖二、 ESP-01S WiFi模組外觀與接腳名稱

【圖二】是ESP-01S WiFi模組的外觀與接腳名稱，ESP-01這個系列的模組板，可說是ESP8266這個WiFi單晶片的起家模組，由於便宜又容易使用，早就被許多業餘玩家或專業人士所廣泛使用；目前最新的版本是ESP-01S，不過接腳數目與功能還是跟以前一樣，其接腳編號與功能名稱如下：

GND ：ESP-01電源接地腳。
U0TXD/GPIO1 ：非同步串列傳輸埠(UART)0的發送腳。
GPIO2/U1TXD ：主要功能為輸出/入腳GPIO02。
CH_PD/Chip_EN ：晶片致能腳，燒錄時須接到VCC。
GPIO00 ：輸出/入腳GPIO00，燒錄時須接地。
EXT_RSTB ：晶片重置腳。
U0RXD/GPIO3 ：非同步串列傳輸埠(UART)0的接收腳。
VCC/3.3V ：ESP-01電源的+輸入腳，電壓為3.3V過高會燒毀。

【圖二】左邊ESP-01S模組板右下方用紅線框起來的地方，是併接在「GPIO2/U1TXD」腳的一顆LED顯示器，當燒錄程式時這顆LED會隨之閃爍，等燒錄完成後便可以拿來當成輸出/入腳使用。在燒錄ESP-01時，除了要接上與電腦連接的U0TXD (Pin2)與U0RXD(Pin7)之外，在接上電源之前CH_PD(Pin4)與GPIO00(Pin5)還必須分別接到VCC(Pin8/3.3V)及GND電位，否則會無法正常燒錄！由於ESP-01系列模組並不具有與電腦連接的介面，所以大多是使用USB轉UART/RS232模組來燒錄(如【圖三】所示)。

ESP-01燒錄接線圖2

圖三、使用USB轉UART模組燒錄ESP-01

不過對初學者來說還是經常會弄錯腳位，甚至接到5V的電源，以致於將ESP-01模組燒毀；為了一勞永逸，建議使用【圖四】所示的ESP-01專用USB轉UART燒錄模組，這樣既方便使用，又不必擔心把ESP-01燒壞了！

USB2ESP01

圖四、常見USB轉ESP-01 UART燒錄模組

在之前面的章節介紹過的ESP-202實驗模組板，也可以拿來燒錄ESP-01；下面的【圖五】介紹了ESP-202 WiFi模組板外觀接腳名稱，與連接ESP-01方法。如果把ESP-202當成ESP-01燒錄器使用，和原來作為實驗板的差別有兩點，一是標記１所示的兩個跳線接頭的位置，如果兩個接頭都在左邊是作為實驗板之用，此時程式會直接燒錄在板子上面的ESP8266郵票板；如果要拿來燒錄外接的ESP-01，那麼兩個跳線接頭都必須移到在右邊，不過此時標記２的兩個指撥開關的位置就必須撥在1下(OFF)2上(ON)的地方，這剛好和當成試驗板用時相反。

ESP-202_ESP-01

圖五、 ESP-202 WiFi模組板外觀接腳名稱與連接ESP-01方法

由於我們的系統裝置是使用瀏覽器來操作的，所以可以先寫一段html的網頁程式，在PC電腦上演練驗證無誤後，再移植到ESP8266上，下面的《WiFi_Locker.html》程式，便是此測試及驗證用的html程式。

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <meta name='viewport' content='width=device-width, initial-scale=1.0'/>

5. <meta charset='utf-8'>

6. <link rel='icon' href='data:,\'>

7. <style>body {font-size:140%;} #main {display:table; margin:auto;padding:0 10px 0 10px;}

8. h3,{text-align:center;} h4,{text-align:center;}

9. .button {padding:10px 10px 10px 10px; width:40%; background-color: pink;font-size:100%;}

10. .text1 {padding:5px 5px 5px 5px; width:40%; font-size:100%;}

11. .password {padding:5px 5px 5px 5px; width:60%; font-size:70%;}

12. </style>

13. </head>

14. <body>

15. <center>

16. <h3>[ 手機WiFi遙控密碼鎖：]<br><br>

17. 密碼鎖目前狀態 : 關閉(Off)<br></h3>

18.

19. <form ><h4>請輸入密碼 : <input class='text1' type='text' name='password' size='30'value=''>

20.　　　<br><br>

21.　　　<input class='button' type='submit' value='開啟(On)'></h4>

22. </form>

23. </center>

24. </body>

25. </html>

程式名稱：WiFi_Locker.html

在這個程式中我們使用html語法中的表單(form)標籤架構，來完成使用者的人機控制UI介面。所謂表單(form)是html語法中一種可以提供輸入的介面，可讓使用者輸入資料，然後將資料回傳給網路伺服器的一種元素元件，表單的建立包含兩個部份：

先使用<form>……</form>和<input>這兩個標籤元素建立我們所要的操作表單介面。
設計表單傳回資料的後端處理程式。

前面的html程式(“WiFi_Locker.html”)便是用來實現表單的第一個部份，當我們用電腦的瀏覽器開啟它時，可看到【圖六a】的畫面，其中標記１用紅色線框起來的部分是一個類別(class)為文字(text)的輸入(input)元素，在此可以輸入啟動繼電器用的密碼。而下方標記２文字為「開啟(On)」的按鈕，一看就可知道是控制繼電器啟動之用，是一個類別(class)為提交(submit)的元素，在被按下之後會把上面標記１中所輸入的文數字，傳送到由ESP8266所建構的網頁伺服器上。而標記３的「密碼鎖目前狀態 : 關閉(Off)」這段文字則是顯示目前ESP8266/ESP-01 WiFi繼電器模組上繼電器的狀態。

圖六a 、《WiFi_Locker.html》程式於電腦瀏覽器執行結果

要實現這樣一個網頁畫面，首先我們在程式的7~12行撰寫了一段CSS語法，用來定義送出(submit)用的按鈕(button) (第9行)與輸入用的文字(text1)元素(第10行)的外觀，其中按鈕”button”的顏色是粉紅色(pink)。至於第11行的「password」則是專為輸入密碼用的元素，會令使用者輸入的密碼值以《＊》符號取代，以達到提高隱密性的要求，為方便測試與驗證，在此暫我們不使用這個元素。

9. .button {padding:10px 10px 10px 10px; width:40%; background-color: pink;font-size:100%;}

10. .text1 {padding:5px 5px 5px 5px; width:40%; font-size:100%;}

11. .password {padding:5px 5px 5px 5px; width:60%; font-size:70%;}

【圖六a】畫面中所呈現的內容共有四個部分，是由程式16~22行所構成；最上面的一行是不會變動的提示文字[ 手機WiFi遙控密碼鎖：](第16行)，第二行標記３的「密碼鎖目前狀態 : 關閉(Off)」文字(第17行)是用來顯示密碼鎖目前的狀態，這部分的內容會隨著密碼鎖(繼電器)當下實際的狀態而改變；第三行則是標記２的按鈕(button)，在此是用來送出密碼以啟動密碼鎖(繼電器)，由於這個密碼鎖只有單一的啟動動作，所以這個按鈕的提示文字與顏色在使用的過程中不需要做任何改變。

接著的19~22行是<form>這個標籤的內容，必須以</form>結束，夾在中間的是<input>這個元素，<input>的種類有很多，例如”text”、”password”、”radio”、”submit”…..等等；在19行我們使用「text」這個元素作為密碼輸入之而，且也給這個元素設定了”password”這樣的變數名稱(不是前面提到的「password」元素)；至於21行則是定義了一個”submit”按鈕元素，也就是所謂的送出或提交按鈕，。

16. <h3>[ 手機WiFi遙控密碼鎖：]<br><br>

17. 密碼鎖目前狀態 : 關閉(Off)<br></h3>

18.

19. <form ><h4>請輸入密碼 : <input class='text1' type='text' name='password' size='30'value=''>

20.　　　<br><br>

21.　　　<input class='button' type='submit' value='開啟(On)'></h4>

22. </form>

下面這段html語法程式的意思是設定按鈕種類作為提交(type=’submit’)之用，按鈕上的提示文字(value)為【開啟(On)】，而按鈕的外觀長相(class)就是前面提到的CSS所定義底色是粉紅的’button’。

這個按鈕被按下時會把第19行文字欄(“text”)所輸入的密碼內容提交回傳給我們的ESP8266網頁伺服器，而且它的變數名稱(即”password”)也會一併被送出，這樣一來由ESP8266所構成的表單傳回資料的後端處理程式，便可辨識出這筆資料是使用者所輸入的密碼！

當手機實際連接上ESP8266所構成的伺服器時，首先會看前面的【圖六a】這個螢幕畫面，當使用者輸入密碼(標記１)，並按下【開啟(On)】按鈕將密碼送出後，如果密碼錯誤將會看到【圖六b】的密碼輸入錯誤回應畫面，其中標記２的「輸入密碼錯誤!」文字訊息就是用來告知使用者輸入的密碼不正確。假如密碼是正確的，則會出現【圖六c】的畫面，和【圖六a】畫面來比較，差別只有標記１的訊息變成「密碼鎖目前狀態 : 開啟(On)」而已。由於一般門禁或櫥櫃之類的裝置，使用的都是所謂的電磁鎖，它們共通的特點就是在作動時只會啟動一段短暫的時間，因此我們的系統的繼電器也必須設計成只動作一段短暫的時間，所以畫面看到密碼鎖已經開啟的訊息，並不代表繼電器還在啟動！

圖六b、密碼輸入錯誤回應畫面

圖六c、密碼正確電鎖啟動畫面

◎ 程式列表與說明：

#include <ESP8266WiFi.h>
//----------------------------------------------
// 將我們的HTML 網頁程式內容直接建構在program memory內:
const char MAIN_page[] PROGMEM = R"=====(
HTTP/1.1 200 OK
Content-Type:text/html
Connection: close
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
<meta charset='utf-8'>
<link rel='icon' href='data:,\'>
<style>body {font-size:140%;} #main {display:table; margin:auto;padding:0 10px 0 10px;}
h3,{text-align:center;} h4,{text-align:center;}
.button {padding:10px 10px 10px 10px; width:40%; background-color: pink; font-size:100%;}
.text1 {padding:5px 5px 5px 5px; width:40%; font-size:100%;}
.password {padding:5px 5px 5px 5px; width:60%; font-size:70%;}
</style>
</head>
<body>
<center>
<h3>[ 手機WiFi遙控密碼鎖：]<br><br>
)=====";
//---------------------------------------------------
const char* softSsid = "ESP_softAP002";
const char* password = "12345678";
const byte LED_Pin=2;
String URI;
int lockOnTime=1000;
String lockerPW="123321";
String html_Echo="";
String lockOff="密碼鎖目前狀態 : 關閉(Off)<br><h3/>";
String lockOn="密碼鎖目前狀態 : 開啟(On)<br><h3/>";
String passwordError="密碼輸入錯誤!!";
String formStart="<form ><h3>請輸入密碼 : <input class='text1' type='text' name='password' size='30' value=''><br><br>";
String pageEnd="<input class='button' type='submit' value='開啟(On)'></h4></form></center></body></html>";
WiFiServer server(80);
WiFiClient client;
void setup() {
// put your setup code here, to run once:
pinMode(LED_Pin,OUTPUT);
digitalWrite(LED_Pin,1);
Serial.begin(115200);
Serial.println();
Serial.print("Setting soft-AP with configuratin... ");
// WiFi.softAPConfig(local_IP,gateway,subnet);
boolean result=WiFi.softAP(softSsid,password);
if(!result)
{
Serial.println("soft-AP failed");
for(;;)
{
digitalWrite(LED_Pin,0);
delay(200);
digitalWrite(LED_Pin,1);
delay(200);
}
}
Serial.println("soft-AP ready!");
Serial.print("softAP = ");
Serial.println(softSsid);
Serial.print("softIP = ");
Serial.println(WiFi.softAPIP());
server.begin();
}
void loop() {
client=server.available();
if(!client)
return;
URI=Get_URI(); // 取得客戶端GET請求內容全部轉成大寫
Serial.println("Request end!");
Serial.print("Uri = ");
Serial.println(URI);
if(URI.indexOf("PASSWORD")>0)
checkPassword();
else
handleRoot();
delay(50);
}
// 網頁首頁副程式:
void handleRoot(){
String s=MAIN_page;
s+=lockOff;
s+=formStart;
s+=pageEnd;
client.println(s);
client.println();
Serial.println("Client is connected!");
Serial.println();
} // 網頁首頁副程式結束
// 密碼檢查比對副程式:
void checkPassword() {
String pwWiFi=URI.substring(URI.indexOf("PASSWORD")+9);
pwWiFi.trim(); // 將密碼後的空格去除
Serial.print("密碼值為 : [");
Serial.print(pwWiFi);
Serial.println("]");
String s=MAIN_page;
if(pwWiFi.equals(lockerPW))
{
s+=lockOn;
}
else
{
s+=passwordError;
Serial.println("密碼錯誤!");
}
s+=formStart;
s+=pageEnd;
client.println(s);
client.println();
if(pwWiFi.equals(lockerPW))
{
digitalWrite(LED_Pin,0);
delay(lockOnTime);
digitalWrite(LED_Pin,1);
}
Serial.println("密碼處理完成");
Serial.println();
}
// URI接收副程式:
String Get_URI()
{
// WiFiClient client;
String request="",Uri="";
while(client.connected())
{ // 等待第一行"GET"請求結束
Uri=client.readStringUntil('\r');
// Serial.println(Uri);
request+=Uri;
if(Uri=="\n")
break; // 第一行"GET"請求結束,結束while等待迴圈
}
client.flush();
request.toUpperCase(); // 將GET請求內容全部轉成大寫
Uri=request.substring(request.indexOf("/"),request.indexOf("HTTP/"));
Serial.println("客戶端發送結束!");
Serial.print("URI內容-->[ ");
Serial.print(Uri);
Serial.println("]");
Serial.println();
return Uri;
} // Get_Uri()副程式結束

程式名稱：softAP_6_5_1Led6_RY0.ino

◎ 程式說明：

為了程式相容性的問題，在這個製作的範例程式中我們只引用了<ESP8266WiFi.h>這個最基礎的函式庫而已；接著的5~28行是在實作《WiFi_Locker.html》這個html網頁程式的前半段(1~16行)，由於整個螢幕畫面實際上只有回應訊息會變動，所以我們把密碼電鎖回應訊息的html語言部分，以下面“lockOn”、”lockOff”及”passwordError”這三個html語法的字串變數來取代：

37. String lockOff="密碼鎖目前狀態 : 關閉(Off)<br><h3/>";

38. String lockOn="密碼鎖目前狀態 : 開啟(On)<br><h3/>";

39. String passwordError="密碼輸入錯誤!!";

程式的29~34行定義了一些系統使用到的變數，其中”lockOnTime”用來決定電鎖動作的時間，使用者可依所採用的電鎖種類去修改；而”lockerPW”這個變數則是密碼鎖的啟動密碼，在程式中是使用了六位數的數字，但由於它是字串型的變數，所以不管是文字或數字都可以使用，而且長度也沒有限制，只要能使用者能記得就好，不過一般來說超過六位數就不容易記住。

29. const char* softSsid = "ESP_softAP002"; // 軟體SSID名稱

30. const char* password = "12345678"; // SSID密碼

31. const byte LED_Pin=0; // 繼電器輸出控制腳位

32. String URI;

33. int lockOnTime=1000; // 電鎖動作時間

34. String lockerPW="123321"; // 密碼鎖密碼

至於《WiFi_Locker.html》這個html網頁程式的後半段(19~25行)，則由” formStart”和” pageEnd”這兩個字串變數負責完成。

40. String formStart="<form ><h3>請輸入密碼 : <input class='text1' type='text'

name='password' size='30' value=''><br><br>";

41. String pageEnd="<input class='button' type='submit' value='開啟(On)'></h4></form>

</center></body></html>";

至於初始化程式setup()(46~73行)部分和之前使用ESP-01繼電器的製作範例幾乎是一模一樣，請自行參考之前的文章，在此就不贅言。不過就像前面說過，因為是密碼鎖控制，應該要有比較高的安全性，所以在此我們就為ESP8266的AP分享點加上了連線密碼(即常數變數password=“12345678”)，使用者可依自己的喜好更改；除此之外，在實際的應用時，有些ESP8266模組如果自行設定本地的IP位址，有時會出現連線不穩定的狀況，因此本範例將原來的指令註解掉(53行)，這樣一來當系統啟動時，會使用ESP8266原來預設的『192.168.4.1』IP位址。

53. // WiFi.softAPConfig(local_IP,gateway,subnet);

54. boolean result=WiFi.softAP(softSsid,password);

主迴圈loop()程式部分(75~90行)只有短短不到20行而已，之所以會這麼精簡，主要是筆者把相關的動作寫成了三個副程式，這樣一來不管是在閱讀上或是維護上都會很容易；由於迴圈部分的程式已經很簡單了，所以就留給讀者自行閱覽，以便把說明重點放在這三個副程式上。

在之前的【六、3-1 GET請求的解析】一文中，曾經把一般手機瀏覽器在連上由ESP8266所建構的網頁伺服器時，會送出那些訊息或指令動作做了詳細的說明；在瀏覽器所傳來落落長的資料中(如【圖七】所示)，我們其實大多只有取用最前面一行的「GET」請求而已。可是由於無線WiFi網路傳輸的速度並不會每次都一樣，所以有時我們主要的動作都做完了，可是瀏覽器傳送的資料還沒完成，這些後續還傳送來的資料都會被我們的程式視為錯誤的指令，雖然說我們的系統不會錯誤的動作，可是這樣一來使用者的手機瀏覽器畫面便會一直看到指令錯誤的回應訊息！為了避免這種困擾，本範例特別設計一個副程式(即『Get_URI()』)去接收瀏覽器完整的傳送資訊，然後再取出其中的「GET」請求內容。

softAP3_webServer1

圖七、瀏覽器連線後傳送資料內容

『Get_URI()』(138~159行)是一個型別為字串(String)的副程式，在程式142~149行的while迴圈中，在每次接收完一行(由“URI”這個變數接收)資料後，除了會把這些資料合併在一起(即變數”request”)外，還會去測試該行是否為代表瀏覽器資料傳送結束的空行(即整行內容只有一個換行碼”\n”)，如果是便會結束這個while迴圈！

142. while(client.connected())

143. { // 等待第一行"GET"請求結束

144. Uri=client.readStringUntil('\r');

145. // Serial.println(Uri);

146. request+=Uri;

147. if(Uri=="\n") // 測試是否已經傳送完畢,即內容為空行

148. break; // 第一行"GET"請求結束,結束while等待迴圈

149. }

接著下面程式的前兩行會先把接收到的瀏覽器訊息內容全部改成大寫，然後再取出第一行的「GET」請求(放在變數”Uri”上)，並且在副程式的最後一行返回時回傳給呼叫者。

151. request.toUpperCase(); // 將GET請求內容全部轉成大寫

152. Uri=request.substring(request.indexOf("/"),request.indexOf("HTTP/"));

…………….

158. return Uri;

在主迴圈(loop())程式的第80行呼叫『Get_URI()』副程式取得瀏覽器的「GET」請求內容後，接著85~88行會依傳來的內容決定是呼叫網頁首頁副程式「handleRoot()」﹖還是密碼檢查副程式「checkPassword()」！

85. if(URI.indexOf("PASSWORD")>0)

86. checkPassword();

87. else

88. handleRoot();

「handleRoot()」這個副程式的主要功能，就是實作出前面提到在PC上作為驗證用的《WiFi_Locker.html》網頁程式，並送回給提出請求的客戶端裝置(也就是手機的瀏覽器)；實作的方式就是把”MAIN_page”、”lockOff”、”formStart”、”pageEnd”這幾個字串變數接合在一起(即字串變數“s”)便可得到和《WiFi_Locker.html》這個網頁程式一樣的內容，剩下的工作就是使用”client.println(s)”指令把它送回給客戶端了。

94. String s=MAIN_page;

95. s+=lockOff;

96. s+=formStart;

97. s+=pageEnd;

98. client.println(s);

99. client.println();

在說明密碼檢查副程式「checkPassword()」之前，我們先來看一下從使用者開始連線到輸入密碼，並按下[開啟(On)]按鍵後，我們的系統會收到什麼樣的內容﹖【圖八】是程式將相關的訊息顯示在電腦串列通訊埠的畫面，其中的標記１是系統的AP名稱(“ESP_softAP02”)，及本地伺服器的IP網址([ 192.168.4.1 ])，而標記２是瀏覽器連上系統網頁首頁所送來的”/”請求碼；至於標記３則是按下[開啟(On)]按鍵時所傳來的內容，其中包括密碼輸入元素”text”的名稱”password”，和密碼值本身(即”123321”)。

圖八、手機瀏覽器與密碼鎖伺服器傳輸內容顯示在序列通訊埠畫面

所以密碼檢查副程式「checkPassword()」一開始的前兩行，會將密碼值也就是字串”PASSWORD=”之後的內容取出來放到變數”pwWiFi”內，並且把密碼後面可能多打的空格去掉。

107. String pwWiFi=URI.substring(URI.indexOf("PASSWORD")+9);

108. pwWiFi.trim(); // 將密碼後的空格去除

接著的114~122行程式則會把取出的密碼("pwWiFi")和系統內定的密碼(“lockerPW”)作比對，如果完全正確，會回傳代表密碼正確的"lockOn"字串訊息，否則回傳密碼錯誤的”passwordError”字串，不管是那一種結果，最後都必須和”MAIN_page”、”formStart”、”pageEnd”這幾個字串變數接合在一起，才能完整的回傳給提出需求的客戶端(client)。

當然還有一件最重要的事要做，就是啟動電鎖，這個繼電器模組是使用ESP8266的GPIO00做為控制輸出腳，而且是以低態輸出來驅動繼電器；由於不同的應用場合可能使用不同種類的電鎖，而不同的電鎖作動時間也不一定相同，所以在程式中我們作動的時間是由”lockOnTime”這個系統變數來決定，設計者可依自己的需要去更改。

127. if(pwWiFi.equals(lockerPW))

128. {

129. digitalWrite(LED_Pin,0);

130. delay(lockOnTime);

131. digitalWrite(LED_Pin,1);

132. }

◎ 執行結果：

【圖九】是手機瀏覽器連線密碼鎖後的螢幕畫面，畫面中的最上面一行是『手機遙WiFi遙控密碼鎖』的提示訊息；因為是剛連上網頁的首頁，所以會看到標記１的網址輸入欄位列的內容是[ 192.168.4.1 ]，而第二行的提示訊息為『密碼鎖目前狀態：關閉(Off)』，至於控制用的按鈕上的提示文字則是[開啟(On)]，這和我們前面的規劃的【圖六a】畫面是一樣的。