在线、跨平台文本剪贴板开发记录

Mar 12,2021   1706 words   7 min

Tags: Web

0.背景

如果你有多个电脑,或者需要在多平台(如Windows、Ubuntu、手机等)之间来回切换,那么你一定遇到过这样的烦恼。在一个设备上的文字想复制到另一个设备上去用,但无奈平台之间并不互通。你要么照着重新再敲一遍,要么拿U盘拷贝一份,或者干脆放弃。一个更具体的例子是,前些日子在Ubuntu上用apt装PyTorch,但无奈下载的网速实在太慢,所以就想着复制下链接地址在Windows下用迅雷下载。但由于是跨平台,我只好插上U盘新建个文档,这简直极其令人抓狂。更早的例子是,放寒假的时候在家远程学校的电脑,想把学校电脑上的一些文字传到笔记本上来,智能先在学校电脑上登陆微信,发送内容到文件传输助手上,再在家里的笔记本上登录微信,把内容复制出来。整个过程效率十分低下。当时就想,要是能有一个可以跨平台的文本剪贴板就好了,就再也不用这么费事了。因此,为了解决这个“痛点”,提高一下跨平台工作效率,前些日子抽空,在之前已有的基础上搭建了一个在线剪贴板,很好地满足了上面提到的这些需求。不仅仅是电脑跨平台,只要是能联网的地方,都可以实现跨平台粘贴于复制。演示效果如下。 手机浏览器上的效果。 DELL XPS Chrome上的效果。 台式机上QQ浏览器的效果。

可以看到,不仅支持中文和英文,包括日文、韩文等文字都可以很好地支持。顺带提一下,本篇博客的全部内容就是在Dell XPS上编辑,然后用在线剪贴板传到了台式机上。

1.功能设计

其实我们的目的和需求是相对明确的。就是建立一个在线的剪贴板。用户在任何只要能联网的地方就可以访问和修改其中的内容。当然,出于安全考虑,会增加认证等环节,而不是每个人直接访问就能用。这样可以减少服务器的开销。具体而言,在线剪贴板应该包括三个功能:上传、下载以及清空。

  • 上传:将当前剪贴板中的内容上传到服务器上(具体流程:读取文本框内容-上传数据-结果反馈)
  • 下载:将服务器上保存的内容下载并展示在网页中(具体流程:重新访问服务器数据-展示数据)
  • 清空:将服务器上保存的内容以及网页上显示的内容全部清空(具体流程:清空文本框-清空服务器数据)

因此,一个典型的打开网页时,处理的流程如下:

用户输入网址打开网页 - 检查是否有授权Cookie - 如果有Cookie直接进入,否则密码验证 - 如果验证成功,进入网页 - 否则什么都不做 - 网页端访问服务器,获取数据 - 展示数据 - 完成。

一个典型的上传数据的流程如下:

输入内容 - 点击保存按钮 - 上传数据 - 服务器反馈 - 完成。

2.技术要点

首先,要想实现在线剪贴板,只靠前端是不够的,还需要有后端服务器的支持。整个实现方案主要包含以下一些要点,并且在之前都已经有所涉及。

  • 网页前端。主要参考之前已经实现的在线翻译的界面,一些更细节的东西比如自动更换背景都是基于之前的这篇博客实现。

  • 服务器后端与交互。这是功能的核心模块,实现了对于数据的上传于下载。主要参考之前已经实现的基于WebSocket的网页于服务器交互(可以参考这篇博客),以及博客访问次数自动监测的这篇博客

  • 网页认证。这个功能主要是为了避免他人的滥用,消耗服务器资源。因为这个网页设计的初衷只是自用,因此会增加认证模块,暂不公开。与其使用我的这个,更建议你按照这篇博客介绍的内容自己搭建一个,并不是很复杂。核心技术用到的是Cookie,这在之前也已经介绍过了,可以参考这篇博客

3.测试

当第一次打开网页的时候,会弹出提示,要求进行验证。你需要输入一段密钥,然后点击“Upload”按钮进行提交,如果验证成功的话,会提示授权成功,期限是30天,30天之后需要再重新认证。在验证成功以后,网页会自动从服务器获取数据并展示。当对内容进行修改后,点击“Upload”即可上传更新后的内容。动图较大,可能需要加载一段时间。 当然,你也可以手动点击“Download”来拉取服务器上最新的内容。也可以点击“Clear”删除服务器上保存的内容。

以上,便很好地实现了我们跨平台粘贴的需求。当然,其实可以更进一步,立一个更大的Flag,就是跨平台的文件传输。只不过是将这里的文字变成文件。但等以后有空再填这个坑吧。

本文作者原创,未经许可不得转载,谢谢配合

返回顶部