NODEMCU除錯心得6

阿新 • • 發佈：2019-01-13

關於網路協議 HTTP

按照約定，這次要講非常exciting的內容，網路協議Networking protocols。

這部分並不好寫，內容很龐雜，會分成若干部分。
網路協議我們在前面已經提及，TCP/IP協議就是最重要的網路協議。在AT指令和lua韌體的例程中，我們建立了TCP/IP的客戶端和伺服器，實現無線通訊和遠端控制。在電腦端，我們可以用TCP/IP的網路除錯助手，也可以用c++或python自己編寫客戶端和伺服器，和nodemcu通訊。

但是今天我們就要談談更exciting，也是應用最廣泛的網路協議：

超文字傳輸協議HTTP

對,就是你上網最先輸的那四個字母。

首先我們要把HTTP，TCP和IP的關係理一理，瞭解什麼是網路協議。

按慣例，為了保持文件的獨立性，先把關鍵資料放上。

資料篇

Nodemcu

Lua

網路協議

這兩本書是TCP/IP協議的經典之作，因為版權問題，恕在下不能給出連結
- computer networking, a top-down approach. Jim Kuross & Keith Ross

不少國外大學的制定教材，通俗易懂，入門必備
- TCP/IP Illustrated, Volume 1, The Protocols. W. Richard Stevens

被譽為網路聖經的第一卷，經典中的經典，網路工程師人手一本。不過內容組織上和上一本正相反，是從下到上

HTML和CSS

既然要講超文字傳輸協議，就不能不提超文字標記語言HTML，相信大家都有了解
- Head First HTML with CSS. Elisabeth Freeman & Eric Freeman.

本來學語言就很痛苦，還要看學霸白富美和高富帥秀恩愛，實在有點不能忍。

但是，這本書確實經典，在排行榜上一直領先。排版非常活剝，效果也不錯，可以很快上手

如果想更深入，可以看下面這兩本，主要針對HTML的具體樣式：CSS（層疊樣式表）：
- Css Mastery Advanced Web Standards Solutions. Andy Budd with Cameron Moll and Simon Collison
- CSS, the Definitive Guide.

Eric A. Meyer

HTTP 與網路協議

HyperText Transfer Protocol, HTTP

即超文字傳輸協議，是網際網路的核心。我們上網happy刷的網頁都是基於HTTP協議。

HTTP和Hypertext出現之前，網路只是用在大學和研究機構中，傳個實驗資料或資料什麼的，並沒有什麼WWW全球資訊網和花花綠綠的網頁。

所謂Hypertext超文字，就是一堆超連結組成的文字。比如說本教程前面提供了一堆資料連結，就可以算是超文字。
最常見的超文字就是網站網頁，通過超連結形成有組織和層級的資料庫

HTTP協議位於網路的頂層

，屬於應用層協議，凌駕於TCP（傳輸控制協議）和IP（網路協議）之上。

後兩者屬於傳輸層和網路層。傳輸層位於網路層之上。
網路層的再下一層是連連結層，主要是wifi，光纖燈物理裝置的驅動協議，實現與底層硬體的連線和控制。
最下一層就是物理層，也就是wifi，光纖，乙太網，路由器等硬體物理裝置。

以上就是網路協議的五層模型，

而TCP/IP協議簇

就是與五層網路模型配套的各層網路協議包。此外還有基於OSI模型的七層網路模型

簡單講， TCP/IP協議簇的運作模式

就是傳輸網路資訊的層層打包。

網路應用基於網路資訊的傳輸，實現客戶端與伺服器之間的互動。
位於最高層的應用發出書面指示。而最底層的硬體就是快遞員，負責把這封信給送出去。

為了實現某一功能，某伺服器的網路應用層（比如nodemcu）要向客戶端（比如手機上的瀏覽器）傳送一串資訊，指定資訊屬於HTTP協議。

資訊被應用層打包，資訊前加上應用層的標籤資訊，明確屬於哪種包裹（應用層協議除了HTTP，還有FTP，SMTP...）
傳輸層接到應用層指示，在客戶端和伺服器之間開闢一條傳輸通道，它把很長的資訊打包成一小段小一段，並且有一整套的校驗機制，確保資訊可靠傳送。

資料分割後二次打包，頭部附上響應傳輸層標籤,明確快遞收件人和寄件人，確定了快遞路線，控制寄件時間，並且監督快遞安全送達
網路層接到傳輸層指示，負責把資料從傳送端傳輸到接收端。傳送端和接收到都有唯一的IP地址，就像快遞收件地址和寄件地址。

資訊三次打包，加上IP資訊，明確收貨地址和寄件地址
有了收件地址和寄件地址，就需要這兩個地址派快遞員送信，就是伺服器nodemcu的wifi裝置和客戶端（手機）的wifi裝置。

