作者: Claire Chang

node modules

加解密用的模組 – yeast

Post By Claire Chang 2020-02-27 上午 11:17

模組資訊

模組介紹

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 the previous one).

模組安裝

npm install –save yeast

模組使用

加載函式庫
‘use strict’;

var yeast = require(‘yeast’);
產生惟一識別ID

console.log(yeast(), yeast(), yeast()); // outputs: KyxidwN KyxidwN.0 KyxidwN.1

setTimeout(function () {
  console.log(yeast()); // outputs: KyxidwO
});

yeast.encode(num)

yeast.encode(+new Date()); // outputs: Kyxjuo1

yeast.decode(str)

var id = yeast(); // holds the value: Kyxl1OU

yeast.decode(id); // outputs: 1439816226334
Web Sockets

WebSocket與Ajax的不同

Post By Claire Chang 2020-02-26 下午 6:26

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文本字節數。

IT邦幫忙鐵人賽, 工作雜記隨筆

好用的API測試工具 – POSTMAN

Post By Claire Chang 2019-10-13 上午 3:27

軟體介紹


官方下載點 : 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 API Key』的按鈕可以取得呼叫API測試的密鑰

參考資料

IT邦幫忙鐵人賽, 工作雜記隨筆

使用VSCode繪製UML文件

Post By Claire Chang 2019-10-12 上午 3:26

PlantUML介紹

PlantUML是一個VSCode的插件，可以透過直觀的文字描述產生對應 UML 的模型生成工具，官方網站已經提供了詳細的範例以及說明，相關語法其實不用一開始就先死背，需要時至網站查詢即可，上手難度不大，目前提供下列 UML 模型：

  • 循序圖
  • 用例圖
  • 類圖
  • 活動圖
  • 組件圖
  • 狀態圖
  • 對像圖
  • 部署圖
  • 定時圖

安裝方式,.

  1. 按下插件ICON
  2. 在搜尋名稱打入： PlantUML
  3. 按下install

參考資料

  1. 用筆記也可以管理專案(二)：Markdown Preview Enhanced
  2. [TIL] 在 vscode 上面安裝並且使用 PlantUML
  3. PlantUML in a nutshell

IT邦幫忙鐵人賽, 工作雜記隨筆

好用的Markdown線上共筆工具 – HackMD

Post By Claire Chang 2019-10-11 上午 3:25

HackMD介紹

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 語法 在這裡

IT邦幫忙鐵人賽, 工作雜記隨筆

好用的Markdown線上編輯工具- StackEdit

Post By Claire Chang 2019-10-10 上午 3:21

StackEdit

網址：https://stackedit.io/

StackEdit是一個可以在線上編輯跟預覽 Markdown 文件的工具。除了基本的 Markdown 與
GitHub Flavored Markdown 格式外，還額外支援 LaTeX 數學表達符號與 UML 圖表支援。登入Google 帳號還能自動跟雲端硬碟同步文件，是一套相當不錯的線上筆記工具！

Markdown 語法

一打開StackEdit，會有一個預設的歡迎頁
歡迎頁裡面使用的所有較常被使用到的Markdown語法展示

標準常用的格式如下：

  1. 斜體：在兩邊加上 *星號* 或是 _底線_
  2. 粗體：在兩邊加上 **兩個星號** 或是 __兩個底線__，也可以用 **星號 與 _底線_**
  3. 刪除線：在兩邊加上 ~~兩個波浪~~
  4. 引言(註解)： > 引言內容
  5. 標題：# H1；## H2；### H3；#### H4；##### H5；###### H6
  6. 超連結：[連結標題](http://網址)
  7. 圖片：![圖片說明](http://圖片網址)

歡迎頁會有打字區與最後效果的對比呈現

中間那條可以選擇變更現在的編輯版面顯示樣式

其他特殊語法

  1. 數學表達式:請參考KaTeX 
$\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$

會有這樣的呈現

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

會變這樣

2. UML diagrams
要畫UML流程圖時，可以直接用文字來畫出圖片，相關語法請參考：Mermaid

```mermaid
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row.

Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```

會顯示右邊的圖

同步編輯的檔案或匯出成PDF/HTML

按下右上角的Icon，右側會跳出一個選單

我們可以在這邊將檔案同步至Google雲端或者匯出成HTML/PDF檔案

點選左上角的資料夾，則可以開啟許多不同的文件

IT邦幫忙鐵人賽, 工作雜記隨筆

ELK介紹

Post By Claire Chang 2019-10-09 下午 3:43

架構簡介

ELK是三個開源項目的首字母縮寫，這三個項目分別是：Elasticsearch、Logstash和Kibana。

  1. Elasticsearch是一個搜索和分析引擎。
  2. Logstash是服務器端數據處理管道，能夠同時從多個來源採集數據，轉換數據，然後將數據發送到諸如Elasticsearch等存儲庫中。
  3. Kibana則可以讓用戶在Elasticsearch中使用圖形和圖表對數據進行可視化。

enter image description here

ELK安裝

請參考此篇文章，非常的詳細
ELK 教學 – 從無到有安裝 ELK (CentOS/Red Hat)

大致簡述一下:

  1. 安裝VirtualBox
  2. 安裝Java
  3. 安裝Elasticsearch
  4. 安裝Beats

Config設定

請參考下面這些文章

  1. Config Of Logstash
  2. Config Of ElasticSearch
  3. Config Of Kibana
  4. Plugin Install Of All Module

Logstash的filter設定

使用grok教學

  1. https://www.elastic.co/guide/en/logstash/7.3/plugins-filters-grok.html
  2. https://medium.com/@hungtaohsieh/3%E7%A8%AE%E5%B8%B8%E7%94%A8logstash-filter-493e94a391b7

使用mutate教學
https://blog.csdn.net/cromma/article/details/52919742

grok測試工具
http://grokdebug.herokuapp.com/