Web hooks/web 钩子详解

Webhook是一种API回调机制,由第三方用户定义,用于在特定事件触发时通知外部服务器。本文解释了Webhook的工作原理,如何在GitHub和Gitee中设置自定义Webhook,以及在自动部署等场景中的应用。

webhook是在特定情况下触发的一种api(回调),用于在项目发生相关事件时通知外部服务器。这些回调由第三方的用户、开发人员自己定义、维护、管理,就好像允许别人挂载一条网线到你的Web网站或者应用程序的钩子上,来实时地收到你的推送信息

比方说我的网站有一个api http://dev.lovelucy.info/incoming,负责接受一个 Post 请求。每次有push 事件时 GitHub 都会主动往这个地址发送一个 POST 请求。当然 GitHub 还有个 Secret 的设定,就是一个字符串,如果加上的话就在 POST 请求的 HTTP 头中会带一个 Hash 值做验证密文,证明这个 POST 真是来自 GitHub。

再比方,在js中,target.addEventListener(type, listener[, options]); 可以为一个节点添加一个事件,如:

document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});

在点击myBtn按钮时候,会触发点击事件。同理webhook也是如此,在git操作中使用频繁。Github 和 Gitee 支持用户自定义 Web Hook,下图:
image.png
image.png

Webhook 处理管道

image.png

其中 DropBox、PayPal、Github、Slack都是第三方平台,这些平台接受到某些 HTTP 请求后,触发 Web Hook 发送新的 HTTP 请求到 Your Web Site, Your Web Site 收到来自第三方平台的 HTTP 请求后再进行自己的业务处理

例子:我的系统属于后台接口系统。每次我开发提交完git仓库后要实时的部署到测试环境,这时候就可以用到gitlab或github的web hooks进行自动更新部署。当我push代码后,触发 gitlab/github 的 web hook 发送 post 请求到我的后台接口系统,后台接口系统接收到该 post 请求后就开始进行更新部署。

参考

<template> <div class="clearfix"> <a-upload :listType="listType" accept="video/*" :multiple="multiple" :action="uploadUrl" :headers="headers" :data="{ biz: bizPath }" v-model:fileList="uploadFileList" :beforeUpload="beforeUpload" :disabled="disabled" @change="handleChange" @preview="handlePreview" > <div v-if="uploadVisible"> <div v-if="listType == 'picture-card'"> <LoadingOutlined v-if="loading" /> <UploadOutlined v-else /> <div class="ant-upload-text">{{ text }}</div> </div> <a-button v-if="listType == 'picture'" :disabled="disabled"> <UploadOutlined></UploadOutlined> {{ text }} </a-button> </div> </a-upload> <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false"> <video controls width="100%"> <source :src="previewImage" type="video" /> 您的浏览器不支持视频播放 </video> <div style="margin-top: 16px"> <a-button @click="downloadVideo">下载视频</a-button> </div> </a-modal> </div> </template> <script lang="ts"> import {computed, defineComponent, nextTick, ref, watch} from 'vue'; import {LoadingOutlined, UploadOutlined} from '@ant-design/icons-vue'; import {useRuleFormItem} from '/@/hooks/component/useFormItem'; import {propTypes} from '/@/utils/propTypes'; import {useAttrs} from '/@/hooks/core/useAttrs'; import {useMessage} from '/@/hooks/web/useMessage'; import {getFileAccessHttpUrl, getHeaders, getRandom} from '/@/utils/common/compUtils'; import {uploadUrl} from '/@/api/common/api'; const { createMessage, createErrorModal } = useMessage(); export default defineComponent({ name: 'JUploadVideo', components: { LoadingOutlined, UploadOutlined }, inheritAttrs: false, props: { //绑定值 value: propTypes.oneOfType([propTypes.string, propTypes.array]), //按钮文本 listType: { type: String, required: fals
03-29
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值