feat: able to create webhooks now (close #76)

README.md

@@ -60,17 +60,18 @@ _✨ 搭建专属于你的消息推送服务，支持多种消息推送方式，
    + Discord 群机器人，
    + 群组消息：可以将多个推送通道组合成一个群组，然后向群组发送消息，可以实现一次性推送到多个渠道的功能，
    + 自定义消息，可以自定义消息请求 URL 和请求体格式，实现与其他服务的对接，支持[众多第三方服务](https://iamazing.cn/page/message-pusher-common-custom-templates)。
-2. 支持在 Web 端编辑 & 管理发送的消息，支持自动刷新。
+2. 支持**自定义 Webhook，反向适配各种调用平台**，你可以接入各种已有的系统，而无需修改其代码。
-3. 支持异步消息。
+3. 支持在 Web 端编辑 & 管理发送的消息，支持自动刷新。
-4. 多种用户登录注册方式：
+4. 支持异步消息。
+5. 多种用户登录注册方式：
    + 邮箱登录注册以及通过邮箱进行密码重置。
    + [GitHub 开放授权](https://github.com/settings/applications/new)。
    + 微信公众号授权（需要额外部署 [WeChat Server](https://github.com/songquanpeng/wechat-server)）。
-5. 支持 Markdown。
+6. 支持 Markdown。
-6. 支持用户管理。
+7. 支持用户管理。
-7. Cloudflare Turnstile 用户校验。
+8. Cloudflare Turnstile 用户校验。
-8. 支持在线发布公告，设置关于界面以及页脚。
+9. 支持在线发布公告，设置关于界面以及页脚。
-9. API 兼容其他消息推送服务，例如 [Server 酱](https://sct.ftqq.com/)。
+10. API 兼容其他消息推送服务，例如 [Server 酱](https://sct.ftqq.com/)。
 
 ## 用途
 1. [整合进自己的博客系统，每当有人登录时发微信消息提醒](https://github.com/songquanpeng/blog/blob/486d63e96ef7906a6c767653a20ec2d3278e9a4a/routes/user.js#L27)。

controller/webhook.go

@@ -4,6 +4,7 @@ import (
 	"encoding/json"
 	"github.com/gin-gonic/gin"
 	"github.com/tidwall/gjson"
+	"io"
 	"message-pusher/common"
 	"message-pusher/model"
 	"net/http"
@@ -96,12 +97,14 @@ func AddWebhook(c *gin.Context) {
 		return
 	}
 	cleanWebhook := model.Webhook{
-		UserId:      c.GetInt("id"),
+		UserId:        c.GetInt("id"),
-		Name:        webhook_.Name,
+		Name:          webhook_.Name,
-		Status:      common.WebhookStatusEnabled,
+		Status:        common.WebhookStatusEnabled,
-		Link:        common.GetUUID(),
+		Link:          common.GetUUID(),
-		CreatedTime: common.GetTimestamp(),
+		CreatedTime:   common.GetTimestamp(),
-		ExtractRule: webhook_.ExtractRule,
+		Channel:       webhook_.Channel,
+		ExtractRule:   webhook_.ExtractRule,
+		ConstructRule: webhook_.ConstructRule,
 	}
 	err = cleanWebhook.Insert()
 	if err != nil {
@@ -183,8 +186,7 @@ func UpdateWebhook(c *gin.Context) {
 }
 
 func TriggerWebhook(c *gin.Context) {
-	var reqText string
+	jsonData, err := io.ReadAll(c.Request.Body)
-	err := c.Bind(&reqText)
 	if err != nil {
 		c.JSON(http.StatusBadRequest, gin.H{
 			"success": false,
@@ -192,6 +194,7 @@ func TriggerWebhook(c *gin.Context) {
 		})
 		return
 	}
+	reqText := string(jsonData)
 	link := c.Param("link")
 	webhook, err := model.GetWebhookByLink(link)
 	if err != nil {

model/webhook.go

@@ -48,7 +48,7 @@ func GetWebhooksByUserId(userId int, startIdx int, num int) (webhooks []*Webhook
 }
 
 func SearchWebhooks(userId int, keyword string) (webhooks []*Webhook, err error) {
-	err = DB.Where("user_id = ?", userId).Where("id = ? or name LIKE ?", keyword, keyword+"%").Find(&webhooks).Error
+	err = DB.Where("user_id = ?", userId).Where("id = ? or link = ? or name LIKE ?", keyword, keyword, keyword+"%").Find(&webhooks).Error
 	return webhooks, err
 }
 
@@ -76,10 +76,10 @@ func (webhook *Webhook) UpdateStatus(status int) error {
 	return err
 }
 
-// Update Make sure your token's fields is completed, because this will update non-zero values
+// Update Make sure your token's fields is completed, because this will update zero values
 func (webhook *Webhook) Update() error {
 	var err error
-	err = DB.Model(webhook).Select("name", "extract_rule", "construct_rule", "channel").Updates(webhook).Error
+	err = DB.Model(webhook).Select("status", "name", "extract_rule", "construct_rule", "channel").Updates(webhook).Error
 	return err
 }
 

web/src/App.js

@@ -19,6 +19,8 @@ import Message from './pages/Message';
 import Channel from './pages/Channel';
 import EditChannel from './pages/Channel/EditChannel';
 import EditMessage from './pages/Message/EditMessage';
+import Webhook from './pages/Webhook';
+import EditWebhook from './pages/Webhook/EditWebhook';
 
 const Home = lazy(() => import('./pages/Home'));
 const About = lazy(() => import('./pages/About'));
@@ -134,6 +136,30 @@ function App() {
           </Suspense>
         }
       />
+      <Route
+        path='/webhook'
+        element={
+          <PrivateRoute>
+            <Webhook />
+          </PrivateRoute>
+        }
+      />
+      <Route
+        path='/webhook/edit/:id'
+        element={
+          <Suspense fallback={<Loading></Loading>}>
+            <EditWebhook />
+          </Suspense>
+        }
+      />
+      <Route
+        path='/webhook/add'
+        element={
+          <Suspense fallback={<Loading></Loading>}>
+            <EditWebhook />
+          </Suspense>
+        }
+      />
       <Route
         path='/message'
         element={

web/src/components/Header.js

@@ -28,6 +28,11 @@ const headerButtons = [
     to: '/channel',
     icon: 'sitemap',
   },
+  {
+    name: '接口',
+    to: '/webhook',
+    icon: 'code',
+  },
   {
     name: '用户',
     to: '/user',

web/src/components/WebhooksTable.js

@@ -0,0 +1,310 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Label, Pagination, Table } from 'semantic-ui-react';
+import { Link } from 'react-router-dom';
+import { API, copy, showError, showSuccess, showWarning } from '../helpers';
+
+import { ITEMS_PER_PAGE } from '../constants';
+import { renderTimestamp } from '../helpers/render';
+
+const WebhooksTable = () => {
+  const [webhooks, setWebhooks] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [activePage, setActivePage] = useState(1);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [searching, setSearching] = useState(false);
+  const [user, setUser] = useState({ username: '', token: '' });
+
+  const loadWebhooks = async (startIdx) => {
+    const res = await API.get(`/api/webhook/?p=${startIdx}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (startIdx === 0) {
+        setWebhooks(data);
+      } else {
+        let newWebhooks = webhooks;
+        newWebhooks.push(...data);
+        setWebhooks(newWebhooks);
+      }
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const onPaginationChange = (e, { activePage }) => {
+    (async () => {
+      if (activePage === Math.ceil(webhooks.length / ITEMS_PER_PAGE) + 1) {
+        // In this case we have to load more data and then append them.
+        await loadWebhooks(activePage - 1);
+      }
+      setActivePage(activePage);
+    })();
+  };
+
+  useEffect(() => {
+    loadWebhooks(0)
+      .then()
+      .catch((reason) => {
+        showError(reason);
+      });
+    loadUser()
+      .then()
+      .catch((reason) => {
+        showError(reason);
+      });
+  }, []);
+
+  const manageWebhook = async (id, action, idx) => {
+    let data = { id };
+    let res;
+    switch (action) {
+      case 'delete':
+        res = await API.delete(`/api/webhook/${id}/`);
+        break;
+      case 'enable':
+        data.status = 1;
+        res = await API.put('/api/webhook/?status_only=true', data);
+        break;
+      case 'disable':
+        data.status = 2;
+        res = await API.put('/api/webhook/?status_only=true', data);
+        break;
+    }
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('操作成功完成！');
+      let webhook = res.data.data;
+      let newWebhooks = [...webhooks];
+      let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
+      if (action === 'delete') {
+        newWebhooks[realIdx].deleted = true;
+      } else {
+        newWebhooks[realIdx].status = webhook.status;
+      }
+      setWebhooks(newWebhooks);
+    } else {
+      showError(message);
+    }
+  };
+
+  const renderStatus = (status) => {
+    switch (status) {
+      case 1:
+        return <Label basic>已启用</Label>;
+      case 2:
+        return (
+          <Label basic color='red'>
+            已禁用
+          </Label>
+        );
+      default:
+        return (
+          <Label basic color='grey'>
+            未知状态
+          </Label>
+        );
+    }
+  };
+
+  const searchWebhooks = async () => {
+    if (searchKeyword === '') {
+      // if keyword is blank, load files instead.
+      await loadWebhooks(0);
+      setActivePage(1);
+      return;
+    }
+    setSearching(true);
+    const res = await API.get(`/api/webhook/search?keyword=${searchKeyword}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setWebhooks(data);
+      setActivePage(1);
+    } else {
+      showError(message);
+    }
+    setSearching(false);
+  };
+
+  const handleKeywordChange = async (e, { value }) => {
+    setSearchKeyword(value.trim());
+  };
+
+  const sortWebhook = (key) => {
+    if (webhooks.length === 0) return;
+    setLoading(true);
+    let sortedWebhooks = [...webhooks];
+    sortedWebhooks.sort((a, b) => {
+      return ('' + a[key]).localeCompare(b[key]);
+    });
+    if (sortedWebhooks[0].id === webhooks[0].id) {
+      sortedWebhooks.reverse();
+    }
+    setWebhooks(sortedWebhooks);
+    setLoading(false);
+  };
+
+  const loadUser = async () => {
+    let res = await API.get(`/api/user/self`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setUser(data);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <>
+      <Form onSubmit={searchWebhooks}>
+        <Form.Input
+          icon='search'
+          fluid
+          iconPosition='left'
+          placeholder='搜索接口的 ID，链接或名称 ...'
+          value={searchKeyword}
+          loading={searching}
+          onChange={handleKeywordChange}
+        />
+      </Form>
+
+      <Table basic>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortWebhook('id');
+              }}
+            >
+              ID
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortWebhook('name');
+              }}
+            >
+              名称
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortWebhook('status');
+              }}
+            >
+              状态
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortWebhook('created_time');
+              }}
+            >
+              创建时间
+            </Table.HeaderCell>
+            <Table.HeaderCell>操作</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+          {webhooks
+            .slice(
+              (activePage - 1) * ITEMS_PER_PAGE,
+              activePage * ITEMS_PER_PAGE
+            )
+            .map((webhook, idx) => {
+              if (webhook.deleted) return <></>;
+              return (
+                <Table.Row key={webhook.id}>
+                  <Table.Cell>{webhook.id}</Table.Cell>
+                  <Table.Cell>{webhook.name}</Table.Cell>
+                  <Table.Cell>{renderStatus(webhook.status)}</Table.Cell>
+                  <Table.Cell>
+                    {renderTimestamp(webhook.created_time)}
+                  </Table.Cell>
+                  <Table.Cell>
+                    <div>
+                      <Button
+                        size={'small'}
+                        positive
+                        onClick={async () => {
+                          if (
+                            await copy(
+                              `${window.location.origin}/webhook/${webhook.link}`
+                            )
+                          ) {
+                            showSuccess('已复制到剪贴板！');
+                          } else {
+                            showWarning('无法复制到剪贴板！');
+                          }
+                        }}
+                      >
+                        复制 Webhook 链接
+                      </Button>
+                      <Button
+                        size={'small'}
+                        negative
+                        onClick={() => {
+                          manageWebhook(webhook.id, 'delete', idx).then();
+                        }}
+                      >
+                        删除
+                      </Button>
+                      <Button
+                        size={'small'}
+                        onClick={() => {
+                          manageWebhook(
+                            webhook.id,
+                            webhook.status === 1 ? 'disable' : 'enable',
+                            idx
+                          ).then();
+                        }}
+                      >
+                        {webhook.status === 1 ? '禁用' : '启用'}
+                      </Button>
+                      <Button
+                        size={'small'}
+                        as={Link}
+                        to={'/webhook/edit/' + webhook.id}
+                      >
+                        编辑
+                      </Button>
+                    </div>
+                  </Table.Cell>
+                </Table.Row>
+              );
+            })}
+        </Table.Body>
+
+        <Table.Footer>
+          <Table.Row>
+            <Table.HeaderCell colSpan='7'>
+              <Button
+                size='small'
+                as={Link}
+                to='/webhook/add'
+                loading={loading}
+              >
+                添加新的接口
+              </Button>
+              <Pagination
+                floated='right'
+                activePage={activePage}
+                onPageChange={onPaginationChange}
+                size='small'
+                siblingRange={1}
+                totalPages={
+                  Math.ceil(webhooks.length / ITEMS_PER_PAGE) +
+                  (webhooks.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
+                }
+              />
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Footer>
+      </Table>
+    </>
+  );
+};
+
+export default WebhooksTable;

web/src/helpers/utils.js

@@ -132,17 +132,7 @@ export function timestamp2string(timestamp) {
     second = '0' + second;
   }
   return (
-    year +
+    year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
-    '-' +
-    month +
-    '-' +
-    day +
-    ' ' +
-    hour +
-    ':' +
-    minute +
-    ':' +
-    second
   );
 }
 
@@ -156,19 +146,29 @@ export function downloadTextAsFile(text, filename) {
 }
 
 export async function testChannel(username, token, channel) {
-  let res = await API.post(
+  let res = await API.post(`/push/${username}/`, {
-    `/push/${username}/`, {
+    token,
-      token,
+    channel,
-      channel,
+    title: '消息推送服务',
-      title: '消息推送服务',
+    description:
-      description: channel === "" ? '消息推送通道测试成功' : `消息推送通道 ${channel} 测试成功`,
+      channel === ''
-      content: '欢迎使用消息推送服务，这是一条测试消息。'
+        ? '消息推送通道测试成功'
-    }
+        : `消息推送通道 ${channel} 测试成功`,
-  );
+    content: '欢迎使用消息推送服务，这是一条测试消息。',
+  });
   const { success, message } = res.data;
   if (success) {
     showSuccess('测试消息已发送');
   } else {
     showError(message);
   }
-}
+}
+
+export const verifyJSON = (str) => {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+};

web/src/pages/Webhook/EditWebhook.js

@@ -0,0 +1,160 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Header, Message, Segment } from 'semantic-ui-react';
+import { useParams } from 'react-router-dom';
+import { API, showError, showSuccess, verifyJSON } from '../../helpers';
+import { loadUserChannels } from '../../helpers/loader';
+
+const EditWebhook = () => {
+  const params = useParams();
+  const webhookId = params.id;
+  const isEditing = webhookId !== undefined;
+  const [loading, setLoading] = useState(isEditing);
+  const originInputs = {
+    name: '',
+    extract_rule: `{
+  "title": "attr1",
+  "description": "attr2.sub_attr",
+  "content": "attr3",
+  "url": "attr4"
+}`,
+    construct_rule:
+      '{\n' +
+      '  "title": "$title",\n' +
+      '  "description": "描述信息：$description",\n' +
+      '  "content": "内容：$content",\n' +
+      '  "url": "https://example.com/$titl}"\n' +
+      '}',
+    channel: '',
+  };
+
+  const [inputs, setInputs] = useState(originInputs);
+  const { name, extract_rule, construct_rule, channel } = inputs;
+  let [channels, setChannels] = useState([]);
+
+  const handleInputChange = (e, { name, value }) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  const loadWebhook = async () => {
+    let res = await API.get(`/api/webhook/${webhookId}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setInputs(data);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    const loader = async () => {
+      if (isEditing) {
+        loadWebhook().then();
+      }
+      let channels = await loadUserChannels();
+      if (channels) {
+        setChannels(channels);
+      }
+    };
+    loader().then();
+  }, []);
+
+  const submit = async () => {
+    if (!name) return;
+    if (!verifyJSON(extract_rule)) {
+      showError('提取规则不是合法的 JSON 格式！');
+      return;
+    }
+    if (!verifyJSON(construct_rule)) {
+      showError('构造规则不是合法的 JSON 格式！');
+      return;
+    }
+    let res = undefined;
+    let localInputs = { ...inputs };
+    if (isEditing) {
+      res = await API.put(`/api/webhook/`, {
+        ...localInputs,
+        id: parseInt(webhookId),
+      });
+    } else {
+      res = await API.post(`/api/webhook`, localInputs);
+    }
+    const { success, message } = res.data;
+    if (success) {
+      if (isEditing) {
+        showSuccess('接口信息更新成功！');
+      } else {
+        showSuccess('接口创建成功！');
+        setInputs(originInputs);
+      }
+    } else {
+      showError(message);
+    }
+  };
+
+  return (
+    <>
+      <Segment loading={loading}>
+        <Header as='h3'>{isEditing ? '更新接口配置' : '新建消息接口'}</Header>
+        <Form autoComplete='new-password'>
+          <Form.Field>
+            <Form.Input
+              label='名称'
+              name='name'
+              placeholder={'请输入接口名称'}
+              onChange={handleInputChange}
+              value={name}
+              autoComplete='new-password'
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Select
+              label='通道'
+              name='channel'
+              type={'text'}
+              options={channels}
+              placeholder={'请选择消息通道'}
+              onChange={handleInputChange}
+              value={channel}
+              autoComplete='new-password'
+              required
+            />
+          </Form.Field>
+          <Message>
+            如果你不知道如何写提取规则和构建规则，请看
+            <a
+              href='https://iamazing.cn/page/message-pusher-webhook'
+              target='_blank'
+            >
+              此教程
+            </a>
+            。
+          </Message>
+          <Form.Group widths='equal'>
+            <Form.TextArea
+              label='提取规则'
+              placeholder='在此输入提取规则，为一个 JSON，键为模板变量，值为 JSONPath 表达式'
+              value={inputs.extract_rule}
+              name='extract_rule'
+              onChange={handleInputChange}
+              style={{ minHeight: 200, fontFamily: 'JetBrains Mono, Consolas' }}
+            />
+          </Form.Group>
+          <Form.Group widths='equal'>
+            <Form.TextArea
+              label='构建规则'
+              placeholder='在此输入构建规则，不要改动 JSON 的键，只能改动值，值的部分可以引用模板变量，格式为 $VAR'
+              value={inputs.construct_rule}
+              name='construct_rule'
+              onChange={handleInputChange}
+              style={{ minHeight: 200, fontFamily: 'JetBrains Mono, Consolas' }}
+            />
+          </Form.Group>
+          <Button onClick={submit}>提交</Button>
+        </Form>
+      </Segment>
+    </>
+  );
+};
+
+export default EditWebhook;

web/src/pages/Webhook/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Header, Segment } from 'semantic-ui-react';
+import WebhooksTable from '../../components/WebhooksTable';
+
+const Webhook = () => (
+  <>
+    <Segment>
+      <Header as='h3'>我的接口</Header>
+      <WebhooksTable />
+    </Segment>
+  </>
+);
+
+export default Webhook;