PeerClip · Synchronisation du presse-papiers entre appareils

Déployez-le une fois et utilisez-le sur plusieurs appareils. Amenez votre PC, Mac, iPhone, Android et tablette dans la même « pièce » et collez du texte, des images et des fichiers à volonté.

Afficher le code source

PeerClip · Synchronisation du presse-papiers entre appareils

Présentation du projet

PeerClip est un outil de transfert de fichiers temporaires et de presse-papiers pour les scénarios multi-appareils.

Il ne nécessite pas l’installation d’un client natif. Il vous suffit d’ouvrir un navigateur pour ajouter PC, Mac, iPhone, Android, tablette et autres appareils dans la même pièce, et synchroniser rapidement le texte, les images et les fichiers entre les appareils.

Le projet utilise un mécanisme « approbation de salle + équipement » pour gérer les droits d’accès, et utilise des codes QR pour réduire les coûts de fonctionnement liés à l’adhésion à une salle sur le terminal mobile. Les messages texte sont conservés via Redis, et les images et fichiers sont stockés à l’aide de Cloudflare R2 et transmis directement depuis le navigateur via des URL pré-signées.

Afficher le code source de PeerClip

✨ Fonctionnalités principales

🔗 Mécanisme de pièce

Un identifiant de salle unique est automatiquement généré lorsque PeerClip est ouvert pour la première fois, et la salle actuelle est identifiée par « ?room=xxx » dans l’URL.

Partagez simplement le lien de la salle ou laissez d’autres appareils scanner le code QR sur la page pour rejoindre rapidement le même espace.

📱 QR code pour adhérer rapidement

Le code QR de la chambre est intégré à la page.

Il n’est pas nécessaire de saisir manuellement le numéro de la chambre sur votre téléphone mobile ou votre tablette, vous pouvez directement scanner le code pour entrer dans la salle actuelle, ce qui est très approprié pour le transfert temporaire de contenu entre ordinateurs et téléphones mobiles.

🔐 Approbation des équipements

Afin d’empêcher des appareils inconnus de rejoindre le lien de la salle après un partage par erreur, PeerClip a introduit un mécanisme d’approbation des appareils.

Le premier appareil à entrer dans la salle devient automatiquement l’administrateur
Les appareils suivants sont dans l’état « en attente » par défaut
L’administrateur peut choisir « Approuver » ou « Rejeter »
Seuls les appareils approuvés peuvent afficher et envoyer le contenu de la salle

Tout en restant simple à utiliser, il ajoute également une couche de contrôle d’accès de base.

📝 Synchronisation instantanée du texte

Tapez ou collez du texte depuis n’importe quel appareil et envoyez le message à d’autres appareils approuvés.

Dans le même temps, un bouton de copie en un clic est fourni pour copier directement le contenu dans le presse-papiers système de l’appareil actuel.

Pour les transferts temporaires :

Un morceau de code, une commande, un lien et une configuration peuvent tous être lancés directement dans la salle.

🖼️Transfert de plusieurs photos

Prend en charge la sélection de plusieurs images à la fois et leur affichage dans un carrousel de cartes.

Le terminal mobile ajoute également des opérations tactiles pour la prévisualisation des images :

Double-cliquez pour agrandir/restaurer
Faites glisser des images avec un doigt
Pincez pour zoomer avec deux doigts
Afficher en plein écran

C’est particulièrement pratique pour des scénarios tels que prendre des captures d’écran depuis un ordinateur et les transférer sur un téléphone mobile.

📎 Téléchargement de fichiers universel

En plus des images, d’autres types de fichiers sont également pris en charge, tels que :

paquet compressé -PDF/Document
Vidéo
fichiers de codes
Autres fichiers courants

Les fichiers sont affichés sous forme de cartes, indiquant le type de fichier, la taille et les opérations de téléchargement.

☁️ Transfert direct pré-signé Cloudflare R2

