Synclan:一个基于局域网的即时通讯式文件传输工具

最近完成了一个自己开发的开源项目 ------ Synclan

它是一个基于局域网的即时通讯式文件传输工具。

简单来说,在同一个 Wi-Fi 或局域网环境下,可以像使用聊天软件一样:

  • 发送文字消息
  • 分享图片
  • 传输文件
  • 查看历史消息

同时它不依赖云端服务器,设备之间直接通信,数据只在自己的局域网环境中流转。

项目地址:

github.com/1111mp/sync...


为什么会做 Synclan?

Synclan 的诞生其实有两个原因。

第一个原因:日常中的局域网传输需求

平时工作和生活中,经常会遇到一些设备之间传输文件的场景:

比如:

  • 公司电脑之间快速传资料
  • 家里的电脑互传照片
  • 临时给另一台设备发送文件
  • 不希望文件经过第三方服务器

目前已经有不少优秀的局域网传输工具,比如:

  • LocalSend
  • AirDrop
  • 各类文件共享工具

其中 LocalSend 是一个非常优秀的开源项目,它解决了不同平台之间快速传文件的问题。

但是在实际使用过程中,我发现它更偏向于:

"选择文件 → 发送 → 接收"

这样的单次文件传输场景。

而在我的日常使用中,有时候希望的不只是发送一个文件,而是:

  • 先沟通一下发送什么
  • 发送一些说明文字
  • 连续发送多个文件
  • 查看之前发送过的内容

这更接近即时通讯工具的使用方式。

另外,LocalSend 需要在参与通信的设备上安装对应客户端,对于一些临时设备或者不方便安装软件的场景,并不是特别方便。

所以我希望做一个:

打开应用,发现设备,像聊天一样交换内容。

这就是 Synclan 最初的想法。


第二个原因:对即时通讯体验的思考

另外一个原因来自日常工作中的使用体验。

工作中长期使用飞书后,我觉得它在消息输入和展示方面做得非常成熟。

尤其是:

  • 消息输入体验
  • 富文本编辑
  • 快捷键操作
  • 图片和附件结合
  • 消息展示方式

这些细节会明显影响一个 IM 工具的使用感受。

很多工具功能上可以完成任务,但是使用过程中会感觉:

"它只是实现了功能"。

而飞书这类产品更多关注:

"用户如何自然地完成这个动作"。

所以在设计 Synclan 的时候,我希望它不仅仅是一个文件传输工具。

而是一个:

拥有现代即时通讯体验的局域网通信工具。

因此 Synclan 在消息输入框、消息展示、交互细节等方面参考了飞书的一些设计思路。


Synclan 的整体设计

Synclan 采用了一种比较特殊的架构:

桌面端提供核心服务,浏览器端无需安装即可访问

启动 Synclan 桌面端后,会同时提供:

  • HTTP 服务
  • Socket.IO 实时通信服务
  • Web 页面资源
  • 文件访问服务

其他设备只需要访问:

arduino 复制代码
http://设备IP:53317

即可加入。

不需要:

  • 注册账号
  • 部署服务器
  • 安装客户端

技术栈

Synclan 主要由前端、桌面端和后端三部分组成。

前端

使用:

  • React
  • TypeScript
  • Shadcn/ui
  • Tailwind CSS

主要负责:

  • 页面展示
  • 消息渲染
  • 文件选择
  • 状态管理
  • 用户交互

桌面端

使用:

  • Tauri 2.0

选择 Tauri 主要考虑:

  • 应用体积更小
  • 内存占用更低
  • 可以方便调用 Rust 能力

相比 Electron,Tauri 更适合这种需要本地服务能力的应用。

后端

核心服务使用 Rust:

其中:

Axum 负责:

  • HTTP API
  • 文件上传
  • 设备管理

Socket.IO 负责:

  • 实时消息通信
  • 在线状态
  • 消息推送

消息系统设计

消息系统是 Synclan 中比较重要的一部分。

目前支持:

  • 普通文本消息
  • Markdown
  • 图片消息
  • 视频消息
  • 文件消息

相比传统 IM 中包含发送中、发送成功、失败、已读、未读等复杂状态流转,SyncLan 仅关注消息的传递与展示,减少状态维护成本,同时降低系统复杂度。


参考飞书设计的消息输入框

为了实现更接近现代 IM 的输入体验,Synclan 没有使用普通 textarea。

而是基于 Lexical 实现了一套富文本编辑器。

目前输入框支持:

  • 文本格式化
  • Markdown 快捷输入
  • Emoji
  • 代码编辑
  • 图片粘贴
  • 快捷键操作
  • 富文本消息解析

