【寒假作業02】 🍉瓜田刺猹——可視化流量監控的實現
🛫 Fly to 作業鏈接 ~
💻 作業成果的前端展示
1. Setting 閾值設置界面
2. Netraffic 可視化流量監控界面
-
當前閾值與異常流List
-
總數量/總包長雙Y軸統計圖 （可實現折線圖/柱形圖切換與保存到本地）
🔗 Github鏈接
📋 學習&作業記錄
1. 網絡編程基礎知識
2. Python語言程序設計基礎
- 有空的時候翻翻Python課的教材《Python語言程序設計基礎(第2版)》，學習基本的語法。
- 輔以網絡視頻教學的資源，需要實現某功能的時候就可以查找相關的用法，還是很容易上手的。
- 還有runoob.com的網頁版Python 3教程，分模塊也很方便去學習需要的知識。
3. 抓包與解析
-
Linux系統下利用tcpdump抓包（參考資料：TCPdump抓包命令詳解）
-
Windows系統下利用scapy和dpkt抓包（參考資料：scapy和dpkt使用）
-
抓包與解析的測試
4. 分析題意&設計算法
-
初次讀題會有些一頭霧水、不知所措、十臉茫然、無從下手，不過漸漸去了解一下相關知識背景（指的是NetworkProgramming！不是指ZS的瓜）就會慢慢開竅。當完全讀懂題干中的名詞之后，很容易就能理解這個任務的要求。
-
提煉出大體實現步驟，理清數據包、流、五元組、包長等幾個重要關鍵詞后，再開始思考算法，就會發現其實思路很清晰。難點不在抓包之后的數據處理，而是難在運用一些你剛學的、並不熟悉的語言去實現你想完成的目標。
（抓包→讀包→在python中做數據處理→數據傳送到Web前端）
對數據包的遍歷處理程序：
for cnt in range(len(dpkt)):
print("Packet No.{:0>5d}".format(cnt+1),end="")
if dpkt[cnt][Ether].type !=2048:
continue
if dpkt[cnt][IP].proto == 6:
proto = "TCP"
elif dpkt[cnt][IP].proto ==17:
proto = "UDP"
else: continue
ipSrc = dpkt[cnt][IP].src # 源IP
sport = dpkt[cnt][proto].sport # 源端口號
ipDst = dpkt[cnt][IP].dst # 目的IP
dport = dpkt[cnt][proto].dport # 目的端口號
length = len(dpkt[cnt]) # 包長
print("\t{0}:{1} -> {2}:{3} \t{4} length={5}".format(ipSrc,sport,ipDst,dport,proto,length))
five_tuple = f"{proto} {ipSrc}:{sport} -> {ipDst}:{dport}"
if five_tuple not in tuple_cnt: # 五元組初始化
tuple_cnt[five_tuple] = 0
tuple_len[five_tuple] = 0
tuple_abn[five_tuple] = 0
tupleCnt += 1 # 流數
tuple_cnt[five_tuple] += 1 # 對應流的包數
tuple_len[five_tuple] += length # 對應流的包長
total_cnt += 1 # 總包數
total_len += length # 總包長
if tuple_cnt[five_tuple] > VisitTimesMax or tuple_len[five_tuple] > PackageLenMax: # 超過閾值
tuple_abn[five_tuple] = 1 # 判定為異常流
if tupleCnt % 100 == 0: # 折線圖結算點
k = tupleCnt / 100
k = int(k)
# print("Here {0} total_cnt={1} total_len={2}".format(k,total_cnt,total_len))
dateY1[k-1] = total_cnt
dateY2[k-1] = total_len
if k == 10:
break
5. 運用Flask編寫Web應用框架
- 閾值設置界面與流量可視化主界面（參考資料：Flask速成）
6. HTML前端基礎
（參考資料：HTML教程與在線編輯器 )
7. ECharts圖表設計基礎
-
ECharts是基於JavaScript實現的開源可視化庫
-
官網的各種可視化圖模板真的是讓人琳琅滿目
-
雖然是開源代碼但是使用起來還是有一點難度
-
不過最后我做出來的這個雙縱軸圖感覺還挺酷
-
🎣 心得體會
靈飛學長說話算話，說不在過年的時候布置作業，於是把Deadline設在了大年廿九
終於拿下了這份沉甸甸的大禮包🎁，心情還是很愉悅的，雖然過程一如既往的艱難。
首先值得一提的是，很佩服撰寫這篇題干文案的飛哥。原本有些枯燥的作業內容，經過這番“結合時事”，居然能讓人從中品出樂趣來。敘述完故事背景后又能無縫銜接到任務要求中，而且把任務細節敘述得很清晰，給加個大雞腿🍗 這些天我是真的把這篇任務要求從頭到尾反反復復讀了好多遍（還不是人菜遲遲沒有動工）常讀常新，每次品讀都能發現一些新的東西！
不過看到這個題，腦海中浮現的是這個畫面：
深藍的天空中掛着一輪金黃的圓月，下面是海邊的沙地，都種着一望無際的西瓜。其間有一個十八九歲的少年，面對着電腦，手捏着鼠標，面對“異常流量”面露難色……
關於完成這份作業的感受，依舊是苦盡甘來哈哈哈！就像前面說的那樣，初次讀題會有些一頭霧水、不知所措、十臉茫然、無從下手，不過漸漸去了解一下相關知識背景就會慢慢開竅。當完全讀懂題干中的名詞之后，提煉出大體實現步驟，就會發現其實思路很清晰。難點不在抓包之后的數據處理，而是難在運用一些剛學的、並不熟悉的語言去實現各種小環節，然后再通過多方挖掘，將“小環節們”串聯起來（我感覺這兒是最難的，沒有太詳細的教程，需要自己感悟），最終完成目標。
致謝環節🥂
感謝我親愛的超級熱心的hygg、khgg、Lucy、Gjy、 ikkk、Zly、Exungsh相助~
在傾盡全力完成一份困難作業的時候，有人全程陪伴、互相幫助、互相探討可真是太幸運啦！
大家都超級棒呀！干杯！（指益禾堂新出的桃桃烏龍或者是古茗的酒香沁烏龍）
拜年環節🧨
🧧我怕三十晚上的祝福太多，你會不在意我的問候。
🎈我怕初一早上的鞭炮太吵，你會聽不到我的祝福。
🦞我怕初二中午的菜餚太香，你會看不見我的短信。
所以就現在~祝走過路過的各位老師、學長、學姐、同學新年快樂！！🎉
新的一年~祝大家心想事成，萬事如意！🐮牛年必更牛！