Les images et les fichiers ne passent pas d’abord par la fonction sans serveur Next.js, mais :

浏览器
  ↓
请求上传地址
  ↓
Next.js / Vercel 生成 Presigned URL
  ↓
浏览器直接 PUT
  ↓
Cloudflare R2

Cette méthode peut éviter que les téléchargements de fichiers ne soient transférés via le serveur et, en même temps, la clé d’accès de R2 ne sera pas exposée au frontal.

Le projet a actuellement des restrictions sur la taille des images et des fichiers :

Image : ≤ 10 Mo
Fichier : ≤ 50 Mo

⚡ Mise à jour optimiste + sondage

Au lieu d’utiliser une architecture WebSocket complexe, PeerClip utilise des sondages pour obtenir les dernières nouvelles.

Pour éviter d’apparaître après l’envoi d’un message :

Envoyer → Disparaître → Réapparaître

Le rythme visuel, le front-end utilise la méthode de mise à jour optimiste + fusion des résultats des sondages par ID.

Une fois que l’utilisateur a envoyé le message, celui-ci est immédiatement affiché dans l’interface et les données du serveur sont interrogées en arrière-plan avant d’être fusionnées.

Dans le même temps, la liste d’ID de message et la longueur sont comparées lors de l’interrogation. Si les données n’ont pas changé, ignorez « setState » pour réduire le rendu inutile.

🤖 Gestion des appareils en ligne

L’appareil envoie périodiquement des battements de cœur.

Si un appareil n’a pas de battement de cœur pendant un certain temps, le système l’effacera automatiquement pour empêcher les appareils hors ligne de rester longtemps dans la liste des appareils.

💾 Persistance Redis

Les données de salle, d’appareil et de message sont stockées dans Redis.

Par conséquent, même si elles sont déployées dans un environnement Vercel Serverless, les données ne seront pas complètement perdues en raison d’un démarrage à froid de la fonction ou de modifications d’instance.

🛠 Pile technologique

Hiérarchie	Technologie	Utilisation
Cadre	Suivant.js 16	Routeur d’applications, pages et API
Interface utilisateur	Réagissez 19	Interaction frontale et composants
Style	Vent arrière CSS 4	CSS atomique
Langue	TypeScript 5	Type de sécurité
Icônes	lucide-réagir	Icône SVG
Codes QR	qrcode.réagir	Code QR de la chambre
Base de données	Redis/ioredis	Local, équipement, persistance des messages
Stockage de fichiers	Cloudflare R2	Stockage d’images et de fichiers
Télécharger	URL présignée	Transfert direct du navigateur R2
Déploiement	Vercel	Déploiement sans serveur

Le projet est en fait construit en utilisant Next.js + React + Tailwind CSS + TypeScript. Redis est utilisé pour le stockage des données de session et de messages, et Cloudflare R2 est utilisé pour le stockage d’images et de fichiers. L’ensemble du projet est adapté à l’environnement Vercel Serverless.

🚀 Comment utiliser

1. Créer une pièce

Après avoir ouvert PeerClip, le système créera automatiquement une pièce.

Le premier appareil à entrer dans la salle devient automatiquement l’administrateur.

2. Ajouter d’autres appareils

Vous pouvez copier directement l’URL actuelle de la salle ou utiliser le code QR sur la page.

Scannez le code sur votre téléphone pour entrer rapidement dans la salle.

3. Homologation des équipements

Les nouveaux appareils sont dans l’état « en attente » par défaut après leur entrée.

L’administrateur clique sur Approuver dans la liste des appareils et l’appareil peut officiellement rejoindre la salle.

4. Démarrer le transfert

Vous pourrez alors directement :

Coller le texte
Coller une capture d’écran
Sélectionnez une image
Télécharger des fichiers
Copiez le texte en un seul clic
Télécharger des fichiers envoyés par d’autres appareils

L’ensemble du processus ne nécessite pas l’installation de clients supplémentaires.

