Skip to content

llgululu/LinkVerify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

LinkVerify - Professional Network Protocol Testing Tool

LinkVerify - 专业网络协议测试工具

Electron Vue.js Node.js License

English | 中文


📖 Overview

LinkVerify is a comprehensive, professional-grade network protocol testing and debugging tool built with Electron + Vue2 + Node.js. It provides developers with powerful API testing, service simulation, and network protocol debugging capabilities, integrating support for HTTP, TCP, UDP, WebSocket, and MQTT protocols to help quickly identify and resolve network communication issues.

✨ Core Features

🚀 Multi-Protocol Support

HTTP/HTTPS

  • Client Mode: Full REST API testing with all HTTP methods (GET, POST, PUT, DELETE, PATCH, etc.)
  • Server Mode: Quickly create local mock servers with custom routes and responses
  • Features: Custom headers, authentication, request body editor, response preview

TCP Protocol

  • Client Mode: Connect to any TCP server with persistent connections
  • Server Mode: Create TCP servers that accept multiple client connections
  • Features: Bidirectional communication, message history, hex/text encoding

UDP Protocol

  • Client Mode: Send UDP datagrams to any endpoint
  • Server Mode: Listen for UDP packets on specified ports
  • Features: Recent client tracking, packet statistics, multiple encoding formats

WebSocket

  • Real-time Communication: Test WebSocket connections with text/binary messages
  • Event Monitoring: Track connection events and message flow
  • Auto-reconnect: Configurable reconnection strategies

MQTT

  • Complete Client: Full MQTT protocol support with QoS levels
  • Pub/Sub Model: Subscribe to topics and publish messages
  • Message Templates: Save and reuse common message patterns

🛠️ Developer Tools

  • JSON Formatter: Beautify, minify, and validate JSON data
  • Base64 Codec: Encode/decode text and files to/from Base64
  • Timestamp Converter: Convert between Unix timestamps and date formats
  • HEX Support: Send and receive data in hexadecimal format

💡 Smart Features

  • Persistent Connections: Servers and clients remain active when switching tabs
  • Self-Connection Testing: Connect your client to your own server for loopback testing
  • Message Throttling: Intelligent notification system prevents message spam
  • Multi-tab Interface: Handle multiple connections simultaneously
  • Internationalization: Full support for English and Chinese languages
  • Environment Variables: Manage multiple environments with variable substitution
  • Request History: Automatically save and replay previous requests
  • Import/Export: Share configurations across teams

🖥️ User Interface

Modern Design

  • Gradient colors and glassmorphism effects
  • Collapsible sidebar navigation
  • Multi-tab management for efficient multitasking
  • Real-time status bar showing connection states

Layout Structure

  • TCP/UDP Servers:
    • Control panel + Statistics (top row)
    • Connected clients table (middle)
    • Send data + Message log (bottom row)
  • TCP/UDP Clients:
    • Connection settings + Send data (left)
    • Message log + Statistics (right)

🔧 Technology Stack

Frontend

  • Vue 2.7 - Progressive JavaScript framework
  • Vue Router - Official routing manager
  • Vuex - State management pattern
  • Element UI - Desktop component library
  • Axios - HTTP client
  • SCSS - CSS preprocessor

Backend

  • Electron 25 - Cross-platform desktop framework
  • Node.js 18 - JavaScript runtime
  • Express - Web application framework
  • net/dgram - TCP/UDP native modules
  • MQTT.js - MQTT client library
  • ws - WebSocket library

🚀 Quick Start

Prerequisites

  • Node.js >= 18.0.0
  • npm >= 8.0.0 or yarn >= 1.22.0

Installation

# Clone the repository
git clone https://github.com/yourusername/LinkVerify.git

# Navigate to project directory
cd LinkVerify

# Install dependencies
npm install
# or
yarn install

# Run in development mode
npm run electron:serve
# or
yarn electron:serve

# Build for production
npm run electron:build
# or  
yarn electron:build

📝 Usage Guide

TCP Testing Example

  1. Start TCP Server

    • Navigate to TCP/UDP → TCP Server
    • Set port (e.g., 8080)
    • Click "Start Server"
    • Server listens on 0.0.0.0 (all interfaces)
  2. Connect TCP Client

    • Navigate to TCP/UDP → TCP Client
    • Enter host: 127.0.0.1
    • Enter port: 8080
    • Click "Connect"
  3. Test Communication

    • Send messages from client → appears in server log
    • Send messages from server → appears in client log
    • Both sides maintain persistent connection

HTTP API Testing

  1. Send Request

    • Select HTTP method
    • Enter endpoint URL
    • Configure headers, parameters, body
    • Set authentication if needed
    • Click Send button
    • View response with syntax highlighting
  2. Mock Server

    • Set server port
    • Add route rules with custom responses
    • Configure response delays
    • Start server
    • Test your API clients

📁 Project Structure