資料四次打包，加上客戶端和服務端的wifi硬體資訊，明確誰是快遞員。
上述手續辦完之後，快遞員（硬體裝置）會忠於職守，把快遞送達。

lua韌體提供了對各層網路協議的支援，底層協議不用我們關心。我們要關注的是應用層的協議，或者再下一層的傳輸層協議。

應用層HTTP是基於傳輸層TCP協議的。與TCP傳輸一樣，HTTP也分為客戶端和伺服器端，這裡特指nodemcu作為HTTP的客戶端和伺服器。

lua韌體中有現成的HTTP客戶端模組，對於伺服器端，大部分需要自己編寫。接下來，我們就看一個HTTP伺服器例程。

Step 1

韌體資料夾中的HTTP示例程式我沒有除錯通過，因此我參考的是另一個版本的伺服器程式，程式包可以點這裡下載，檔名是dht11_webserver.lua。

為了介紹HTML，HTTP和TCP協議，我對原始碼進行了修改
- 示例程式是用TCP/IP協議實現的HTTP伺服器,在電腦和手機的瀏覽器裡輸入nodemcu的IP地址，就可以進入伺服器
- 本伺服器網頁，也就是HTML檔案，包括三個部分：標題，圖片和段落。每重新整理一次，伺服器返回nodemcu當前剩餘的記憶體
- 伺服器程式碼如下,檔名為LUAserver.lua

        -- LUA Webserver --

        dofile("import_image.lua")

        srv=net.createServer(net.TCP)
        srv:listen(80,function(conn)
            conn:on("receive",function(conn,payload)
                print("Heap = "..node.heap().." Bytes")
                print("Print payload:\n"..payload)

                -- write HTML
                head =   "<html><head><title>ESP8266 Webserver</title></head>"
                body =   "<body><h1>Welcome to Nodemcu</h1>"
                para =   "<p>The size of the memory available: "..tostring(node.heap()).." Bytes </p>"
                image1 =  "<img src=\""..png1
                image2 =  png2.."\" width = \"50\" height = \"50\" />"
                ending = "</body></html>"

                reply1 = head..body..image1
                reply2 = image2..para..ending
                payloadLen = string.len(reply1) + string.len(reply2)

                conn:send("HTTP/1.1 200 OK\r\n")
                conn:send("Content-Length:" .. tostring(payloadLen) .. "\r\n")
                conn:send("Connection:close\r\n\r\n")
                conn:send(reply1)
                conn:send(reply2)

                collectgarbage()
            end)

             conn:on("sent",function(conn)
                conn:close()
            end)

        end)

下面對程式碼進行解釋

首先看HTML部分，

程式第八行（算上註釋）-- write HTML以下的內容，到空白行為止

head..HTML檔案以<html>開始，</html>結束。檔案開頭要有<html>,

之後的第一部分是head,以<head>開始，</head>結束。這裡用來確定標題title

title的格式是<title>...</title>,title的內容ESP8266 Webserver會顯示在網頁的標籤上
body..body部分是HTML的主體，同樣以<body>開始，</body>結束

<h1> 代表第一個標題，格式是<h1>...<\h1>
para.. 標題以下是段落部分，以<p>開始，</p>結束

這裡要顯示nodemcu的剩餘記憶體大小，用函式node.heap()得到數值，並用tostring()轉換成字串，再用..將前後的字串連成一體
image1..,image2.. 是HTML插入的影象，本來是一句，因為太大分成了兩部分。

最簡單格式為<img src="XX.XX">，XX.XX代表影象名和字尾，比如nodmcu.png，圖片檔案通常和HTML檔案放在一起，或放在專門的資料夾。

但是，在nodemcu裡不能這樣做

nodemcu檔案系統中，並沒有存放HTML文件。而傳送的HTML是作為程式碼內嵌在程式中。

同樣，影象檔案也作為程式碼內嵌到程式中.我們可以將png等影象檔案轉換成base64編碼，影象檔案用很長的字串表示。

在另一個lua檔案import_image.lua中，我們定義了影象的base64字串png1和png2.檔案有1k多，太大所以分成了兩個。當本程式執行時，首先dofile(“import_image.lua”)，得到影象字串

結尾處的width = \"50\" height = \"50\"定義影象的大小，50兩邊"前要加轉義符/，否則編譯會報錯
end..部分用</body>和</html>結束body部分和整個html

然後我們從頭開始看
dofile()用來匯入html的image資料，前面已經講過
net.createServer()建立TCP伺服器，這是建立HTTP伺服器的基礎
srv是建立的service伺服器子模組，下面有方法listen()，也就是監聽函式

