Webhook到底是個啥？

趁你還年輕233發表於2018-12-02

WebHook

伺服器：Jenkins Server Git Server App Server 關鍵詞：nodejs ngrok github webhook

在配置Jenkins實現前端自動化構建的過程中，對於自動化的過程理解很模糊，只是知道Jenkins伺服器，Git倉庫和後端應用伺服器這三個概念。

git push之後，Git如何通知Jenkins對應Job的工作區實時構建？

答案就是：Git webhook機制發出請求，告知Jenkins伺服器你要自動構建了。

webhook與非同步程式設計中"訂閱-釋出模型"非常類似，一端觸發事件，一端監聽執行。

如果僅僅想學習webhook，可以直接閱讀。但是一定要注意，知識點是"非同步程式設計模型"，webhook僅僅是它的一個實現。

開啟正文！

以github webhook，koa，ngrok學習Webhook。

維基百科：

在web開發過程中的webhook，是一種通過通常的callback，去增加或者改變web page或者web app行為的方法。這些callback可以由第三方使用者和開發者維持當前，修改，管理，而這些使用者與網站或者應用的原始開發沒有關聯。webhook這個詞是由Jeff Lindsay在2007年在電腦科學hook專案第一次提出的。

Webhooks是"user-defined HTTP回撥"。它們通常由一些事件觸發，例如"push 程式碼到repo"，或者"post 一個評論到部落格"。
**當事件發生時，源網站可以發起一個HTTP請求到webhook配置的URL。**配置之後，使用者可以通過在一個站點觸發事件，之後再呼叫另一個站點的行為。可以是任何操作。
普通使用者可以使用CI系統或者通知bug追蹤系統觸發build。
由於webhook使用HTTP協議，因此可以直接被整合到web service。所以他們有時會被用來構建訊息佇列服務，例如一些RESTful的例子：IronMQ和RestMS。

以Github Webhook為例，學習webhook。

一、基礎部分

Webhook 允許我們通過在Github.com訂閱事件後構建後或者安裝Github應用。當其中之一的事件被觸發時，我們可以傳送HTTP POST請求到webhook的配置URL。**Webhook可以用作升級一個issue追蹤，觸發CI構建，升級一個後端映象，或者甚至是部署你的生產伺服器。**只有想不到，沒有做不到。

事件

在配置webhook的時候，你可以選擇自己想要接收的事件。你甚至可以選擇參加觸發所有事件。只有訂閱特殊的需要的事件，可以有效限制伺服器HTTP請求數。可以通過API或者UR隨時訂閱事件。預設情況下，webhook只訂閱push事件。

每個事件與一個動作集合聯絡，這些動作可以在你的組織或者repo中發生。例如，如果你訂閱了issues事件，你將在issue open，close以及labeled時接收到detailed payload。

下面是一些可用的事件：

Name	Description
`*`	Any time any event is triggered (Wildcard Event).
`check_run`	Any time a check run is created, requested, or rerequested.
`check_suite`	Any time a check suite is completed, requested, or rerequested.
`commit_comment`	Any time a Commit is commented on.
`push`	Any Git push to a Repository, including editing tags or branches. Commits via API actions that update references are also counted. This is the default event.

......

載荷

每一個事件型別都有一個指定的與相關事件資訊有關的payload格式。所有的事件載荷都是事件型別的載荷映象，push除外，因為他有更加詳細的webhook負載。

除了每個事件的documented欄位，webhook負載包含了執行事件的使用者以及組織和或repo，對於一個Github App的webhook來說，它包含installation。在PullRequestEvent payload中有示例。

傳送報文頭

傳送到webhook配置URL的HTTP POST負載會包含幾個指定的報文頭。

Header	Description
`X-GitHub-Event`	觸發分發的事件型別。
`X-GitHub-Delivery`	唯一識別分發的GUID。
`X-Hub-Signature`	HMAC十六進位制的響應體。如果secret配置了，這個頭資訊將被髮送。HMAC十六進位制由sha1雜湊演算法生成，secret作為HMAC的key。

User-Agent也將會加上字首GitHub-Hookshot/. 示例：