🏗️ Structure du projet

peerclip/
├─ app/
│  ├─ page.tsx
│  ├─ layout.tsx
│  ├─ globals.css
│  └─ api/
│     ├─ clipboard/
│     │  └─ route.ts
│     └─ upload/
│        └─ route.ts
├─ public/
│  └─ logo.jpg
├─ .env.example
├─ next.config.ts
├─ postcss.config.mjs
├─ eslint.config.mjs
├─ tsconfig.json
├─ package.json
└─ README.md

La logique de base est principalement concentrée dans deux API :

clipboard/route.ts : responsable de l’interrogation des messages, du rythme cardiaque de l’appareil, de l’envoi des messages et de l’approbation de l’appareil
upload/route.ts : responsable de la génération de l’URL de téléchargement pré-signée Cloudflare R2

Le frontal « page.tsx » est responsable de l’interface utilisateur de la page, des sondages, de la fusion des messages, du téléchargement de fichiers et de l’interaction des gestes d’image.

🔧 Exécutez localement

Le projet nécessite Node.js 20+ et un compartiment Redis et Cloudflare R2 accessible.

git clone https://github.com/Licy711/lan-clipboard.git
cd lan-clipboard

npm install

cp .env.example .env.local

npm run dev

Alors visitez :

http://localhost:3000

Après l’avoir ouvert pour la première fois, une pièce sera automatiquement générée. Utilisez votre téléphone mobile pour scanner le code QR sur la page afin de tester la synchronisation entre appareils.

L’environnement de production peut utiliser :

npm run build
npm start

🔐Variables d’environnement

PeerClip doit configurer les variables d’environnement liées à Redis et Cloudflare R2 :

REDIS_URL=

R2_ACCOUNT_ID=
R2_ACCESS_KEY_ID=
R2_SECRET_ACCESS_KEY=
R2_BUCKET=
R2_PUBLIC_DOMAIN=

Parmi eux, il est recommandé au jeton API R2 de suivre le principe du moindre privilège et d’accorder uniquement des autorisations de lecture et d’écriture d’objet au bucket cible, plutôt que des autorisations de gestion à l’ensemble du compte Cloudflare.

☁️ Pourquoi choisir la transmission directe R2 ?

Si vous laissez directement le navigateur télécharger le fichier vers l’API Next.js, puis le transférez vers le stockage d’objets à partir du serveur, la fonction sans serveur deviendra la couche intermédiaire du transfert de fichiers.

Une fois que PeerClip a adopté l’URL présignée, le processus devient :

Client
  │
  │ 请求上传 URL
  ▼
Next.js API
  │
  │ 生成 Presigned PUT URL
  ▼
Client
  │
  │ 直接上传
  ▼
Cloudflare R2

Cela réduit non seulement la pression de transmission des données sur le serveur, mais évite également d’envoyer la clé R2 au navigateur.

Il peut également contourner les restrictions du corps de la requête de Vercel Serverless Function.

🌐 Déploiement

Le projet est optimisé pour les environnements Vercel Serverless, il peut donc être directement importé dans un référentiel GitHub pour le déploiement.

Processus de base :

GitHub
  ↓
Vercel Import
  ↓
配置 Redis
  ↓
配置 Cloudflare R2
  ↓
Deploy

Une fois le déploiement terminé, vous pouvez lier votre propre nom de domaine afin que les téléphones mobiles, ordinateurs et autres appareils puissent y accéder directement via une adresse fixe.

🧩À quelle scène convient-il ?

PeerClip préfère le transfert de données temporaire, léger et entre plusieurs appareils.

Par exemple:

💻 Ordinateur → Téléphone portable

Copiez un morceau de texte, une capture d’écran ou un fichier sur votre ordinateur, ouvrez PeerClip et envoyez-le directement. Scannez le code QR avec votre téléphone portable pour entrer dans la salle et le récupérer.