LinkVerify/
├── src/
│   ├── main/                 # Main process (Electron)
│   │   ├── tcpUdpHandler.js # TCP/UDP backend handler
│   │   └── httpServer.js    # HTTP server implementation
│   ├── modules/             # Feature modules
│   │   ├── tcp-client/      # TCP client component
│   │   ├── tcp-server/      # TCP server component
│   │   ├── udp-client/      # UDP client component
│   │   ├── udp-server/      # UDP server component
│   │   ├── http-client/     # HTTP client module
│   │   ├── http-server/     # HTTP server module
│   │   ├── mqtt-client/     # MQTT client module
│   │   ├── websocket/       # WebSocket module
│   │   └── tools/           # Utility tools
│   ├── store/               # Vuex state management
│   │   └── modules/         # Store modules
│   ├── components/          # Shared components
│   ├── styles/             # Style files
│   ├── i18n/               # Internationalization
│   └── utils/              # Utility functions
├── public/                 # Static assets
├── package.json           # Project configuration
└── vue.config.js         # Vue configuration

🎨 Key Features

Connection Persistence

  • Servers continue running when switching between tabs
  • Connections remain active during navigation
  • State managed through Vuex store

Message Control System

  • Prevents notification spam with intelligent throttling
  • Groups similar messages (shows count)
  • Configurable message intervals and duration
  • Queue management for sequential display

Layout Consistency

  • All TCP/UDP interfaces follow same design pattern
  • Responsive layouts adapt to content
  • Consistent heights and proportions
  • Clean, professional appearance

🤝 Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Special thanks to these open source projects:

📊 Project Status

  • ✅ HTTP Client/Server
  • ✅ TCP Client/Server (separate modules)
  • ✅ UDP Client/Server (separate modules)
  • ✅ MQTT Client
  • ✅ WebSocket Support
  • ✅ Developer Tools (JSON, Base64, Timestamp)
  • ✅ Internationalization (EN/ZH)
  • ✅ Message Throttling System
  • ✅ Persistent Connections

📖 概述

LinkVerify 是一款使用 Electron + Vue2 + Node.js 构建的综合性、专业级网络协议测试和调试工具。它为开发者提供强大的 API 测试、服务模拟和网络协议调试功能,集成支持 HTTP、TCP、UDP、WebSocket 和 MQTT 协议,帮助快速识别和解决网络通信问题。

✨ 核心功能

🚀 多协议支持

HTTP/HTTPS

  • 客户端模式:支持所有 HTTP 方法(GET、POST、PUT、DELETE、PATCH 等)的完整 REST API 测试
  • 服务器模式:快速创建带有自定义路由和响应的本地模拟服务器
  • 特性:自定义请求头、身份验证、请求体编辑器、响应预览

TCP 协议

  • 客户端模式:连接到任何 TCP 服务器并保持持久连接
  • 服务器模式:创建可接受多个客户端连接的 TCP 服务器
  • 特性:双向通信、消息历史、十六进制/文本编码

UDP 协议

  • 客户端模式:向任何端点发送 UDP 数据报
  • 服务器模式:在指定端口监听 UDP 数据包
  • 特性:最近客户端追踪、数据包统计、多种编码格式

WebSocket

  • 实时通信:测试 WebSocket 连接,支持文本/二进制消息
  • 事件监控:追踪连接事件和消息流
  • 自动重连:可配置的重连策略

MQTT

  • 完整客户端:完全支持 MQTT 协议及 QoS 级别
  • 发布/订阅模型:订阅主题并发布消息
  • 消息模板:保存并重用常见消息模式

🛠️ 开发者工具

  • JSON 格式化器:美化、压缩和验证 JSON 数据
  • Base64 编解码器:将文本和文件编码/解码为 Base64
  • 时间戳转换器:在 Unix 时间戳和日期格式之间转换
  • 十六进制支持:以十六进制格式发送和接收数据

💡 智能功能

  • 持久连接:切换标签页时服务器和客户端保持活动状态
  • 自连接测试:将客户端连接到自己的服务器进行环回测试
  • 消息节流:智能通知系统防止消息泛滥
  • 多标签页界面:同时处理多个连接
  • 国际化:完全支持英语和中文
  • 环境变量:管理多个环境并支持变量替换
  • 请求历史:自动保存并重放之前的请求
  • 导入/导出:在团队间共享配置

🖥️ 用户界面

现代化设计

  • 渐变色和毛玻璃效果
  • 可折叠侧边栏导航
  • 多标签页管理,提高多任务效率
  • 实时状态栏显示连接状态

布局结构

  • TCP/UDP 服务器
    • 控制面板 + 统计信息(顶部)
    • 已连接客户端表格(中部)
    • 发送数据 + 消息日志(底部)
  • TCP/UDP 客户端
    • 连接设置 + 发送数据(左侧)
    • 消息日志 + 统计信息(右侧)

🔧 技术栈

前端

  • Vue 2.7 - 渐进式 JavaScript 框架
  • Vue Router - 官方路由管理器
  • Vuex - 状态管理模式
  • Element UI - 桌面端组件库
  • Axios - HTTP 客户端
  • SCSS - CSS 预处理器