消息发送界面同时支持直接:

  • 拖入文件
  • 添加附件

让消息输入更加接近现代 IM 产品。

实现过程中也遇到了一些问题:

比如:

  • 编辑器状态管理
  • 自定义 Node
  • 图片附件和消息数据关联
  • Markdown 转换
  • 保持和飞书一样的交互和体验

最终希望达到:

输入内容 → 直接发送 → 对方看到完整消息

这样的体验。


文件传输

文件传输是 Synclan 的核心能力之一。

目前支持:

  • 图片
  • 视频
  • 普通文件
  • 大文件传输

文件不会上传到第三方服务器,而是保存到本机配置的资源目录中。

大文件分片上传

为了提升大文件传输的稳定性,Synclan 实现了文件分片上传机制。

当文件较大时,会自动切分成多个数据块:

erlang 复制代码
大文件

↓

chunk 1
chunk 2
chunk 3
...

↓

服务端接收

↓

合并文件

↓

完成上传

这样可以避免:

  • 单次上传请求过大
  • 网络波动导致整个上传失败
  • 内存占用过高

同时也为后续扩展:

  • 断点续传
  • 上传暂停恢复
  • 更细粒度的传输状态

提供基础。


设备发现

局域网工具首先需要解决的问题:

就是如何找到其他设备。

Synclan 提供设备发现功能。


Web 访问

扫描二维码,快速访问。

除了桌面客户端之外,Synclan 也支持浏览器访问。

只需要:

  1. 一台电脑运行 Synclan
  2. 其他设备连接同一 Wi-Fi
  3. 浏览器打开地址

即可使用。

适用于:

  • 临时电脑
  • 不方便安装软件的设备
  • 移动设备浏览器访问



数据存储和安全

Synclan 不依赖云端服务。

数据主要保存在本地:

  • SQLite 数据库
  • 本地资源目录

同时支持:

  • 数据库加密
  • HTTPS
  • 自签名证书

用户可以根据自己的需求选择是否开启 HTTPS。


API 和扩展能力

Synclan 后端提供 OpenAPI 文档。

启动应用后可以访问:

arduino 复制代码
http://127.0.0.1:53317/api/docs

查看接口。

目前主要包括:

  • Device
  • Message
  • Upload
  • Synclan

等模块。


开发过程中遇到的问题

开发 Synclan 的过程中,也踩了一些坑。

Tauri 多端资源管理

因为同时支持:

  • 桌面 UI
  • Web 页面

所以需要处理:

  • 两套前端资源构建
  • 静态资源加载
  • 打包路径

局域网 HTTPS

自签名证书在不同系统上的处理方式差异比较大。

尤其:

  • macOS Keychain
  • Windows 证书管理
  • 浏览器安全策略

都需要额外适配。


后续计划

目前 Synclan 还在持续开发中。

后续计划继续完善:

  • 文件断点续传
  • 更细粒度的传输状态展示
  • 更多消息类型支持
  • 更完善的设备管理
  • 更安全的通信机制
  • 更多平台支持

最后

开发 Synclan 的过程,对我来说不仅是完成一个工具。

更像是一次完整的跨平台应用实践:

  • React 前端开发
  • Tauri 桌面应用
  • Rust 后端服务
  • 局域网通信
  • 文件传输
  • 富文本编辑器
  • 应用打包发布

从最开始一个简单的想法,到现在可以真正运行在多个设备之间,也是一个比较有意思的过程。

如果你也有类似的局域网通信需求,欢迎体验和反馈。

GitHub Releases

相关推荐
她说彩礼65万1 小时前
ASP.NET Core 环境配置
后端·asp.net
phltxy1 小时前
LangChain_v1_Agent快速开发和更新说明
前端·javascript·langchain
网络研究院1 小时前
安卓正在变成苹果,谷歌将限制第三方应用的安装
开源·安卓·谷歌·应用·安装·限制·平台
网易云信1 小时前
企业级 IM,不是功能更多,而是场景更对
人工智能·后端
Hyyy1 小时前
Electron多进程
前端
swipe1 小时前
08|(前端转全栈)一个商品详情接口背后的完整链路:HTTP、Redis、MySQL 与 JSON
前端·后端·全栈
AmazingEgg1 小时前
Eggblog博客部署文档
后端
程序员天天困2 小时前
Arthas mc + retransform 实战:线上改完代码不用重新发版
jvm·后端
光影少年2 小时前
RN原生交互 & 桥接
前端·javascript·react native·react.js·前端框架