Skip to content

Notifyman/Notifyman

BranchesTags

Repository files navigation

Notifyman - 简单快捷的消息通知平台

一个开源的实时消息通知平台，专为开发者和团队打造，支持日志记录、部署通知、团队协作等多种场景。

Next.js React TypeScript Ant Design

demo1

demo1

✨ 核心功能

  • 🚀 实时 Socket 通知 - 基于 Socket 技术，实时接收最新消息，无需刷新页面即可获得即时通知
  • 🎨 HTML 消息定制 - 消息卡片基于 HTML，可随意定制布局样式，发送的消息也支持 HTML 格式
  • 🔔 桌面通知 - 支持浏览器桌面通知，重要消息及时提醒，不错过任何关键信息
  • ⚡ 简单易用 - 三步完成集成，无复杂配置。创建项目后即可通过简单的 API 调用发送消息
  • 🎯 多场景应用 - 适用于日志记录、项目部署结果通知、测试团队协作等多种业务场景
  • 📡 简单 API 集成 - 提供简洁的 API 接口，快速集成到您的项目中，支持多种编程语言

🎯 应用场景

📊 日志记录

系统错误、性能监控、用户行为等日志信息实时推送，帮助开发团队快速定位和解决问题。

🚀 部署通知

CI/CD 流程完成后自动通知测试团队，包含部署状态、版本信息、测试环境地址等关键信息。

👥 团队协作

代码审查、任务分配、项目进度更新等团队协作消息，确保团队成员及时了解项目动态。

🛠️ 技术栈

  • 前端框架: Next.js 15 (React 19)
  • UI 组件库: Ant Design 5
  • 样式方案: TailwindCSS 4
  • 代码编辑器: CodeMirror
  • 实时通信: Ably WebSocket
  • 类型系统: TypeScript 5
  • 包管理器: npm/pnpm/yarn

📦 本地运行

安装依赖

# nvm use 22 切换 node 版本

# 使用 npm
npm install

# 或使用 pnpm
pnpm install

# 或使用 yarn
yarn install

启动开发服务器

# 启动开发模式
npm run dev

# 应用将在 http://localhost:3000 启动

🚀 快速开始

1. 创建项目

访问 /addProject 页面，填写以下信息：

  • 项目地址 URL 后缀
  • 项目名称
  • 消息卡片 HTML 模板
  • 消息卡片最高高度
  • 是否开启浏览器通知

2. 调用发送接口

使用简单的 API 调用发送消息：

curl -X POST 'https://test-api.notifyman.com/api/createMessage' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer YOUR_API_KEY' \
-d '{
  "projectId": "test",
  "notificationTitle": "通知标题",
  "notificationDescription": "通知内容",
  "data": {
    "projectName": "测试项目",
    "branchName": "test分支",
    "status": "部署成功",
    "time": "2025年1月1日 10:00:00",
    "gitLog": "这里可以传带style的html，这样效果出来更美观",
    "showQrcode": "block",
    "qrcode": "https://baidu.com"
  }
}'

调用发送接口的 shell 脚本示例供参考：这段脚本会发送一个部署成功的消息，其中会包含最近 3 条 html 形式的 git 提交记录

#!/bin/bash

# 如果放到阿里云流水线运行，可以把下面这两个变量 PIPELINE_NAME、CI_COMMIT_REF_NAME 的赋值删除，这是流水线的环境变量
PIPELINE_NAME='项目名称'
CI_COMMIT_REF_NAME='分支名称'

API_URL="https://test-api.notifyman.com/api/createMessage"
AUTH_TOKEN="Bearer "
PROJECT_ID="test"

COMMIT_COUNT=3

PROJECT_NAME=${PIPELINE_NAME}
NOTIFICATION_TITLE="${PROJECT_NAME}部署成功"
BRANCH_NAME=${CI_COMMIT_REF_NAME}
NOTIFICATION_DESCRIPTION=$(git log --no-merges -${COMMIT_COUNT} --pretty=%s | tr '\n' ';' | sed 's/;$//')

SHOW_QRCODE="none"
STATUS="部署成功"

