<p><iframe name="ifd" src="https://mnifdv.cn/resource/cnblogs/LearnCH395Q" frameborder="0" scrolling="auto" width="100%" height="1500"></iframe></p>
說明
這節演示一下模塊作為WEB服務器,瀏覽器輸入模組IP進行網頁訪問.
提醒:無論是SPI,USART,並口,程序操作步驟都是一樣的!
只是不同的接口發指令發給模塊,然后用不同的接收接收數據而已.
網頁是什么?
1.寫個最簡短的網頁程序,新建一個文本文檔
2,寫上下面一段
<html>
hello web
</html>
3.把文件后綴名改為 .html
4.雙擊打開(會使用瀏覽器打開)
5.上面是最簡潔的網頁了(具體網頁的學習自行學習哈)
首先記住一句話:程序是什么? 程序是一種規定!
網頁程序當然也是一種規定,咱平時學程序學的就是規定,或者說是規約.
上面的 <html> hello web </html> ,瀏覽器讀取以后就開始解析.
網頁程序的規定是前后加上 <html> </html>
網頁更多一點的話是下面的樣子.
<head> 這個里面寫一些開頭的配置,比如寫整個文件的格式啦,設置網頁的標題啦,執行js程序啦什么的 </head>
<body> 這個里面就是放一些展示的控件,也就是頁面展示的東西 </body>
<html> <head> <title>這是網頁的標題</title> </head> <body> <h1>h1叫做標簽的控件,這里面的字體顯示比較大</h1> <h2>h2也是叫做標簽的控件,這里面的字體顯示比較大</h2> </body> </html>
測試本節代碼(STM32F103xxxx)
1.提供了3個程序,網頁功能循循漸進
可以讓用戶徹底的理解網頁是神么.
2.用戶可以使用杜邦線根據自己的情況設置和連接引腳
3,注意!
要想模塊使用SPI通信,模塊的TX引腳需要在模塊重啟之前設置為低電平.
上面的引腳分配把模塊的TX引腳接到了單片機的PA3上,也就是串口2的RX上,如果用戶使用了串口2,請注意!
4.把模塊用網線和路由器或者交換機(和上位機在同一個局域網下)
注意,連接路由器或者交換機的時候是連接其LAN口.
5.把第一個程序下載程序到單片機
正常情況下會打印模塊的IP地址
6.在瀏覽器上輸出這個IP地址
程序說明
1.首先用戶需要明白的事情
想讓瀏覽器展示網頁,其實就是把網頁程序代碼發給瀏覽器.
在瀏覽器上輸入IP地址 192.168.0.102 然后回車,瀏覽器就會使用TCP去連接這個192.168.0.102 地址,端口號為80
就是說不輸入端口號,默認就是連接 192.168.0.102 端口號為80的TCP服務器去(一般叫WEB服務器).
也可以輸入端口號,列如 192.168.0.102:8888
咱先看看下面的真實過程吧.
2,大家伙可以用TCP調試助手模擬為一個WEB服務器
開一個TCP服務器,端口號為8888,設置成自動回復網頁數據
HTTP/1.1 200 OK Content-Type: text/html Content-Length:22 <html>hello web</html>
注意哈,22后面是兩個換行,別給丟掉哈
注意哈,22后面是兩個換行,別給丟掉哈
注意哈,22后面是兩個換行,別給丟掉哈
看下自己電腦的IP地址
然后在瀏覽器上輸入本機的IP地址:8888 然后回車(建議使用google瀏覽器, 多刷新幾下)
注意哈瀏覽器通過TCP發送兩次數據給服務器(一般是兩次,可以設置不讓它獲取圖標)
第一次是詢問文件數據 GET /
第二次是GET /favicon.ico 要咱網頁最上面的標題欄左側顯示的圖標
比如百度的
一般規定哈,真實的web服務器接接收到 GET / 路徑是/
就會把index.html文件里面的數據返回給網頁.
也可以在訪問的時候告訴服務器我要的文件
web服務器返回給網頁的時候返回有兩部分
上面的專業術語叫做 響應頭部
下面的專業術語叫做 響應正文
提示:22代表下面響應正文的長度
3.程序里面初始化和啟動TCP服務器監聽
4.因為連接路由器,所以需要DHCP
5.在中斷檢測事件里面處理Socket相關事件(本例中使用的Socket 0)
接收到信息以后,沒有去解析信息,直接返回的數據
然后瀏覽器就會顯示
網頁訪問鏈接顯示圖片或者視頻又是怎么做到的呢?
圖片呢都有格式哈,列如 jpeg格式的圖片
視頻呢就是一張張圖片切換顯示的很快,就是視頻啦.
1.准備一張jpeg圖片,用QQ截圖,記得截的小一點哈
保存格式選擇 jpeg
2.使用winhex打開這個圖片
安裝下面的步驟用鼠標點擊一個C 源碼,數據就被復制了
3.在程序里面 Ctrl + V 就可以粘貼出來圖片jpeg的16進制格式的數據了
改一下哈
4.改一下程序,讓程序字段設置為返回jpeg
5.然后在瀏覽器上重新訪問下