📱 Mobile → Ordinateur

Si vous prenez une photo ou enregistrez un fichier sur votre téléphone mobile, vous pouvez la télécharger directement dans la salle et la télécharger sur votre ordinateur sans la transférer via WeChat, QQ ou par e-mail.

🧑‍💻 Scénario de développement

Au cours du processus de développement, il est souvent nécessaire de transférer des données entre différents appareils :

URL
代码片段
JSON
Token
Shell 命令
配置文件
截图
日志

PeerClip peut être utilisé comme « station de transit » temporaire.

🏠 Partage temporaire entre plusieurs appareils

Lorsque vous utilisez Mac, Windows, iPhone, Android et d’autres appareils à la maison en même temps, vous pouvez créer une pièce pour une utilisation à long terme et l’utiliser comme presse-papiers personnel multi-appareils.

⚠️ Remarques

PeerClip se positionnant comme un outil de transfert temporaire, vous devez tout de même faire attention aux points suivants lors du déploiement :

Le jeton API R2 utilise l’autorisation minimale et autorise uniquement le compartiment spécifié.
Ne soumettez pas .env.local, en particulier le mot de passe Redis et la clé d’accès secrète R2.
Si vous soupçonnez une fuite de la clé, l’ancien jeton doit être immédiatement révoqué et régénéré.
La capacité de lecture du presse-papiers du système du navigateur nécessite généralement un environnement HTTPS ou « localhost ».
Les fichiers R2 recommandent de configurer des règles de cycle de vie pour nettoyer automatiquement les fichiers qui n’ont pas été utilisés depuis longtemps afin d’éviter une croissance continue de l’espace de stockage.
Il n’est pas recommandé de stocker des charges utiles trop volumineuses dans un seul message dans Redis. Les images et les fichiers doivent être remis à R2.

💡 Points forts du projet

La chose la plus intéressante à propos de PeerClip n’est pas de « créer une page de téléchargement de fichiers », mais la combinaison de plusieurs problèmes apparemment simples :

**Comment utiliser une application purement web pour transformer différents appareils en un presse-papiers partagé temporaire ? **

Il a fini par utiliser :

Mécanique de la salle

→ Résolvez comment plusieurs appareils peuvent entrer dans le même espace.

Code QR

→ Résolvez le problème de la saisie d’adresse difficile lors de la connexion à une salle sur un téléphone mobile.

Approbation de l’équipement

→ Résolvez le problème de l’accès aux appareils inconnus causé par des liens partagés.

Redis

→ Résoudre le problème de persistance des données dans un environnement sans serveur.

R2 Presigned URL

→ Résolvez le problème selon lequel les téléchargements d’images et de fichiers ne doivent pas passer par la fonction sans serveur.

Mise à jour optimiste + sondage

→ Rendre l’expérience de synchronisation aussi proche que possible du temps réel sans introduire WebSocket.

La mise en œuvre technique de l’ensemble du projet a été relativement limitée. Au lieu d’introduire de force une infrastructure de connexion complexe à long terme dans un souci de « synchronisation en temps réel », une solution d’interrogation plus simple a été choisie en fonction du scénario d’utilisation réel.

📌Résumé

PeerClip est un outil petit mais complet pour le transfert temporaire entre appareils.

Il utilise le navigateur comme entrée unifiée, connecte différents appareils via le mécanisme de la salle et combine Redis, Cloudflare R2 et Vercel pour :

Textes, images, fichiers → une pièce → tous les appareils homologués

Ce lien est assez simple.

Si vous avez souvent besoin de transférer du texte, des captures d’écran et des fichiers entre votre ordinateur et votre téléphone mobile et que vous ne souhaitez pas installer de clients supplémentaires, PeerClip sera une solution relativement légère.

Le projet adopte la licence MIT et peut être directement dérivé, modifié et déployé par vous-même.

GitHub · Licy711/lan-clipboard