GIT_LOG_HTML=$(git log --no-merges -${COMMIT_COUNT} --numstat --date=format:'%Y-%m-%d %H:%M:%S' --pretty="format:COMMIT_START|%h|%an|%ad|%s" | \
{
    first_commit=true
    # 逐行读取 git log 的输出
    while IFS= read -r line; do
        # 判断是否为 COMMIT_START 标记的 commit 标题行
        if [[ "$line" == "COMMIT_START|"* ]]; then
            # 如果不是第一个 commit，则为前一个 commit 添加结尾和分隔符
            if [ "$first_commit" = false ]; then
                printf "</div><div style=\"height:10px\"></div>"
            fi
            first_commit=false

            # 解析 commit 标题行
            commit_data="${line#COMMIT_START|}"
            IFS='|' read -r hash who when comment <<< "$commit_data"

            # 打印 commit 信息的 HTML
            printf "<div style=\"display:flex;align-items:center;gap:16px;font-size:12px;color:#6b7280\">"
            printf "<span title=\"Author\" style=\"display:inline-flex;align-items:center;gap:4px\">👤 %s</span>" "$who"
            printf "<span title=\"time\" style=\"display:inline-flex;align-items:center;gap:4px\">⏱️ %s</span>" "$when"
            printf "<span title=\"commit\" style=\"display:inline-flex;align-items:center;gap:4px\">💬 %s</span>" "$comment"
            printf "</div>"
            # 为文件变更列表准备一个容器
            printf "<div style=\"padding-top:10px;font-size:11px;color:#4b5563;margin-bottom:2px\">"
        
        # 判断是否为文件统计行（通过是否包含tab制表符来识别）
        elif [[ "$line" == *$'\t'* ]]; then
            # 解析文件统计行 (新增行数、删除行数、文件路径)
            read -r added deleted file <<< "$line"
            if [ -n "$file" ]; then
                printf "<div style=\"margin-bottom:4px\">%s <span style=\"color:#16a34a\">(+%s)</span> <span style=\"color:#dc2626\">(-%s)</span></div>" "$file" "$added" "$deleted"
            fi
        fi
    done
    # 循环结束后，为最后一个commit添加结尾标签
    if [ "$first_commit" = false ]; then
        printf "</div>"
    fi
})

JSON_PAYLOAD=$(jq -n \
                  --arg projectId "$PROJECT_ID" \
                  --arg notificationTitle "$NOTIFICATION_TITLE" \
                  --arg notificationDescription "$NOTIFICATION_DESCRIPTION" \
                  --arg projectName "$PROJECT_NAME" \
                  --arg branchName "$BRANCH_NAME" \
                  --arg gitLog "$GIT_LOG_HTML" \
                  --arg showQrcode "$SHOW_QRCODE" \
                  --arg status "$STATUS" \
                  --arg time "$(date '+%Y-%m-%d %H:%M:%S')" \
                  '{
                    "projectId": $projectId,
                    "notificationTitle": $notificationTitle,
                    "notificationDescription": $notificationDescription,
                    "data": {
                      "projectName": $projectName,
                      "branchName": $branchName,
                      "gitLog": $gitLog,
                      "showQrcode": $showQrcode,
                      "status": $status,
                      "time": $time
                    }
                  }')

curl -s -X POST "${API_URL}" \
  -H 'Content-Type: application/json' \
  -H "Authorization: ${AUTH_TOKEN}" \
  -d "${JSON_PAYLOAD}"

echo "\n\n部署信息上报完成！"

3. 分享项目地址

将项目地址 https://notifyman.com/your-project-id 分享给需要查看的人，他们即可实时接收消息通知。

📂 项目结构

notifyman/
├── public/              # 静态资源
├── src/
│   ├── app/            # Next.js App Router 页面
│   │   ├── [projectId]/  # 项目详情页
│   │   ├── addProject/   # 创建/编辑项目
│   │   ├── projects/     # 项目列表
│   │   └── page.tsx      # 首页
│   ├── components/     # React 组件
│   ├── contexts/       # React Context
│   └── lib/           # 工具函数和配置
├── .env.production    # 生产环境配置
├── package.json       # 项目依赖
└── README.md         # 项目文档

📄 许可证

MIT License

🔗 相关链接

📮 联系方式

如有任何问题或建议，欢迎通过以下方式联系：

Made with ❤️ by Notifyman Team

About

notifyman.com

Resources

Readme
Activity

Stars

22 stars

Watchers

0 watching

Forks

3 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages