LocalNetMsg/README.md

LocalNetMsg

局域网即时通讯工具,飞书/微信聊天风格。基于 Electron + Vue 3 + TypeScript。

功能

• 局域网自动发现 (UDP 广播)
• 1 对 1 私聊,消息持久化 (SQLite)
• 富文本消息:Markdown / 代码高亮 / @提醒 / 表情
• 图片消息:粘贴板、拖拽、本地选择
• 文件传输:任意类型,大文件流式上传
• 飞书式三栏 UI,消息气泡、时间分组、发送状态
• 系统托盘最小化,后台新消息系统级通知
• 接收文件按 设置目录/YYYY-MM/ 自动归档

开发

环境要求: Node.js >= 20

npm install
npm run dev        # 启动 Electron + 热更新

第一次启动时:

• 默认接收目录: ~/Documents/LocalNetMsg
• 默认设备名: 操作系统主机名
• 两个端口自动分配 (UDP 发现 47800 / WebSocket 47900 / 文件 47901)

要测试多设备,在同一局域网的不同机器上各跑一个实例即可。

项目结构

src/
├── main/          Electron 主进程
│   ├── index.ts     入口: 窗口、托盘、IPC
│   ├── discovery.ts UDP 局域网发现
│   ├── chat-server  WebSocket 服务端
│   ├── chat-client  WebSocket 客户端
│   ├── file-server  HTTP 文件服务
│   ├── db.ts        SQLite 持久化
│   ├── settings.ts  electron-store
│   ├── notify.ts    系统通知
│   └── protocol.ts  消息协议定义
├── preload/       contextBridge 桥接
└── renderer/      Vue 3 渲染层
    ├── src/
    │   ├── views/      ChatView, SettingsView
    │   ├── components/ Sidebar, MessageList, MessageItem, MessageInput
    │   ├── stores/     Pinia
    │   ├── api/        IPC 桥接
    │   └── utils/      markdown, format
    └── index.html

配置

~/AppData/Roaming/local-net-msg/config.json (electron-store):

• deviceName: 本机在网络中的显示名
• downloadDir: 接收文件保存目录
• notifications: 是否启用系统通知

端口

用途	端口	协议
局域网发现	47800	UDP
聊天	47900	WebSocket
文件传输	47901	HTTP

被占用时自动顺延。