开源一款剪贴板跨设备共享工具

原创

shigen

发布于 2024-03-31 10:52:29

910

发布于 2024-03-31 10:52:29

shigen坚持更新文章的博客写手，擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长，分享认知，留住感动。 个人IP：shigen

昨天遇到了一个很棘手的问题：我的手机剪贴板需要同步到另外的两台设备上。遗憾的是手机上并没有安装相同的通讯软件。用网上免费的剪贴板共享工具吧，方便是方便，但是觉得还是不安全，关键是不能实现特定的需求。我很享受DIY的过程，于是思索一下，我觉得我可以自己做出来，还能做到局域网下的剪贴板跨设备共享，毕竟我也曾有过成功的案例：开源一个局域网文件共享工具。于是说干就干。

起名字

项目总得有个名字吧。哎，想了好久，还是觉得没有合适的，最后问了GPT，选用了cpoyhub这个名字。

确认需求

我的需求就是很简单，像极了【蜂巢】的设计，我随用随取。输入剪贴板内容，拿到取件码；输入取件码，获得剪贴板内容。再简单不过了！所以，我也不用考虑那么多复杂的东西，什么认证、安全、高并发……小脑袋要爆炸！

确认架构

这是一个小工具，用不着我动不动Spring Boot那一套，而且Spring boot本身就很重！还是拿起了拿手的Flask框架，外加一个Redis，搞定！

前端的话，别搞Vue项目了，直接原生的来一套！关键是时间就那么一丢丢，能用魔法尽量用魔法。需要注意的是：前端的js文件，能用CDN就用CDN，给服务器节省一点流量。

代码设计

算起来逻辑还是很简单的，shigen直接开干了！

项目的整体结构

项目的整体结构如图所示：

算得上是一个简简单单的小demo了。

后端代码

这里只展示核心的代码：

from datetime import datetime
from app import app, redis_client
from flask import jsonify, render_template, request

REDIS_KEY_PREFIX = 'clip:'
REDIS_KEY_EXPIRE_SES = 3600 * 10


def format_current_time(format='%m%d%H%M%S'):
    """
    默认格式化当前时间为 'MMDDhhmmss'
    :return: 格式化后的时间字符串
    """
    current_time = datetime.now()
    formatted_time = current_time.strftime(format)
    return formatted_time


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/new', methods=['POST'])
def clipboard():
    data = request.form['data']
    # 将数据存储到 Redis 中
    tms = format_current_time()
    key = REDIS_KEY_PREFIX + tms
    redis_client.set(key, data, REDIS_KEY_EXPIRE_SES)
    return jsonify({'data': tms, 'success': True})


@app.route('/get', methods=['GET'])
def get():
    tms = request.args.get('code')
    key = REDIS_KEY_PREFIX + tms
    value = redis_client.get(key)
    if not value:
        return jsonify({'data': None, 'success': False})
    else:
        return jsonify({'data': value, 'success': True})

前端代码

    <script>
        $(document).ready(function() {
            // 保存剪贴板内容
            $('#save-btn').click(function() {
                var data = $('#new-data').val();
                $.post('/new', {data: data}, function(response) {
                    console.log(response);
                    showSuccessMessage('Your clipboard saved successfully');
                    $('#new-data').val(response.data);
                    $('#save-btn').attr('disabled', true);
                });
            });

            // 提取剪贴板内容
            $('#extract-code').change(function() {
                var code = $(this).val();
                $.get('/get', {code: code}, function(response) {
                    $('#extracted-data').val(response.data);
                });
            });

            // 复制剪贴板内容
            $('#copy-btn').click(function() {
                var textarea = document.getElementById('extracted-data');
                textarea.select();
                document.execCommand('copy');
                showSuccessMessage('Copied to clipboard!');
            });

            // 显示复制成功提示消息
            function showSuccessMessage(text) {
                var message = $('#alert-message');
                message.text(text).fadeIn(300).delay(1500).fadeOut(400);
            }
        });
    </script>

完整的代码，可参考shigen的GitHub。