Snapdrop-WebRTC局域网数据共享

概述

生活中总是需要在多个平台间共享数据,文件或者剪贴板数据。一般的实现方式就是在多个平台安装一个客户端工具实现数据共享,类似微信、airdroid,不过这种操作受限于网络速度,好在现在有WebRTC可以实现局域网的数据共享,对应的有一个项目Snapdrop利用WebRTC做到了”开袋即食“。

Snapdrop是一款开源的跨设备传输文件与文本工具,只需要浏览器即可使用,基于 WebRTC 在局域网内传输内容,属于PWA应用(渐进式网页应用),可以非常方便的在不同设备的浏览器间进行文件与文本的传输。开源,并可自部署。
界面简单,页面下方是你的名字(随机),比如上图手机上的名字是 Yellow Emu,那么在电脑的浏览器上点击这个名字就可以传输文件了。
要传输文本,只需要右键对应的名字即可(手机上是长按),而接收端会提示关闭(Close)或者复制(COPY),非常方便。
Snapdrop 本身提供了一个网站 即开即用。同时在GitHub开源,并且提供了完整的Docker部署方式。考虑到国情原因,还是建议把snapdrop部署在自己的服务器上。

部署流程

  1. 下载docker-compose文件
git clone https://github.com/RobinLinus/snapdrop.git
  1. 启动服务,验证输出
cd snapdrop
docker-compose up

此操作会自动下载需要的容器,配置文件默认映射容器内的8080端口到宿主的80端口,以及暴露443端口。
有需要的话,可以修改默认配置。
对于版本问题,可以修改docker-compose文件的version,改为2

如果确认容器正常部署,可以Ctrl-C关闭容器,重新运行docker-compose up -d后台运行服务。

国际化

Snapdrop本身不支持国际化(i18n),感觉主要还是由于Snapdrop的逻辑实现决定的,在用户访问Snapdrop的时候,服务端会分配给用户一个随机名称,这在国际化实现上,可能有点麻烦。
Snapdrop的容器部署只是把必要工具部署在容器内,项目源码仍在宿主内保存,这也是部署第一部需要git下载项目而不是复制docker-compose文件直接pull的原因。
项目的服务端采用nodejs实现,npm上有各种语言随机名称的包,但是这肯定会增加项目不必要的繁琐实现。不过作为一个经常用nodejs造轮子的人来说,这显然不是什么难事。

  1. 安装中文随机名称包
cd snapdrop/server
npm i random-chinese-name-generator --save
  1. 修改服务端源码index.js
vim index.js
//const { uniqueNamesGenerator, animals, colors } = require('unique-names-generator');
const { generateRandomChineseName } = require('random-chinese-name-generator')
// ...
_setName(req) {
        var ua = parser(req.headers['user-agent']);
        this.name = {
            model: ua.device.model,
            os: ua.os.name,
            browser: ua.browser.name,
            type: ua.device.type,
            //displayName: uniqueNamesGenerator({ length: 2, separator: ' ', dictionaries: [colors, animals], style: 'capital' })
            displayName: generateRandomChineseName()
        };
    }
  1. 修改中文名称包源码
    random-chinese-name-generator包本身的名字格式是xxのyy,中间使用日文连接,为了更好的国际化,可以修改下这个连字符。
vim snapdrop/server/node_modules/random-chinese-name-generator/dist/random-chinese-name-generator.umd.js
var generateRandomChineseName = function () {
    //return ADJECTIVES[getRandomNumer(ADJECTIVES.length)] + "\u306E" + NAMES[getRandomNumer(NAMES.length)];
    return ADJECTIVES[getRandomNumer(ADJECTIVES.length)] + "的" + NAMES[getRandomNumer(NAMES.length)];
};
  1. 前端web界面
    前端web界面的中文可以通过修改snapdrop/client/中的页面实现,主要包括index.html以及scripts/network.jsscripts/ui.js,只要根据界面文字替换对应内容就可以了,这里不再赘述。

相关链接

Snapdrop
Github