POST /payload HTTP/1.1
Host: localhost:4567
X-Github-Delivery: 72d3162e-cc78-11e3-81ab-4c9367dc0958
X-Hub-Signature: sha1=7d38cdd689735b008b3c702edd92eea23791c5f6
User-Agent: GitHub-Hookshot/044aadd
Content-Type: application/json
Content-Length: 6615
X-GitHub-Event: issues
{
  "action": "opened",
  "issue": {
    "url": "https://api.github.com/repos/octocat/Hello-World/issues/1347",
    "number": 1347,
    ...
  },
  "repository" : {
    "id": 1296269,
    "full_name": "octocat/Hello-World",
    "owner": {
      "login": "octocat",
      "id": 1,
      ...
    },
    ...
  },
  "sender": {
    "login": "octocat",
    "id": 1,
    ...
  }
}
複製程式碼

Ping 事件 ping事件負載

| Key | Value |
| --- | --- |
| zen | Random string of GitHub zen |
| hook_id | The ID of the webhook that triggered the ping |
| hook | The [webhook configuration](https://developer.github.com/v3/repos/hooks/#get-single-hook) |
複製程式碼

GitHub App 當你註冊一個新的GitHub App時，GitHub傳送一個ping事件到webhook URL。事件的包含app_id。

{
  "hook":{
    "type":"App",
    "id":11,
    "active":true,
    "events":["pull_request"],
    "app_id":37,
    ...
  }
}
複製程式碼

二、實驗開始

1. 配置並建立Webhook

配置Github監聽事件型別
- Payload URL接收webhook POST請求的伺服器埠。
Content型別
- application/json會將JSON payload直接放置POST的body中。
- application/x-www-form-urlencoded型別將JSON payload作為payload引數傳送。
Secret
- 使得webhooks更加安全的一個配置。
Events
- Events是webhook的核心。只要對儲存庫執行某項操作，就會觸發這些webhook，伺服器的有效負載URL會攔截並執行操作。

2. 配置接收和管理負載的伺服器

安裝ngrok並且做公網對映

./ngrok http 4567
複製程式碼

將生成的只有8小時有效時間的url複製到Payload URL。

http://785902b9.ngrok.io/payload
複製程式碼

寫接收/payload路徑的nodejs服務

var Koa = require('koa');
var Router = require('koa-router');

var app = new Koa();
var router = new Router();

router
    .post('/payload', (ctx, next) => {
        console.log(ctx);
    })

app
    .use(router.routes())
    .use(router.allowedMethods());

app.listen(4567);
複製程式碼

執行以下命令啟動服務：

node server.js
複製程式碼

在Issues new 一個Issue。
本地的服務監聽到issue事件之後，會列印出webhook的資訊

{ request: 
   { method: 'POST',
     url: '/payload',
     header: 
      { host: '785902b9.ngrok.io',
        accept: '*/*',
        'user-agent': 'GitHub-Hookshot/22e0d92',
        'x-github-event': 'issues',
        'x-github-delivery': 'cde0a020-7c48-11e8-9c35-c1d90e4891c8',
        'content-type': 'application/x-www-form-urlencoded',
        'x-hub-signature': 'sha1=9f4873803f9615615e02f7dec856778ebfc201be',
        'content-length': '10929',
        'x-forwarded-for': '192.30.252.44' } },
  response: { status: 404, message: 'Not Found', header: {} },
  app: { subdomainOffset: 2, proxy: false, env: 'development' },
  originalUrl: '/payload',
  req: '<original node req>',
  res: '<original node res>',
  socket: '<original node socket>' }
複製程式碼

3.測試Webhooks

在每一個Webhook下都有一個觸發事件記錄列表。

單擊後會展開webhook的請求和響應。

4.在Github和server設定token

不要硬編碼，使用安全隨機的方式生成十六進位制hash token
將生成的token複製到webhook的secret配置處，再將其儲存到伺服器專門的本地變數中
token hash在請求報文頭的X-Hub-Signature
可以設定服務端token校驗，若本地儲存的token與Github傳來的token不一致，報500

三、實驗分析

訂閱: github repo訂閱issue webhook event
釋出: 由來自世界各地的開發者建立issue後，觸發trigger，發請求到Payload URL，發請求到伺服器
處理: URL對應的伺服器，解析請求，做出響應

四、引申分析Jenkins CI

git push之後，Git如何通知Jenkins對應Job的工作區實時自動構建？
- 訂閱: Git倉庫訂閱push webhook event
- 釋出: 某個開發人員本地git push後，觸發Git repo的trigger，發請求Jenkins伺服器
- 處理: Jenkins伺服器解析請求，進行自動構建
核心知識點是什麼？ "釋出-訂閱" 事件非同步程式設計模型，要注意這個模型是只針對Git repo自身的，它訂閱了來自local的push事件，觸發者則是某一個開發者的git push操作。

五、釋出訂閱者模型引申

vue元件通訊 $emit $on
vue非同步優先佇列，$nextTick()自身訂閱釋出
vuex全域性狀態樹提交mutation commit() 隱式監聽
webhook event 新增請求報文頭
nodejs middleware next
child_process.fork 多執行緒通訊
ARP協議私有區域網內的機器間通訊
nodejs EventEmitter
vuex plugin subscribe
基於Dijkstra演算法的鏈路狀態路由動態更新路由表
ZooKeeper動態服務發現和服務路由功能

如果還是不懂，建議先閱讀樸靈大神的《深入淺出nodejs》的非同步章節，並且涉獵大量的非前端技術，並實踐。

不過對於這篇博文來說，webhook是Git的一種機制，可用於前端自動化構建是關鍵知識點。

當然，關於這篇博文，其實有些流程還不是很清晰，文章內容可能在我做完一次完整的Jenkins自動化構建實驗後更新。

參考：

That it ！

[譯] Flutter 元件到底是個啥？
2018-07-12
Flutter元件
Java築基 - JNI到底是個啥
2021-05-11
Java
【Flutter脫髮錄】RenderObject到底是個啥？
2020-04-12
FlutterObject
Java中的反射到底是個啥？
2020-10-08
Java反射
一文帶你搞懂 RPC 到底是個啥
2021-05-31
RPC
計算機中的流水線技術到底是個啥？
2021-02-09
計算機
你常常看到的 __init__.py 到底是個啥？
2020-10-29
下一個時代的發展架構竟然是它！FaaaaaaaaS到底是個啥？
2018-08-28
架構
2022 年最受矚目的新特性 CSS @layer 到底是個啥？
2022-03-22
CSS
小米智慧腳踏車之後又發奇招這個到底是啥？
2016-06-25
寫個 Webhook 去構建文件
2017-04-24
WebHook
[PHP 原始碼] EXPECTED 和 UNEXPECTED 到底是啥？
2020-04-06
PHP原始碼
資料分析師到底是幹啥的？
2023-12-01
Webhook
2015-05-14
WebHook
《跬步千里系列》高效能MySql之索引到底是個啥
2019-12-05
MySql索引
傳說中 VUE 的“語法糖”到底是啥？
2021-09-24
Vue
雲端計算到底是個啥？運維必須掌握雲端計算的理由是什麼？
2018-12-20
運維
一鍵變老，一鍵還童，一鍵變性！這個全球霸屏的 FaceApp 到底是個啥？
2022-12-06
APP
微服務？資料庫？它們之間到底是啥關係？
2019-05-16
微服務資料庫
module.exports實現原理以及和exports到底是啥關係
2018-05-30
Export
什麼是webhook
2017-09-02
WebHook
GitHub WebHook 使用教程
2024-03-27
GithubWebHook
Spring是個啥？
2020-10-29
Spring
快應用、快服務、服務直達…這些到底是啥玩意
2020-05-19
生命是個軟體，我是個啥？
2016-09-08
kubebuilder實戰之七：webhook
2021-09-02
UIWebHook
WebHook 管理和部署系統
2018-06-12
WebHook
用 Go 做了一個 Git WebHook 鉤子實現自動部署
2019-05-11
GoGitWebHook
gitlab webhook 如何針對一個專案下的子模組配置
2020-08-13
GitlabWebHook
Git Webhook自動部署專案
2020-07-28
GitWebHook
拉仇恨！webhook + 企業微信給同事做了個程式碼提交監聽工具
2021-06-02
WebHook
Spark RPC 到底是個什麼鬼？
2021-09-09
SparkRPC
VS Code部署Teams webhook到Azure Functions
2022-04-18
WebHookFunction
【Python】釘釘webhook傳送通知
2018-07-06
PythonWebHook
PHP最近的6個版本到底多了啥？
2019-03-04
PHP
前端面試必殺技：this是個啥？
2019-04-26
前端面試
手機USB共享網路是個啥
2022-05-03
JavaScript當中的this究竟是個啥？
2021-09-09
JavaScript