listen()監聽函式是整個程式的主體，一直到程式碼最後一個end)結束

listen()的回撥函式function(conn)體內包含了兩個事件觸發函式conn:on("receive"...end)和conn:on("send"...end),
- 二者分別在接收到客戶端的資訊後和伺服器傳送訊息後執行其內部的回撥函式function(conn,payload)和function(conn)
- 最內層的兩個匿名函式function(conn,payload)和function(conn)可以呼叫最上層封閉函式的變數，conn和payload
  
  conn代表TCP協議建立的從伺服器到客戶端的連線通道
  
  payload是伺服器從客戶端接收到的訊息或請求
conn:on("receive",...end)中的recieve,代表事件是接收到客戶端的資訊，回撥函式function(conn,payload)的兩個變數上面已經解釋過了，下面的程式碼只到第一個end),都是它的body
兩行print()函式分別顯示nodemcu還有多少記憶體，以及接收到的客戶端資訊payload
從head..到ending..是html程式碼，上面已經解釋過了
HTML程式碼比較大，而TCP一次發包的大小不能大於1460byte，所以我們手動把程式碼打成兩個包，reply1和reply2
並且統計了兩個包的總長度，定義了payloadLen。這個payload是伺服器要發給客戶端的payload，上一個payload是從客戶端發過來的。
下面有五個連續的conn:send()，代表伺服器要向客戶端通過HTTP協議傳送payload資訊。也是HTTP協議對paylaod資訊的打包過程。

後兩條是被打包的reply1和reply2 我們要傳輸的HTML文件。

前三條是HTTP的頭部資訊，第一條明確是HTTP，第二條確定打包資訊payload的長度，第三條關閉HTTP傳輸
- 在確認客戶端收到完整的資訊後才會關閉TCP連線。
collectgarbage()l收集垃圾，釋放記憶體
conn:on("send"..)當上述payload也就是HTML檔案被髮送，就把TCP的conn連線關閉。

這樣從客戶端接收到payload資訊，到向客戶端傳送payload資訊，就完成了一次對話過程

當瀏覽器（也就是客戶端）重新整理一次，客戶器重新向伺服器傳送paylaod，上述對話過程會再進行一次。但是伺服器不會儲存每次對話的相關資訊。

Step2

接下來我們開始實際操作。
- 首先請確認nodemcu已經連上了你家路由。請參考關於lua和關於nodemcu的點點滴滴相關內容。
- 上傳import_image.lua,操作如下圖。這是伺服器HTML的內嵌圖片base64程式碼，我把這個檔案和本文件一起上傳到論壇上。注意要用Upload，不要用Save to Esp
這裡寫圖片描述
fig1

你也可以上傳自己的base64程式碼，有網站可以將圖片線上轉換成base64。

但是這個圖片不能太大。最好不要超過2k，否則會報錯。因為記憶體裡有lua的直譯器執行，空閒的記憶體也就10k左右。

同時代碼要打包放到幾個字串中。因為send一次傳送量不能超過1460byte

上傳LUAserver.lua文件（step1中的程式碼），如果用Save to Esp有時會報錯，重啟後多試幾次
執行dofile(“LUAbserver.lua”)命令，（用Save to Esp會自動執行）
開啟電腦或手機瀏覽器，確保已經連線無線。輸入nodemcu的IP地址。(connect_wifi.lua程式中會給出，一般是192.168.1.XXX)
在瀏覽器上回顯示如下介面：

在esplore介面上回顯示nodemcu的可用記憶體，以及從瀏覽器客戶端收到的payload資訊，如下

> Heap = 13608 Bytes
Print payload:
GET / HTTP/1.1
Host: 192.168.1.7
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Cache-Control: max-age=0

每次重新整理網頁，伺服器就返回nodemcu當前的可用記憶體，它是動態變化的。

這部分就到這裡，

這一節我們介紹了網路協議及其運作方式，給出一個nodemcu伺服器例程，順便介紹了HTML的基本語法。

nodemcu的可用記憶體不大，因此HTML中嵌入不了太大的圖片。建議最好不嵌入圖片，本文只是一個示例。
nodemcu作伺服器的最大好處是多個使用者端可以訪問，比如手機，平板，電腦，只要有瀏覽器就能訪問。
它的缺點就是記憶體小，因此只能作很簡單的伺服器，結構太複雜或者嵌入大圖片，就會耗盡記憶體。
本節的例程是用伺服器傳輸nodemcu的狀態資訊，當然也可以傳遞從外設的資訊，感興趣的朋友可以自己試一試。

下一節，講如何在客戶端上控制nodemcu的外設，例如控制gpio操縱nodemcu上的LED，實現遠端開關功能。