Skip to content

adminkk/websocket-debug-tool

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WebSocket 调试工具

一个纯前端的 WebSocket 连接调试工具,支持消息发送/接收、心跳检测、自动重连、消息模板等功能。

功能特性

连接管理

  • 支持 ws://wss:// 协议
  • 自动记录连接历史(最多 20 条)
  • 一键连接/断开

消息处理

  • 实时消息发送与接收
  • 消息类型筛选(全部/发送/接收/心跳)
  • 关键字搜索
  • JSON 格式化显示
  • 单条消息导出(JSON/CSV 格式)

心跳检测

  • 可配置的心跳消息
  • 自定义心跳间隔
  • 支持选择模板作为心跳内容

自动重连

  • 自动检测连接断开
  • 可配置重试次数和间隔
  • 状态实时显示

模板管理

  • 预设消息模板
  • 快捷键发送(1-9)
  • 模板管理(新增/编辑/删除)

数据持久化

  • 配置自动保存
  • 支持导出/导入配置
  • 主题切换(深色/浅色)

使用方法

快速开始

  1. 在服务器地址栏输入 WebSocket 服务器地址
  2. 点击「连接」按钮建立连接
  3. 在消息输入框输入内容,按 Enter 发送
  4. 接收到的消息会显示在消息列表中

快捷键

快捷键 功能
1-9 发送对应模板的消息
Ctrl + Enter 发送消息
Escape 断开连接 / 关闭弹窗

消息导出

每条消息右侧有 JSONCSV 导出按钮:

  • JSON:包含消息类型、时间、内容(JSON 会解析)
  • CSV:包含 Type、Time、Content 三列

配置管理

  • 导出配置:导出当前所有配置(包含模板和连接历史)
  • 导入配置:从文件恢复配置
  • 清除数据:重置所有数据和配置

数据存储

所有数据存储在浏览器 localStorage 中:

  • ws-debug-config:主配置(URL、主题、心跳、重连、模板)
  • ws-url-history:连接历史记录

技术栈

  • 纯原生 JavaScript (ES6+)
  • HTML5 + CSS3
  • 无外部依赖

浏览器支持

支持所有现代浏览器:

  • Chrome / Edge
  • Firefox
  • Safari

License

MIT

About

一个纯前端的 WebSocket 连接调试工具

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages