-
使用Charles Proxy抓取nodejs的網路使用
Continue Reading…: 使用Charles Proxy抓取nodejs的網路使用設定Charles 1. 針對HTTP流量 按下Proxy » Reverse Proxies… 選擇 Enable Reverse Proxies, 新增一個項目: Local Port: 60103 – any unused local port Remote Host: claire-chang.com – target host address Remote Port: 80 – target host port
-
用Charles以本地/遠端內容取代網路回應
Continue Reading…: 用Charles以本地/遠端內容取代網路回應以本地檔案內容取代網路回應 有時我們在本地開發網頁功能時,若以API的方式去讀取資料,當我們在測試時可能會希望回傳某個固定的response。這時候就可以用Map Local的功能。 使用步驟 1、Save Response 選擇要模擬數據的接口,然後右鍵,選擇“Save Response”
-
加解密用的模組 – yeast
Continue Reading…: 加解密用的模組 – yeast模組資訊 官網: https://www.npmjs.com/package/yeast GitHub: https://github.com/unshiftio/yeast 模組介紹 yeast是唯一的ID生成器。它的主要目的是生成可用於緩存清除的唯一ID。通常的做法是使用時間戳記,但是使用時間戳記有幾個缺點。 時間戳已經是13個字符了。這可能對1個請求無關緊要,但是如果您發出數百個請求,則這會迅速增加帶寬和處理時間。 它不夠獨特。如果您緊接彼此生成兩個標記,則它們將是相同的,因為計時精度限制為毫秒。 yeast通過以下方式解決了這兩個問題: Compressing the generated timestamp using a custom encode() function that returns a string representation of the number. Seeding the id in case of collision (when the id is identical to…
-
WebSocket與Ajax的不同
Continue Reading…: WebSocket與Ajax的不同WebSocket與Ajax的不同 WebSocket 是HTML5 開始提供的一種在單個TCP 連接上進行全雙工通訊的協議。 WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單,允許服務端主動向客戶端推送數據。在WebSocket API 中,瀏覽器和服務器只需要完成一次握手,兩者之間就直接可以創建持久性的連接,並進行雙向數據傳輸。 在WebSocket API 中,瀏覽器和服務器只需要做一個握手(polling)的動作,然後,瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。 現在,很多網站為了實現推送技術,所用的技術都是Ajax 輪詢。輪詢是在特定的的時間間隔(如每1秒),由瀏覽器對服務器發出HTTP請求,然後由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點,即瀏覽器需要不斷的向服務器發出請求,然而HTTP請求可能包含較長的header,其中真正有效的數據可能只是很小的一部分,顯然這樣會浪費很多的帶寬等資源。 HTML5 定義的WebSocket 協議,能更好的節省服務器資源和帶寬,並且能夠更實時地進行通訊。 下圖是兩種方式的對比圖,我們可以看到Ajax是一直相同頻率的http request,而WebSocket在第一次的握手(http)之後就改走WebSocket的路 WebSocket 屬性 Socket.readyState: 屬性readyState表示連接狀態,可以是以下值: 0 – 表示連接尚未建立。 1 – 表示連接已建立,可以進行通信。 2 – 表示連接正在進行關閉。 3 – 表示連接已經關閉或者連接不能打開。 Socket.bufferedAmount: read only屬性bufferedAmount已被send()放入正在隊列中等待傳輸,但是還沒有發出的UTF-8文本字節數。
-
使用Charles抓取手機網路使用
Continue Reading…: 使用Charles抓取手機網路使用使用Charles抓取手機網路使用資訊 將電腦和手機連上同一個WIFI網路 輸入ifconfig(MAC電腦)取得電腦的內網IP,如下圖可得知內網IP為192.168.1.104 設置Charles上的Proxy settings 設置手機上的WIFI的PROXY 此時即可在電腦上看到手機的網路使用狀況
-
好用的API測試工具 – POSTMAN
Continue Reading…: 好用的API測試工具 – POSTMAN軟體介紹 官方下載點 : https://www.getpostman.com/ Chrome 擴充功能版 : 下載連結 Postman 是一個可以模擬 HTTP Request 的工具,其中包含常見的 HTTP 的請求方式,例如: GET 、POST、PUT、DELETE,而它的主要功能就是能夠快速的測試你的 API 是否能夠正常的請求資料,並得到正確的請求結果。 使用帳號 使用帳號去同步設定,可以選擇新創一個帳號或者使用google帳號去同步在不同電腦裡的POSTMAN設定 這樣在不同電腦裡面,使用紀錄或者儲存的Collection等都可以被同步。 發送Request教學 在登入帳號後,按下左上方的+New按鈕,會可以看到一個創建Request的畫面 有些API的網址會有變數,這時可以使用https://api.library.com/:entity/並且藉由下面這樣的設定來取代變數entity 在發送Request時,正確的header資訊非常重要,可在下面這個頁籤做設定 也可以選擇發送的模式是要使用POST或GET 更多詳細的教學請見:官方教學 Pre-request scripts 如果我們希望每一次打出的某個變數能夠不一樣,這時可以撰寫pre-request scripts來達到這個目的,如下圖: 這時可以在傳送的參數裡用{{timestampHeader}}來存取timestampHeader這個變數 把儲存的測試API資料變成文件 在POSTMAN測試的資料可以轉換成精美的HTML API文件 更多資料請見官網 使用Postman API去自動化呼叫API測試 在下面的畫面裡按下『Get…
-
使用VSCode繪製UML文件
Continue Reading…: 使用VSCode繪製UML文件PlantUML介紹 PlantUML是一個VSCode的插件,可以透過直觀的文字描述產生對應 UML 的模型生成工具,官方網站已經提供了詳細的範例以及說明,相關語法其實不用一開始就先死背,需要時至網站查詢即可,上手難度不大,目前提供下列 UML 模型: 循序圖 用例圖 類圖 活動圖 組件圖 狀態圖 對像圖 部署圖 定時圖 安裝方式,. 按下插件ICON 在搜尋名稱打入: PlantUML 按下install 參考資料 用筆記也可以管理專案(二):Markdown Preview Enhanced [TIL] 在 vscode 上面安裝並且使用 PlantUML PlantUML in a nutshell
-
好用的Markdown線上共筆工具 – HackMD
Continue Reading…: 好用的Markdown線上共筆工具 – HackMDHackMD介紹 HackMD網站位置:https://hackmd.io/recent HackMD 是個跨平台的 Markdown 即時協作筆記,可以在電腦、平板甚至是手機與其他人做筆記! 同時也可以透過 Facebook、Twitter、GitHub、Dropbox 登入。 和StackEdit相比,HackMD增加了上傳圖片的功能,將圖片上傳至imgur,我們可以不用煩惱MD文章的圖片要如何處理,並且它非常適合用來做為大型研討會的線上共筆,Agile Summit及JSDC等大型研討會都是使用這個網站來做為線上共筆平台。 功能介紹 官方功能介紹:功能介紹 線上協作時可以設定不同使用者有不同的讀寫權限: 也支援讓所編輯出的文件以投影片的方式做展示: slide-example 按下右上角的分享裡的簡報模式,便可以以投影片方式展示 語法介紹 這邊有HackMD支援的語法介紹,按下編輯可以看到成果與語法的比較圖 HackMD支援的語法介紹 同樣支援MathJax數學符號功能,UML 圖表,還支援五線譜語法,功能非常強大 更多關於 循序圖 語法 在這裡. 更多關於 流程圖 語法 在這裡. 更多關於 graphviz 語法 在這裡 更多關於 mermaid 語法 在這裡 更多關於 abc…
-
好用的Markdown線上編輯工具- StackEdit
Continue Reading…: 好用的Markdown線上編輯工具- StackEditStackEdit 網址:https://stackedit.io/ StackEdit是一個可以在線上編輯跟預覽 Markdown 文件的工具。除了基本的 Markdown 與 GitHub Flavored Markdown 格式外,還額外支援 LaTeX 數學表達符號與 UML 圖表支援。登入Google 帳號還能自動跟雲端硬碟同步文件,是一套相當不錯的線上筆記工具! Markdown 語法 一打開StackEdit,會有一個預設的歡迎頁 歡迎頁裡面使用的所有較常被使用到的Markdown語法展示 標準常用的格式如下: 斜體:在兩邊加上 *星號* 或是 _底線_ 粗體:在兩邊加上 **兩個星號** 或是 __兩個底線__,也可以用 **星號 與 _底線_** 刪除線:在兩邊加上 ~~兩個波浪~~ 引言(註解): > 引言內容 標題:# H1;## H2;###…
-
ELK介紹
Continue Reading…: ELK介紹架構簡介 ELK是三個開源項目的首字母縮寫,這三個項目分別是:Elasticsearch、Logstash和Kibana。 Elasticsearch是一個搜索和分析引擎。 Logstash是服務器端數據處理管道,能夠同時從多個來源採集數據,轉換數據,然後將數據發送到諸如Elasticsearch等存儲庫中。 Kibana則可以讓用戶在Elasticsearch中使用圖形和圖表對數據進行可視化。 ELK安裝 請參考此篇文章,非常的詳細 ELK 教學 – 從無到有安裝 ELK (CentOS/Red Hat) 大致簡述一下: 安裝VirtualBox 安裝Java 安裝Elasticsearch 安裝Beats Config設定 請參考下面這些文章 Config Of Logstash Config Of ElasticSearch Config Of Kibana Plugin Install Of All Module Logstash的filter設定 使用grok教學 https://www.elastic.co/guide/en/logstash/7.3/plugins-filters-grok.html https://medium.com/@hungtaohsieh/3%E7%A8%AE%E5%B8%B8%E7%94%A8logstash-filter-493e94a391b7 使用mutate教學…
Search
About Me
17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。
如果你認同我或想支持我的努力,歡迎請我喝一杯咖啡!讓我更有動力分享知識!