大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

什么是 ShareDrop

ShareDrop 是一款受 Apple AirDrop 服务启发的 Web 应用程序，其允许用户直接在设备之间传输文件而无需先将文件上传到任何服务器。 ShareDrop 使用 WebRTC（ 一种开放式网络框架，可在浏览器中启用实时通信 RTC 功能，目前已经成为 HTML5 原生标准 ） 进行安全的点对点文件传输，并使用 Firebase（Firebase 提供详细的文档和跨平台应用开发 SDK，帮助开发者构建和发布适用于 iOS、Android、Web、Flutter、Unity 等的应用） 进行状态管理和 WebRTC 信号传输。

Easy P2P file transfer powered by WebRTC - inspired by Apple AirDrop

ShareDrop 允许将文件发送到同一本地网络中的其他设备（即具有相同公共 IP 地址的设备），无需任何配置 ， 只需在所有设备上打开 https://www.sharedrop.io 就会看到彼此。 ShareDrop 还允许用户在 Web 之间发送文件 ，只需单击页面右上角的 + 按钮即可创建一个具有唯一 URL 的房间，并与想要向其发送文件的其他人共享此 URL。 一旦他们在其设备上的浏览器中打开此页面，就会看到彼此的头像。

目前 ShareDrop 支持以下浏览器：

• Chrome
• Edge (Chromium based)
• Firefox
• Opera
• Safari 13+

ShareDrop 和 AirDrop 之间的主要区别在于，ShareDrop 需要互联网连接才能发现其他设备，而 AirDrop 不需要互联网连接，因为它们之间创建了临时无线网络。 另一方面，ShareDrop 允许在移动设备（Android 和 iOS）和桌面设备之间甚至网络之间共享文件。

目前 ShareDrop 在 Github 通过 MIT 协议开源，有 8.3k 的 star、1k 的 fork，是一个值得关注的开源项目。

ShareDrop 和 Snapdrop 区别

以前我有一篇文章介绍了 Snapdrop，可以点击这里查看《Snapdrop 开源！Apple Airdrop 跨平台 Webrtc 传输技术》。

ShareDrop 和 AirDrop 两种服务之间有许多相似之处。 例如，用户界面和设备命名约定相似；同时受到加密保护，不需要任何注册；同时还使用 webRTC 系统进行点对点传输。

然而，ShareDrop 和 Snapdrop 在很多方面也有所不同， 以下是 ShareDrop 和 Snapdrop 之间最显着的差异。

离线工作

Snapdrop 需要有效的互联网连接才能完成文件传输，而 ShareDrop 则不需要。

ShareDrop 只需要互联网即可在两个系统之间建立连接。 完成后，即使互联网断开也可以传输文件。

替代连接选项

Snapdrop 允许使用标准接口进行连接, 没有其他选择。

但 ShareDrop 允许使用其他选项来连接设备。 例如，可以点击 ShareDrop 界面上的 “.” 符号，它会生成一个唯一的图像名称，然后可以将该图像名称共享给其他设备进行连接。

本地网络外的文件共享

ShareDrop 还允许开发者将数据和文件共享到未连接到网络的设备。

同样，可以使用 . 按钮并共享图像名称以启动该过程。 ShareDrop 还可以使用二维码来传输文件，而 Snapdrop 没有二维码功能。

内容预览

这是比较 ShareDrop 与 Snapdrop 时的另一个重要区别。 ShareDrop 使用内容预览。 也就是说，发送文件后，接收者将获得文件预览，并弹出一个窗口询问他们是否要继续。

Snapdrop 没有此功能，这意味着一旦发送者选择并发送文件，接收者就只能接收该文件。 他们无法先进行预览，也无法选择接受或拒绝文件传输。

深色模式

Snapdrop 具有深色模式界面，可能适合一些有辅助功能问题的用户，而 ShareDrop 则没有这样的功能。

ShareDrop 本地开发

ShareDrop 还支持本地部署，可以按照下面的流程进行:

• 设置 Firebase
• 注册 Firebase 帐户并创建数据库。
• 转到 “安全规则” 选项卡，单击 “加载规则” 按钮并选择 firebase_rules.json 文件。
• 记下当前数据库 URL 及其 secret，可以在 “secret” 选项卡中找到该信息。
• 运行 npm install -g ember-cli 以安装 Ember CLI。
• 运行 yarn 来安装应用程序依赖项。
• 运行 cp .env{.sample,} 创建 .env 文件。 Foreman 在本地运行应用程序时将使用此文件来设置环境变量。
• SECRET 密钥用于加密 cookie 并根据 / 路由的公共 IP 地址生成房间名称，可以是任何随机字符串。可以使用例如：date | md5sum 生成一个字符串
• NEW_RELIC_* 密钥仅在生产中需要
• 运行 yarn development 来启动应用程序。

ShareDrop 部署

ShareDrop 支持与 Heroku 进行集成部署。

Heroku 是一个支持多种编程语言的云平台即服务（PaaS），在 2010 年被 Salesforce.com 收购。Heroku 作为最元祖的云平台之一，从 2007 年 6 月起开发，当时它仅支持 Ruby，但后来增加了对 Java、Node.js、Scala、Clojure、Python 以及 PHP 和 Perl 的支持。

要在 Heroku 中部署 ShareDrop 可以按照如下步骤完成。

首先，创建一个新的 Heroku 应用程序：

heroku create <app-name>
// 项目创建

接着将应用程序推送到 Heroku 存储库：

git push heroku master
// 推送代码

本文总结

本文主要和大家介绍 ShareDrop ，其是一款受 Apple AirDrop 服务启发的 Web 应用程序，其允许用户直接在设备之间传输文件而无需先将文件上传到任何服务器。因为篇幅问题，关于 ShareDrop 只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

参考资料

https://github.com/szimek/sharedrop

https://play.google.com/store/apps/details?id=com.sharedropmobile&hl=en_US

https://www.sharedrop.io/

https://mobiletrans.wondershare.com/apps-review/sharedrop-vs-snapdrop.html