后端

  • Electron 25 - 跨平台桌面应用框架
  • Node.js 18 - JavaScript 运行时
  • Express - Web 应用程序框架
  • net/dgram - TCP/UDP 原生模块
  • MQTT.js - MQTT 客户端库
  • ws - WebSocket 库

🚀 快速开始

前置要求

  • Node.js >= 18.0.0
  • npm >= 8.0.0 或 yarn >= 1.22.0

安装

# 克隆仓库
git clone https://github.com/yourusername/LinkVerify.git

# 进入项目目录
cd LinkVerify

# 安装依赖
npm install
#
yarn install

# 开发模式运行
npm run electron:serve
#
yarn electron:serve

# 生产环境构建
npm run electron:build
#
yarn electron:build

📝 使用指南

TCP 测试示例

  1. 启动 TCP 服务器

    • 导航到 TCP/UDP → TCP 服务器
    • 设置端口(例如:8080)
    • 点击"启动服务器"
    • 服务器监听 0.0.0.0(所有接口)
  2. 连接 TCP 客户端

    • 导航到 TCP/UDP → TCP 客户端
    • 输入主机:127.0.0.1
    • 输入端口:8080
    • 点击"连接"
  3. 测试通信

    • 从客户端发送消息 → 显示在服务器日志中
    • 从服务器发送消息 → 显示在客户端日志中
    • 双方保持持久连接

HTTP API 测试

  1. 发送请求

    • 选择 HTTP 方法
    • 输入端点 URL
    • 配置请求头、参数、请求体
    • 根据需要设置身份验证
    • 点击发送按钮
    • 查看带语法高亮的响应
  2. 模拟服务器

    • 设置服务器端口
    • 添加带有自定义响应的路由规则
    • 配置响应延迟
    • 启动服务器
    • 测试您的 API 客户端

📁 项目结构

LinkVerify/
├── src/
│   ├── main/                 # 主进程(Electron)
│   │   ├── tcpUdpHandler.js # TCP/UDP 后端处理器
│   │   └── httpServer.js    # HTTP 服务器实现
│   ├── modules/             # 功能模块
│   │   ├── tcp-client/      # TCP 客户端组件
│   │   ├── tcp-server/      # TCP 服务器组件
│   │   ├── udp-client/      # UDP 客户端组件
│   │   ├── udp-server/      # UDP 服务器组件
│   │   ├── http-client/     # HTTP 客户端模块
│   │   ├── http-server/     # HTTP 服务器模块
│   │   ├── mqtt-client/     # MQTT 客户端模块
│   │   ├── websocket/       # WebSocket 模块
│   │   └── tools/           # 实用工具
│   ├── store/               # Vuex 状态管理
│   │   └── modules/         # 状态模块
│   ├── components/          # 共享组件
│   ├── styles/             # 样式文件
│   ├── i18n/               # 国际化
│   └── utils/              # 工具函数
├── public/                 # 静态资源
├── package.json           # 项目配置
└── vue.config.js         # Vue 配置

🎨 关键特性

连接持久性

  • 切换标签页时服务器继续运行
  • 导航期间连接保持活动状态
  • 通过 Vuex store 管理状态

消息控制系统

  • 通过智能节流防止通知泛滥
  • 分组相似消息(显示计数)
  • 可配置消息间隔和持续时间
  • 队列管理以顺序显示

布局一致性

  • 所有 TCP/UDP 界面遵循相同设计模式
  • 响应式布局适应内容
  • 一致的高度和比例
  • 清洁、专业的外观

🤝 贡献

欢迎贡献!请随时提交问题和拉取请求。

  1. Fork 仓库
  2. 创建您的功能分支(git checkout -b feature/AmazingFeature
  3. 提交您的更改(git commit -m 'Add some AmazingFeature'
  4. 推送到分支(git push origin feature/AmazingFeature
  5. 开启拉取请求

📄 许可证

本项目根据 MIT 许可证授权 - 详见 LICENSE 文件。

🙏 致谢

特别感谢这些开源项目:

📊 项目状态

  • ✅ HTTP 客户端/服务器
  • ✅ TCP 客户端/服务器(独立模块)
  • ✅ UDP 客户端/服务器(独立模块)
  • ✅ MQTT 客户端
  • ✅ WebSocket 支持
  • ✅ 开发者工具(JSON、Base64、时间戳)
  • ✅ 国际化(英文/中文)
  • ✅ 消息节流系统
  • ✅ 持久连接

LinkVerify - 让网络调试简单高效
LinkVerify - Making Network Debugging Simple and Efficient

Made with ❤️ for the Developer Community
为开发者社区用心打造 ❤️

About

LinkVerify is a comprehensive, professional-grade network protocol testing and debugging tool built with Electron + Vue2 + Node.js. It provides developers with powerful API testing, service simulation, and network protocol debugging capabilities, integrating support for HTTP, TCP, UDP, WebSocket, and MQTT protocols to help quickly identify and reso

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors