mirror of
https://github.com/imputnet/cobalt.git
synced 2025-06-28 09:28:29 +00:00
文件传输5
This commit is contained in:
celebrateyang
parent
1c15767976
commit
97381db69b
160
web/src/components/clipboard/DebugPanel.svelte
Normal file
160
web/src/components/clipboard/DebugPanel.svelte
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import SettingsCategory from '$components/settings/SettingsCategory.svelte';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let isConnected: boolean;
|
||||||
|
export let sessionId: string;
|
||||||
|
export let isCreator: boolean;
|
||||||
|
export let peerConnected: boolean;
|
||||||
|
export let dataChannel: RTCDataChannel | null;
|
||||||
|
export let peerConnection: RTCPeerConnection | null;
|
||||||
|
|
||||||
|
function restartWebRTC(): void {
|
||||||
|
dispatch('restartWebRTC');
|
||||||
|
}
|
||||||
|
|
||||||
|
function forceConnection(): void {
|
||||||
|
dispatch('forceConnection');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<SettingsCategory title="Debug Panel" sectionId="debug-panel">
|
||||||
|
<div class="debug-panel">
|
||||||
|
<details>
|
||||||
|
<summary>🔧 Connection Debug</summary>
|
||||||
|
<div class="debug-info">
|
||||||
|
<p><strong>WebSocket:</strong> {isConnected ? '✅ Connected' : '❌ Disconnected'}</p>
|
||||||
|
<p><strong>Session ID:</strong> {sessionId || 'Not set'}</p>
|
||||||
|
<p><strong>Is Creator:</strong> {isCreator ? 'Yes' : 'No'}</p>
|
||||||
|
<p><strong>Peer Connected:</strong> {peerConnected ? '✅ Yes' : '❌ No'}</p>
|
||||||
|
<p><strong>Data Channel:</strong> {dataChannel ? (dataChannel.readyState || 'Unknown') : 'Not created'}</p>
|
||||||
|
<p><strong>Peer Connection:</strong> {peerConnection ? (peerConnection.connectionState || 'Unknown') : 'Not created'}</p>
|
||||||
|
<p><strong>Signaling State:</strong> {peerConnection ? (peerConnection.signalingState || 'Unknown') : 'Not created'}</p>
|
||||||
|
<p><strong>ICE Connection:</strong> {peerConnection ? (peerConnection.iceConnectionState || 'Unknown') : 'Not created'}</p>
|
||||||
|
<p><strong>ICE Gathering:</strong> {peerConnection ? (peerConnection.iceGatheringState || 'Unknown') : 'Not created'}</p>
|
||||||
|
|
||||||
|
<div class="debug-actions">
|
||||||
|
<button
|
||||||
|
class="debug-btn restart-btn"
|
||||||
|
on:click={restartWebRTC}
|
||||||
|
disabled={!isCreator}
|
||||||
|
>
|
||||||
|
🔄 Restart WebRTC
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{#if dataChannel && dataChannel.readyState === 'open' && !peerConnected}
|
||||||
|
<button
|
||||||
|
class="debug-btn"
|
||||||
|
on:click={forceConnection}
|
||||||
|
>
|
||||||
|
🔗 Force Connection
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if dataChannel && dataChannel.readyState === 'connecting'}
|
||||||
|
<div class="debug-warning">
|
||||||
|
<strong>⚠️ Data channel stuck in 'connecting' state</strong>
|
||||||
|
<ul>
|
||||||
|
<li>This usually indicates network connectivity issues</li>
|
||||||
|
<li>Check firewall settings and network restrictions</li>
|
||||||
|
<li>Try restarting the WebRTC connection</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</SettingsCategory>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.debug-panel {
|
||||||
|
margin-top: 1rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-panel summary {
|
||||||
|
padding: 0.5rem;
|
||||||
|
background-color: var(--background-alt);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-panel summary:hover {
|
||||||
|
background-color: var(--hover-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-info {
|
||||||
|
padding: 0.75rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-info p {
|
||||||
|
margin: 0.25rem 0;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-actions {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-btn {
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
background-color: var(--accent-background);
|
||||||
|
border: 1px solid var(--accent);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
color: var(--accent);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-btn:hover:not(:disabled) {
|
||||||
|
background-color: var(--accent);
|
||||||
|
color: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-btn:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.restart-btn {
|
||||||
|
background-color: var(--orange-background);
|
||||||
|
border-color: var(--orange);
|
||||||
|
color: var(--orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
.restart-btn:hover:not(:disabled) {
|
||||||
|
background-color: var(--orange);
|
||||||
|
color: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-warning {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
background-color: var(--yellow-background);
|
||||||
|
border: 1px solid var(--yellow);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-warning ul {
|
||||||
|
margin: 0.25rem 0 0 1rem;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-warning li {
|
||||||
|
margin: 0.1rem 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
334
web/src/components/clipboard/FileTransfer.svelte
Normal file
334
web/src/components/clipboard/FileTransfer.svelte
Normal file
@ -0,0 +1,334 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import SettingsCategory from '$components/settings/SettingsCategory.svelte';
|
||||||
|
import ActionButton from '$components/buttons/ActionButton.svelte';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let files: File[];
|
||||||
|
export let receivedFiles: any[];
|
||||||
|
export let sendingFiles: boolean;
|
||||||
|
export let receivingFiles: boolean;
|
||||||
|
export let transferProgress: number;
|
||||||
|
export let dragover: boolean;
|
||||||
|
export let peerConnected: boolean;
|
||||||
|
|
||||||
|
let fileInput: HTMLInputElement;
|
||||||
|
|
||||||
|
function handleFileSelect(event: Event): void {
|
||||||
|
const target = event.target as HTMLInputElement;
|
||||||
|
if (target.files) {
|
||||||
|
const newFiles = Array.from(target.files);
|
||||||
|
dispatch('filesSelected', { files: newFiles });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDragOver(event: DragEvent): void {
|
||||||
|
event.preventDefault();
|
||||||
|
dragover = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDragLeave(): void {
|
||||||
|
dragover = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDrop(event: DragEvent): void {
|
||||||
|
event.preventDefault();
|
||||||
|
dragover = false;
|
||||||
|
if (event.dataTransfer?.files) {
|
||||||
|
const droppedFiles = Array.from(event.dataTransfer.files);
|
||||||
|
dispatch('filesSelected', { files: droppedFiles });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeFile(index: number): void {
|
||||||
|
dispatch('removeFile', { index });
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendFiles(): void {
|
||||||
|
dispatch('sendFiles');
|
||||||
|
}
|
||||||
|
|
||||||
|
function downloadReceivedFile(file: any): void {
|
||||||
|
dispatch('downloadFile', { file });
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeReceivedFile(index: number): void {
|
||||||
|
dispatch('removeReceivedFile', { index });
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatFileSize(bytes: number): string {
|
||||||
|
if (bytes === 0) return '0 B';
|
||||||
|
const k = 1024;
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<SettingsCategory title="文件传输" sectionId="file-transfer">
|
||||||
|
<div class="file-transfer-section">
|
||||||
|
<div class="send-files">
|
||||||
|
<h4>发送文件</h4>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="file-drop-zone"
|
||||||
|
class:dragover
|
||||||
|
on:dragover={handleDragOver}
|
||||||
|
on:dragleave={handleDragLeave}
|
||||||
|
on:drop={handleDrop}
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
on:click={() => fileInput?.click()}
|
||||||
|
on:keydown={(e) => e.key === 'Enter' && fileInput?.click()}
|
||||||
|
>
|
||||||
|
<p>📁 拖拽文件到这里或点击选择</p>
|
||||||
|
<input
|
||||||
|
bind:this={fileInput}
|
||||||
|
type="file"
|
||||||
|
multiple
|
||||||
|
on:change={handleFileSelect}
|
||||||
|
style="display: none;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if files.length > 0}
|
||||||
|
<div class="file-list">
|
||||||
|
<h5>待发送文件:</h5>
|
||||||
|
{#each files as file, index (file.name + index)}
|
||||||
|
<div class="file-item">
|
||||||
|
<span class="file-name">{file.name}</span>
|
||||||
|
<span class="file-size">({formatFileSize(file.size)})</span>
|
||||||
|
<button
|
||||||
|
class="remove-file"
|
||||||
|
on:click={() => removeFile(index)}
|
||||||
|
aria-label="Remove file"
|
||||||
|
>
|
||||||
|
❌
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
<ActionButton
|
||||||
|
id="send-files"
|
||||||
|
disabled={!peerConnected || sendingFiles}
|
||||||
|
click={sendFiles}
|
||||||
|
>
|
||||||
|
{sendingFiles ? '发送中...' : '发送文件'}
|
||||||
|
</ActionButton>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if sendingFiles}
|
||||||
|
<div class="progress-section">
|
||||||
|
<h4>发送进度: {Math.round(transferProgress)}%</h4>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-fill" style="width: {transferProgress}%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="received-files">
|
||||||
|
<h4>已接收文件</h4>
|
||||||
|
|
||||||
|
{#if receivingFiles}
|
||||||
|
<div class="progress-section">
|
||||||
|
<h4>接收进度: {Math.round(transferProgress)}%</h4>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-fill" style="width: {transferProgress}%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if receivedFiles.length > 0}
|
||||||
|
<div class="file-list">
|
||||||
|
{#each receivedFiles as file, index (file.name + index)}
|
||||||
|
<div class="file-item">
|
||||||
|
<span class="file-name">{file.name}</span>
|
||||||
|
<span class="file-size">({formatFileSize(file.size)})</span>
|
||||||
|
<div class="file-actions">
|
||||||
|
<button
|
||||||
|
class="download-btn"
|
||||||
|
on:click={() => downloadReceivedFile(file)}
|
||||||
|
>
|
||||||
|
📥 下载
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="remove-file"
|
||||||
|
on:click={() => removeReceivedFile(index)}
|
||||||
|
aria-label="Remove file"
|
||||||
|
>
|
||||||
|
❌
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{:else if !receivingFiles}
|
||||||
|
<div class="empty-state">
|
||||||
|
暂无接收到的文件
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SettingsCategory>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.file-transfer-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-files, .received-files {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-drop-zone {
|
||||||
|
border: 2px dashed var(--border);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
background-color: var(--background);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-drop-zone:hover {
|
||||||
|
border-color: var(--accent);
|
||||||
|
background-color: var(--accent-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-drop-zone.dragover {
|
||||||
|
border-color: var(--accent);
|
||||||
|
background-color: var(--accent-background);
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-drop-zone p {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
background-color: var(--background-alt);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
flex: 1;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-size {
|
||||||
|
color: var(--secondary);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-btn {
|
||||||
|
background-color: var(--accent-background);
|
||||||
|
border: 1px solid var(--accent);
|
||||||
|
color: var(--accent);
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-btn:hover {
|
||||||
|
background-color: var(--accent);
|
||||||
|
color: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-file {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--red);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.25rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-file:hover {
|
||||||
|
background-color: var(--red-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-section {
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: var(--background-alt);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-section h4 {
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--border);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--accent);
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--secondary);
|
||||||
|
font-style: italic;
|
||||||
|
padding: 2rem;
|
||||||
|
border: 1px dashed var(--border);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background-color: var(--background-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.file-transfer-section {
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-drop-zone {
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-item {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-actions {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
265
web/src/components/clipboard/SessionManager.svelte
Normal file
265
web/src/components/clipboard/SessionManager.svelte
Normal file
@ -0,0 +1,265 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import { t } from '$lib/i18n/translations';
|
||||||
|
import SettingsCategory from '$components/settings/SettingsCategory.svelte';
|
||||||
|
import ActionButton from '$components/buttons/ActionButton.svelte';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let isConnected: boolean;
|
||||||
|
export let isCreating: boolean;
|
||||||
|
export let isJoining: boolean;
|
||||||
|
export let joinCode: string;
|
||||||
|
export let sessionId: string;
|
||||||
|
export let isCreator: boolean;
|
||||||
|
export let peerConnected: boolean;
|
||||||
|
export let qrCodeUrl: string;
|
||||||
|
|
||||||
|
function handleCreateSession() {
|
||||||
|
dispatch('createSession');
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleJoinSession() {
|
||||||
|
dispatch('joinSession');
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleShare() {
|
||||||
|
dispatch('shareSession');
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCleanup() {
|
||||||
|
dispatch('cleanup');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if !isConnected}
|
||||||
|
<SettingsCategory title={$t("clipboard.title")} sectionId="connection-setup">
|
||||||
|
<div class="connection-setup">
|
||||||
|
<div class="setup-option">
|
||||||
|
<h3>{$t("clipboard.create_session")}</h3>
|
||||||
|
<p>{$t("clipboard.create_description")}</p> <ActionButton
|
||||||
|
id="create-session"
|
||||||
|
disabled={isCreating}
|
||||||
|
click={handleCreateSession}
|
||||||
|
>
|
||||||
|
{isCreating ? 'Creating...' : $t("clipboard.create_session")}
|
||||||
|
</ActionButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="divider">
|
||||||
|
<span>{$t("general.or")}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setup-option">
|
||||||
|
<h3>{$t("clipboard.join_session")}</h3>
|
||||||
|
<p>{$t("clipboard.join_description")}</p>
|
||||||
|
<div class="join-form">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
bind:value={joinCode}
|
||||||
|
placeholder="Enter session code"
|
||||||
|
disabled={isJoining}
|
||||||
|
/> <ActionButton
|
||||||
|
id="join-session"
|
||||||
|
disabled={isJoining || !joinCode.trim()}
|
||||||
|
click={handleJoinSession}
|
||||||
|
>
|
||||||
|
{isJoining ? 'Joining...' : $t("clipboard.join_session")}
|
||||||
|
</ActionButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SettingsCategory>
|
||||||
|
{:else}
|
||||||
|
<!-- Session Info -->
|
||||||
|
<SettingsCategory title={$t("clipboard.session_active")} sectionId="session-info">
|
||||||
|
<div class="session-info">
|
||||||
|
<div class="session-details">
|
||||||
|
<div class="session-id">
|
||||||
|
<span>Session ID:</span>
|
||||||
|
<code>{sessionId}</code>
|
||||||
|
<button class="copy-btn" on:click={handleShare}>📋</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if isCreator && sessionId && !peerConnected && qrCodeUrl}
|
||||||
|
<div class="qr-code">
|
||||||
|
<h4>Scan to join:</h4>
|
||||||
|
<img src={qrCodeUrl} alt="QR Code" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="connection-status">
|
||||||
|
<div class="status-indicator" class:connected={peerConnected}></div>
|
||||||
|
<span>{peerConnected ? 'Connected' : 'Waiting for peer...'}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SettingsCategory>
|
||||||
|
|
||||||
|
<!-- Disconnect Section -->
|
||||||
|
<div class="disconnect-section">
|
||||||
|
<ActionButton id="cleanup" click={handleCleanup}>
|
||||||
|
{$t("clipboard.disconnect")}
|
||||||
|
</ActionButton>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.connection-setup {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setup-option {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setup-option h3 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 1px;
|
||||||
|
background-color: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider span {
|
||||||
|
background-color: var(--background);
|
||||||
|
padding: 0 1rem;
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.join-form {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
max-width: 400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.join-form input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
background-color: var(--input-background);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-info {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-details {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-id {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-id code {
|
||||||
|
background-color: var(--border);
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.25rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-btn:hover {
|
||||||
|
background-color: var(--hover-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-code {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-code img {
|
||||||
|
max-width: 200px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator.connected {
|
||||||
|
background-color: var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.disconnect-section {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.connection-setup {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setup-option {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
align-self: center;
|
||||||
|
margin: 0 2rem;
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider::before {
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
right: auto;
|
||||||
|
width: 1px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-details {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-code {
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
84
web/src/components/clipboard/TabNavigation.svelte
Normal file
84
web/src/components/clipboard/TabNavigation.svelte
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
|
||||||
|
export let activeTab: 'files' | 'text';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher<{
|
||||||
|
tabChange: 'files' | 'text'
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="tab-navigation">
|
||||||
|
<button
|
||||||
|
class="tab-button"
|
||||||
|
class:active={activeTab === 'files'}
|
||||||
|
on:click={() => dispatch('tabChange', 'files')}
|
||||||
|
>
|
||||||
|
📁 文件传输
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="tab-button"
|
||||||
|
class:active={activeTab === 'text'}
|
||||||
|
on:click={() => dispatch('tabChange', 'text')}
|
||||||
|
>
|
||||||
|
📝 文本分享
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.tab-navigation {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
padding: 0.25rem;
|
||||||
|
background-color: var(--button);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
max-width: fit-content;
|
||||||
|
margin: 0 auto 1.5rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button {
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--secondary);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button:hover {
|
||||||
|
background-color: var(--button-hover);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button.active {
|
||||||
|
background-color: var(--secondary);
|
||||||
|
color: var(--primary);
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button.active:hover {
|
||||||
|
background-color: var(--secondary);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.tab-navigation {
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button {
|
||||||
|
flex: 1;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
189
web/src/components/clipboard/TextSharing.svelte
Normal file
189
web/src/components/clipboard/TextSharing.svelte
Normal file
@ -0,0 +1,189 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import SettingsCategory from '$components/settings/SettingsCategory.svelte';
|
||||||
|
import ActionButton from '$components/buttons/ActionButton.svelte';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let textContent: string;
|
||||||
|
export let receivedText: string;
|
||||||
|
export let peerConnected: boolean;
|
||||||
|
|
||||||
|
function sendText(): void {
|
||||||
|
if (textContent.trim()) {
|
||||||
|
dispatch('sendText', { text: textContent });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearReceivedText(): void {
|
||||||
|
dispatch('clearText');
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyReceivedText(): void {
|
||||||
|
if (receivedText && navigator.clipboard) {
|
||||||
|
navigator.clipboard.writeText(receivedText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<SettingsCategory title="文本分享" sectionId="text-sharing">
|
||||||
|
<div class="text-sharing-section">
|
||||||
|
<div class="send-text">
|
||||||
|
<h4>发送文本</h4>
|
||||||
|
<textarea
|
||||||
|
class="text-input"
|
||||||
|
bind:value={textContent}
|
||||||
|
placeholder="输入要发送的文本..."
|
||||||
|
rows="4"
|
||||||
|
disabled={!peerConnected}
|
||||||
|
></textarea> <ActionButton
|
||||||
|
id="send-text"
|
||||||
|
disabled={!peerConnected || !textContent.trim()}
|
||||||
|
click={sendText}
|
||||||
|
>
|
||||||
|
发送文本
|
||||||
|
</ActionButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="received-text">
|
||||||
|
<h4>已接收文本</h4>
|
||||||
|
{#if receivedText}
|
||||||
|
<div class="text-display">
|
||||||
|
<div class="text-content">{receivedText}</div>
|
||||||
|
<div class="text-actions">
|
||||||
|
<button
|
||||||
|
class="copy-btn"
|
||||||
|
on:click={copyReceivedText}
|
||||||
|
>
|
||||||
|
📋 复制
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="clear-btn"
|
||||||
|
on:click={clearReceivedText}
|
||||||
|
>
|
||||||
|
🗑️ 清除
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="empty-state">
|
||||||
|
暂无接收到的文本
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SettingsCategory>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.text-sharing-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-text, .received-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background-color: var(--input-background);
|
||||||
|
color: var(--text);
|
||||||
|
resize: vertical;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
min-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow: 0 0 0 2px var(--accent-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-input:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-display {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background-color: var(--background-alt);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 0;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: var(--text);
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
background-color: var(--background);
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-btn, .clear-btn {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
background-color: var(--button);
|
||||||
|
color: var(--text);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-btn:hover {
|
||||||
|
background-color: var(--accent-background);
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-btn:hover {
|
||||||
|
background-color: var(--red-background);
|
||||||
|
border-color: var(--red);
|
||||||
|
color: var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--secondary);
|
||||||
|
font-style: italic;
|
||||||
|
padding: 2rem;
|
||||||
|
border: 1px dashed var(--border);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background-color: var(--background-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.text-sharing-section {
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-actions {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-btn, .clear-btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
776
web/src/lib/clipboard/clipboard-manager-new.ts
Normal file
776
web/src/lib/clipboard/clipboard-manager-new.ts
Normal file
@ -0,0 +1,776 @@
|
|||||||
|
// WebRTC and WebSocket management composable
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
import { currentApiURL } from '$lib/api/api-url';
|
||||||
|
import QRCode from 'qrcode';
|
||||||
|
|
||||||
|
// Types
|
||||||
|
export interface FileItem {
|
||||||
|
name: string;
|
||||||
|
size: number;
|
||||||
|
type: string;
|
||||||
|
blob: Blob;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ReceivingFile {
|
||||||
|
name: string;
|
||||||
|
size: number;
|
||||||
|
type: string;
|
||||||
|
chunks: Uint8Array[];
|
||||||
|
receivedSize: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Constants
|
||||||
|
const CHUNK_SIZE = 64 * 1024; // 64KB chunks for file transfer
|
||||||
|
|
||||||
|
// Store for reactive state
|
||||||
|
export const clipboardState = writable({
|
||||||
|
sessionId: '',
|
||||||
|
isConnected: false,
|
||||||
|
isCreating: false,
|
||||||
|
isJoining: false,
|
||||||
|
isCreator: false,
|
||||||
|
peerConnected: false,
|
||||||
|
qrCodeUrl: '',
|
||||||
|
activeTab: 'files' as 'files' | 'text',
|
||||||
|
files: [] as File[],
|
||||||
|
receivedFiles: [] as FileItem[],
|
||||||
|
textContent: '',
|
||||||
|
receivedText: '',
|
||||||
|
dragover: false,
|
||||||
|
sendingFiles: false,
|
||||||
|
receivingFiles: false,
|
||||||
|
transferProgress: 0,
|
||||||
|
dataChannel: null as RTCDataChannel | null,
|
||||||
|
peerConnection: null as RTCPeerConnection | null
|
||||||
|
});
|
||||||
|
|
||||||
|
export class ClipboardManager {
|
||||||
|
private ws: WebSocket | null = null;
|
||||||
|
private peerConnection: RTCPeerConnection | null = null;
|
||||||
|
private dataChannel: RTCDataChannel | null = null;
|
||||||
|
private keyPair: CryptoKeyPair | null = null;
|
||||||
|
private remotePublicKey: CryptoKey | null = null;
|
||||||
|
private sharedKey: CryptoKey | null = null;
|
||||||
|
private currentReceivingFile: ReceivingFile | null = null;
|
||||||
|
private statusInterval: ReturnType<typeof setInterval> | null = null;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.loadStoredSession();
|
||||||
|
this.startStatusCheck();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Session persistence
|
||||||
|
private loadStoredSession(): void {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const stored = localStorage.getItem('clipboard_session');
|
||||||
|
if (stored) {
|
||||||
|
try {
|
||||||
|
const session = JSON.parse(stored);
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
sessionId: session.sessionId,
|
||||||
|
isCreator: session.isCreator
|
||||||
|
}));
|
||||||
|
} catch (e) {
|
||||||
|
this.clearStoredSession();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private saveSession(sessionId: string, isCreator: boolean): void {
|
||||||
|
if (typeof window !== 'undefined' && sessionId) {
|
||||||
|
localStorage.setItem('clipboard_session', JSON.stringify({
|
||||||
|
sessionId,
|
||||||
|
isCreator,
|
||||||
|
timestamp: Date.now()
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private clearStoredSession(): void {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
localStorage.removeItem('clipboard_session');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private startStatusCheck(): void {
|
||||||
|
this.statusInterval = setInterval(() => {
|
||||||
|
const wsConnected = this.ws?.readyState === WebSocket.OPEN;
|
||||||
|
const peerConnected = this.dataChannel?.readyState === 'open';
|
||||||
|
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
isConnected: wsConnected,
|
||||||
|
peerConnected: peerConnected
|
||||||
|
}));
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// WebSocket management
|
||||||
|
private getWebSocketURL(): string {
|
||||||
|
if (typeof window === 'undefined') return 'ws://localhost:9000/ws';
|
||||||
|
|
||||||
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||||
|
let host = window.location.host;
|
||||||
|
|
||||||
|
// For mobile access, use the actual IP instead of localhost
|
||||||
|
if (host.includes('localhost') || host.includes('127.0.0.1')) {
|
||||||
|
host = '192.168.1.12:5173';
|
||||||
|
}
|
||||||
|
|
||||||
|
const wsUrl = `${protocol}//${host}/ws`;
|
||||||
|
console.log('Constructed WebSocket URL:', wsUrl);
|
||||||
|
return wsUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async connectWebSocket(): Promise<void> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
try {
|
||||||
|
const wsUrl = this.getWebSocketURL();
|
||||||
|
this.ws = new WebSocket(wsUrl);
|
||||||
|
|
||||||
|
this.ws.onopen = () => {
|
||||||
|
console.log('🔗 WebSocket connected');
|
||||||
|
clipboardState.update(state => ({ ...state, isConnected: true }));
|
||||||
|
resolve();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.ws.onmessage = async (event) => {
|
||||||
|
try {
|
||||||
|
const message = JSON.parse(event.data);
|
||||||
|
await this.handleWebSocketMessage(message);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error parsing WebSocket message:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.ws.onclose = () => {
|
||||||
|
console.log('🔌 WebSocket disconnected');
|
||||||
|
clipboardState.update(state => ({ ...state, isConnected: false }));
|
||||||
|
};
|
||||||
|
|
||||||
|
this.ws.onerror = (error) => {
|
||||||
|
console.error('❌ WebSocket error:', error);
|
||||||
|
reject(error);
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating WebSocket:', error);
|
||||||
|
reject(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Encryption
|
||||||
|
private async generateKeyPair(): Promise<void> {
|
||||||
|
this.keyPair = await window.crypto.subtle.generateKey(
|
||||||
|
{ name: 'ECDH', namedCurve: 'P-256' },
|
||||||
|
false,
|
||||||
|
['deriveKey']
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async exportPublicKey(): Promise<ArrayBuffer> {
|
||||||
|
if (!this.keyPair) throw new Error('Key pair not generated');
|
||||||
|
return await window.crypto.subtle.exportKey('raw', this.keyPair.publicKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async importRemotePublicKey(publicKeyArray: number[]): Promise<void> {
|
||||||
|
const publicKeyBuffer = new Uint8Array(publicKeyArray).buffer;
|
||||||
|
this.remotePublicKey = await window.crypto.subtle.importKey(
|
||||||
|
'raw',
|
||||||
|
publicKeyBuffer,
|
||||||
|
{ name: 'ECDH', namedCurve: 'P-256' },
|
||||||
|
false,
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async deriveSharedKey(): Promise<void> {
|
||||||
|
if (!this.keyPair || !this.remotePublicKey) throw new Error('Keys not available');
|
||||||
|
|
||||||
|
this.sharedKey = await window.crypto.subtle.deriveKey(
|
||||||
|
{ name: 'ECDH', public: this.remotePublicKey },
|
||||||
|
this.keyPair.privateKey,
|
||||||
|
{ name: 'AES-GCM', length: 256 },
|
||||||
|
false,
|
||||||
|
['encrypt', 'decrypt']
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async encryptData(data: string): Promise<ArrayBuffer> {
|
||||||
|
if (!this.sharedKey) throw new Error('Shared key not available');
|
||||||
|
|
||||||
|
const encoder = new TextEncoder();
|
||||||
|
const dataBuffer = encoder.encode(data);
|
||||||
|
const iv = window.crypto.getRandomValues(new Uint8Array(12));
|
||||||
|
|
||||||
|
const encrypted = await window.crypto.subtle.encrypt(
|
||||||
|
{ name: 'AES-GCM', iv: iv },
|
||||||
|
this.sharedKey,
|
||||||
|
dataBuffer
|
||||||
|
);
|
||||||
|
|
||||||
|
// Combine IV and encrypted data
|
||||||
|
const result = new Uint8Array(iv.length + encrypted.byteLength);
|
||||||
|
result.set(iv);
|
||||||
|
result.set(new Uint8Array(encrypted), iv.length);
|
||||||
|
|
||||||
|
return result.buffer;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async encryptBinaryData(data: Uint8Array): Promise<ArrayBuffer> {
|
||||||
|
if (!this.sharedKey) throw new Error('Shared key not available');
|
||||||
|
|
||||||
|
const iv = window.crypto.getRandomValues(new Uint8Array(12));
|
||||||
|
|
||||||
|
const encrypted = await window.crypto.subtle.encrypt(
|
||||||
|
{ name: 'AES-GCM', iv: iv },
|
||||||
|
this.sharedKey,
|
||||||
|
data
|
||||||
|
);
|
||||||
|
|
||||||
|
// Combine IV and encrypted data
|
||||||
|
const result = new Uint8Array(iv.length + encrypted.byteLength);
|
||||||
|
result.set(iv);
|
||||||
|
result.set(new Uint8Array(encrypted), iv.length);
|
||||||
|
|
||||||
|
return result.buffer;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async decryptData(encryptedBuffer: ArrayBuffer): Promise<string> {
|
||||||
|
if (!this.sharedKey) throw new Error('Shared key not available');
|
||||||
|
|
||||||
|
const encryptedArray = new Uint8Array(encryptedBuffer);
|
||||||
|
const iv = encryptedArray.slice(0, 12);
|
||||||
|
const encrypted = encryptedArray.slice(12);
|
||||||
|
|
||||||
|
const decrypted = await window.crypto.subtle.decrypt(
|
||||||
|
{ name: 'AES-GCM', iv: iv },
|
||||||
|
this.sharedKey,
|
||||||
|
encrypted
|
||||||
|
);
|
||||||
|
|
||||||
|
const decoder = new TextDecoder();
|
||||||
|
return decoder.decode(decrypted);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async decryptBinaryData(encryptedBuffer: ArrayBuffer): Promise<Uint8Array> {
|
||||||
|
if (!this.sharedKey) throw new Error('Shared key not available');
|
||||||
|
|
||||||
|
const encryptedArray = new Uint8Array(encryptedBuffer);
|
||||||
|
const iv = encryptedArray.slice(0, 12);
|
||||||
|
const encrypted = encryptedArray.slice(12);
|
||||||
|
|
||||||
|
const decrypted = await window.crypto.subtle.decrypt(
|
||||||
|
{ name: 'AES-GCM', iv: iv },
|
||||||
|
this.sharedKey,
|
||||||
|
encrypted
|
||||||
|
);
|
||||||
|
|
||||||
|
return new Uint8Array(decrypted);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public API methods
|
||||||
|
async createSession(): Promise<void> {
|
||||||
|
try {
|
||||||
|
clipboardState.update(state => ({ ...state, isCreating: true }));
|
||||||
|
await this.generateKeyPair();
|
||||||
|
await this.connectWebSocket();
|
||||||
|
|
||||||
|
const publicKeyBuffer = await this.exportPublicKey();
|
||||||
|
const publicKeyArray = Array.from(new Uint8Array(publicKeyBuffer));
|
||||||
|
|
||||||
|
if (this.ws) {
|
||||||
|
this.ws.send(JSON.stringify({
|
||||||
|
type: 'create_session',
|
||||||
|
publicKey: publicKeyArray
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating session:', error);
|
||||||
|
clipboardState.update(state => ({ ...state, isCreating: false }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async joinSession(joinCode: string): Promise<void> {
|
||||||
|
try {
|
||||||
|
console.log('Starting join session process...');
|
||||||
|
clipboardState.update(state => ({ ...state, isJoining: true }));
|
||||||
|
|
||||||
|
await this.generateKeyPair();
|
||||||
|
await this.connectWebSocket();
|
||||||
|
|
||||||
|
const publicKeyBuffer = await this.exportPublicKey();
|
||||||
|
const publicKeyArray = Array.from(new Uint8Array(publicKeyBuffer));
|
||||||
|
|
||||||
|
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
||||||
|
const message = {
|
||||||
|
type: 'join_session',
|
||||||
|
sessionId: joinCode,
|
||||||
|
publicKey: publicKeyArray
|
||||||
|
};
|
||||||
|
console.log('Sending join message:', message);
|
||||||
|
this.ws.send(JSON.stringify(message));
|
||||||
|
} else {
|
||||||
|
console.error('WebSocket not ready');
|
||||||
|
clipboardState.update(state => ({ ...state, isJoining: false }));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error joining session:', error);
|
||||||
|
clipboardState.update(state => ({ ...state, isJoining: false }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async generateQRCode(sessionId: string): Promise<void> {
|
||||||
|
try {
|
||||||
|
if (typeof window !== 'undefined' && sessionId) {
|
||||||
|
let origin = window.location.origin;
|
||||||
|
if (origin.includes('localhost') || origin.includes('127.0.0.1')) {
|
||||||
|
origin = origin.replace(/localhost:\d+|127\.0\.0\.1:\d+/, '192.168.1.12:5173');
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = `${origin}/clipboard?session=${sessionId}`;
|
||||||
|
const qrCodeUrl = await QRCode.toDataURL(url, {
|
||||||
|
color: { dark: '#000000', light: '#ffffff' }
|
||||||
|
});
|
||||||
|
|
||||||
|
clipboardState.update(state => ({ ...state, qrCodeUrl }));
|
||||||
|
console.log('QR Code generated');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('QR Code generation failed:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
shareSession(sessionId: string): void {
|
||||||
|
if (typeof window !== 'undefined' && sessionId) {
|
||||||
|
let origin = window.location.origin;
|
||||||
|
if (origin.includes('localhost') || origin.includes('127.0.0.1')) {
|
||||||
|
origin = origin.replace(/localhost:\d+|127\.0\.0\.1:\d+/, '192.168.1.12:5173');
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = `${origin}/clipboard?session=${sessionId}`;
|
||||||
|
navigator.clipboard.writeText(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cleanup(): void {
|
||||||
|
if (this.dataChannel) {
|
||||||
|
this.dataChannel.close();
|
||||||
|
this.dataChannel = null;
|
||||||
|
}
|
||||||
|
if (this.peerConnection) {
|
||||||
|
this.peerConnection.close();
|
||||||
|
this.peerConnection = null;
|
||||||
|
}
|
||||||
|
if (this.ws) {
|
||||||
|
this.ws.close();
|
||||||
|
this.ws = null;
|
||||||
|
}
|
||||||
|
if (this.statusInterval) {
|
||||||
|
clearInterval(this.statusInterval);
|
||||||
|
}
|
||||||
|
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
sessionId: '',
|
||||||
|
isConnected: false,
|
||||||
|
peerConnected: false,
|
||||||
|
qrCodeUrl: ''
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.sharedKey = null;
|
||||||
|
this.remotePublicKey = null;
|
||||||
|
this.clearStoredSession();
|
||||||
|
}
|
||||||
|
|
||||||
|
// WebSocket message handler
|
||||||
|
private async handleWebSocketMessage(message: any): Promise<void> {
|
||||||
|
console.log('Handling WebSocket message:', message.type);
|
||||||
|
|
||||||
|
switch (message.type) {
|
||||||
|
case 'session_created':
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
sessionId: message.sessionId,
|
||||||
|
isCreating: false,
|
||||||
|
isCreator: true
|
||||||
|
}));
|
||||||
|
await this.generateQRCode(message.sessionId);
|
||||||
|
this.saveSession(message.sessionId, true);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'session_joined':
|
||||||
|
console.log('Session joined successfully, setting up WebRTC...');
|
||||||
|
await this.importRemotePublicKey(message.publicKey);
|
||||||
|
await this.deriveSharedKey();
|
||||||
|
clipboardState.update(state => ({ ...state, isJoining: false }));
|
||||||
|
await this.setupWebRTC(false);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'peer_joined':
|
||||||
|
console.log('Peer joined, setting up WebRTC...');
|
||||||
|
await this.importRemotePublicKey(message.publicKey);
|
||||||
|
await this.deriveSharedKey();
|
||||||
|
|
||||||
|
// Get current state to check if this is the creator
|
||||||
|
let currentState: any = {};
|
||||||
|
const unsubscribe = clipboardState.subscribe(s => currentState = s);
|
||||||
|
unsubscribe();
|
||||||
|
|
||||||
|
if (currentState.isCreator) {
|
||||||
|
await this.setupWebRTC(true);
|
||||||
|
} else {
|
||||||
|
await this.setupWebRTC(false);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'offer':
|
||||||
|
await this.handleOffer(message.offer);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'answer':
|
||||||
|
await this.handleAnswer(message.answer);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'ice_candidate':
|
||||||
|
await this.handleIceCandidate(message.candidate);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'error':
|
||||||
|
console.error('Server error:', message);
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
isCreating: false,
|
||||||
|
isJoining: false
|
||||||
|
}));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// WebRTC setup and handlers
|
||||||
|
private async setupWebRTC(isInitiator: boolean): Promise<void> {
|
||||||
|
try {
|
||||||
|
this.peerConnection = new RTCPeerConnection({
|
||||||
|
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update state with peer connection
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
peerConnection: this.peerConnection
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.peerConnection.onicecandidate = (event) => {
|
||||||
|
if (event.candidate && this.ws) {
|
||||||
|
this.ws.send(JSON.stringify({
|
||||||
|
type: 'ice_candidate',
|
||||||
|
candidate: event.candidate
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.peerConnection.onconnectionstatechange = () => {
|
||||||
|
const state = this.peerConnection?.connectionState;
|
||||||
|
console.log('🔗 Peer connection state changed:', state);
|
||||||
|
|
||||||
|
if (state === 'connected') {
|
||||||
|
console.log('🎉 Peer connected!');
|
||||||
|
clipboardState.update(state => ({ ...state, peerConnected: true }));
|
||||||
|
} else if (state === 'failed' || state === 'disconnected') {
|
||||||
|
console.warn('❌ Peer connection failed/disconnected');
|
||||||
|
clipboardState.update(state => ({ ...state, peerConnected: false }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isInitiator) {
|
||||||
|
this.dataChannel = this.peerConnection.createDataChannel('files', {
|
||||||
|
ordered: true
|
||||||
|
});
|
||||||
|
this.setupDataChannel();
|
||||||
|
|
||||||
|
const offer = await this.peerConnection.createOffer();
|
||||||
|
await this.peerConnection.setLocalDescription(offer);
|
||||||
|
|
||||||
|
if (this.ws) {
|
||||||
|
this.ws.send(JSON.stringify({
|
||||||
|
type: 'offer',
|
||||||
|
offer
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.peerConnection.ondatachannel = (event) => {
|
||||||
|
this.dataChannel = event.channel;
|
||||||
|
this.setupDataChannel();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error setting up WebRTC:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private setupDataChannel(): void {
|
||||||
|
if (!this.dataChannel) return;
|
||||||
|
|
||||||
|
// Update state with data channel
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
dataChannel: this.dataChannel
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.dataChannel.onopen = () => {
|
||||||
|
console.log('🎉 Data channel opened!');
|
||||||
|
clipboardState.update(state => ({ ...state, peerConnected: true }));
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel.onclose = () => {
|
||||||
|
console.log('❌ Data channel closed');
|
||||||
|
clipboardState.update(state => ({ ...state, peerConnected: false }));
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel.onerror = (error) => {
|
||||||
|
console.error('Data channel error:', error);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel.onmessage = async (event) => {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(event.data);
|
||||||
|
await this.handleDataChannelMessage(data);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error handling data channel message:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private async handleOffer(offer: RTCSessionDescriptionInit): Promise<void> {
|
||||||
|
try {
|
||||||
|
if (this.peerConnection) {
|
||||||
|
await this.peerConnection.setRemoteDescription(offer);
|
||||||
|
const answer = await this.peerConnection.createAnswer();
|
||||||
|
await this.peerConnection.setLocalDescription(answer);
|
||||||
|
|
||||||
|
if (this.ws) {
|
||||||
|
this.ws.send(JSON.stringify({
|
||||||
|
type: 'answer',
|
||||||
|
answer
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error handling offer:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async handleAnswer(answer: RTCSessionDescriptionInit): Promise<void> {
|
||||||
|
try {
|
||||||
|
if (this.peerConnection) {
|
||||||
|
await this.peerConnection.setRemoteDescription(answer);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error handling answer:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async handleIceCandidate(candidate: RTCIceCandidateInit): Promise<void> {
|
||||||
|
try {
|
||||||
|
if (this.peerConnection) {
|
||||||
|
await this.peerConnection.addIceCandidate(candidate);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error handling ICE candidate:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async handleDataChannelMessage(data: any): Promise<void> {
|
||||||
|
// Handle different types of data channel messages
|
||||||
|
switch (data.type) {
|
||||||
|
case 'text':
|
||||||
|
// Convert array back to ArrayBuffer for decryption
|
||||||
|
const encryptedBuffer = new Uint8Array(data.content).buffer;
|
||||||
|
const decryptedText = await this.decryptData(encryptedBuffer);
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
receivedText: decryptedText
|
||||||
|
}));
|
||||||
|
console.log('Text received successfully');
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'file_start':
|
||||||
|
// Start receiving a new file
|
||||||
|
this.currentReceivingFile = {
|
||||||
|
name: data.name,
|
||||||
|
size: data.size,
|
||||||
|
type: data.mimeType || data.type,
|
||||||
|
chunks: [],
|
||||||
|
receivedSize: 0
|
||||||
|
};
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
receivingFiles: true,
|
||||||
|
transferProgress: 0
|
||||||
|
}));
|
||||||
|
console.log('Started receiving file:', data.name);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'file_chunk':
|
||||||
|
if (this.currentReceivingFile) {
|
||||||
|
// Decrypt and store chunk
|
||||||
|
const encryptedData = new Uint8Array(data.data).buffer;
|
||||||
|
const decryptedChunk = await this.decryptBinaryData(encryptedData);
|
||||||
|
|
||||||
|
this.currentReceivingFile.chunks.push(decryptedChunk);
|
||||||
|
this.currentReceivingFile.receivedSize += decryptedChunk.length;
|
||||||
|
|
||||||
|
// Update progress
|
||||||
|
const progress = (this.currentReceivingFile.receivedSize / this.currentReceivingFile.size) * 100;
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
transferProgress: Math.min(progress, 100)
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'file_end':
|
||||||
|
if (this.currentReceivingFile && this.currentReceivingFile.name === data.name) {
|
||||||
|
// Combine all chunks into a single file
|
||||||
|
const totalSize = this.currentReceivingFile.chunks.reduce((sum, chunk) => sum + chunk.length, 0);
|
||||||
|
const combinedArray = new Uint8Array(totalSize);
|
||||||
|
let offset = 0;
|
||||||
|
|
||||||
|
for (const chunk of this.currentReceivingFile.chunks) {
|
||||||
|
combinedArray.set(chunk, offset);
|
||||||
|
offset += chunk.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
const blob = new Blob([combinedArray], { type: this.currentReceivingFile.type });
|
||||||
|
const fileItem: FileItem = {
|
||||||
|
name: this.currentReceivingFile.name,
|
||||||
|
size: this.currentReceivingFile.size,
|
||||||
|
type: this.currentReceivingFile.type,
|
||||||
|
blob: blob
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add to received files
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
receivedFiles: [...state.receivedFiles, fileItem],
|
||||||
|
receivingFiles: false,
|
||||||
|
transferProgress: 0
|
||||||
|
}));
|
||||||
|
|
||||||
|
console.log('File received successfully:', data.name);
|
||||||
|
this.currentReceivingFile = null;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods for sending data
|
||||||
|
async sendText(text: string): Promise<void> {
|
||||||
|
if (!this.dataChannel || this.dataChannel.readyState !== 'open') {
|
||||||
|
console.error('Data channel not ready');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const encryptedText = await this.encryptData(text);
|
||||||
|
// Convert ArrayBuffer to Array for JSON serialization
|
||||||
|
const encryptedArray = Array.from(new Uint8Array(encryptedText));
|
||||||
|
const message = {
|
||||||
|
type: 'text',
|
||||||
|
content: encryptedArray
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel.send(JSON.stringify(message));
|
||||||
|
console.log('Text sent successfully');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error sending text:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async sendFiles(): Promise<void> {
|
||||||
|
if (!this.dataChannel || this.dataChannel.readyState !== 'open') {
|
||||||
|
console.error('Data channel not ready');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let currentFiles: File[] = [];
|
||||||
|
const unsubscribe = clipboardState.subscribe(state => {
|
||||||
|
currentFiles = state.files;
|
||||||
|
});
|
||||||
|
unsubscribe();
|
||||||
|
|
||||||
|
if (currentFiles.length === 0) {
|
||||||
|
console.log('No files to send');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
clipboardState.update(state => ({ ...state, sendingFiles: true, transferProgress: 0 }));
|
||||||
|
|
||||||
|
for (let i = 0; i < currentFiles.length; i++) {
|
||||||
|
const file = currentFiles[i];
|
||||||
|
await this.sendSingleFile(file);
|
||||||
|
|
||||||
|
// Update progress
|
||||||
|
const progress = ((i + 1) / currentFiles.length) * 100;
|
||||||
|
clipboardState.update(state => ({ ...state, transferProgress: progress }));
|
||||||
|
}
|
||||||
|
|
||||||
|
clipboardState.update(state => ({ ...state, sendingFiles: false, transferProgress: 0 }));
|
||||||
|
console.log('All files sent successfully');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error sending files:', error);
|
||||||
|
clipboardState.update(state => ({ ...state, sendingFiles: false, transferProgress: 0 }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async sendSingleFile(file: File): Promise<void> {
|
||||||
|
// Send file start message
|
||||||
|
const fileStartMessage = {
|
||||||
|
type: 'file_start',
|
||||||
|
name: file.name,
|
||||||
|
size: file.size,
|
||||||
|
mimeType: file.type
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel!.send(JSON.stringify(fileStartMessage));
|
||||||
|
|
||||||
|
// Send file in chunks
|
||||||
|
const arrayBuffer = await file.arrayBuffer();
|
||||||
|
const totalChunks = Math.ceil(arrayBuffer.byteLength / CHUNK_SIZE);
|
||||||
|
|
||||||
|
for (let i = 0; i < totalChunks; i++) {
|
||||||
|
const start = i * CHUNK_SIZE;
|
||||||
|
const end = Math.min(start + CHUNK_SIZE, arrayBuffer.byteLength);
|
||||||
|
const chunk = arrayBuffer.slice(start, end);
|
||||||
|
const encryptedChunk = await this.encryptBinaryData(new Uint8Array(chunk));
|
||||||
|
|
||||||
|
const chunkMessage = {
|
||||||
|
type: 'file_chunk',
|
||||||
|
index: i,
|
||||||
|
data: Array.from(new Uint8Array(encryptedChunk))
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel!.send(JSON.stringify(chunkMessage));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Send file end message
|
||||||
|
const fileEndMessage = {
|
||||||
|
type: 'file_end',
|
||||||
|
name: file.name
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel!.send(JSON.stringify(fileEndMessage));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Expose peer connection and data channel for debug panel
|
||||||
|
get debugInfo() {
|
||||||
|
return {
|
||||||
|
peerConnection: this.peerConnection,
|
||||||
|
dataChannel: this.dataChannel,
|
||||||
|
sharedKey: this.sharedKey ? 'Present' : 'Not available'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
776
web/src/lib/clipboard/clipboard-manager.ts
Normal file
776
web/src/lib/clipboard/clipboard-manager.ts
Normal file
@ -0,0 +1,776 @@
|
|||||||
|
// WebRTC and WebSocket management composable
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
import { currentApiURL } from '$lib/api/api-url';
|
||||||
|
import QRCode from 'qrcode';
|
||||||
|
|
||||||
|
// Types
|
||||||
|
export interface FileItem {
|
||||||
|
name: string;
|
||||||
|
size: number;
|
||||||
|
type: string;
|
||||||
|
blob: Blob;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ReceivingFile {
|
||||||
|
name: string;
|
||||||
|
size: number;
|
||||||
|
type: string;
|
||||||
|
chunks: Uint8Array[];
|
||||||
|
receivedSize: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Constants
|
||||||
|
const CHUNK_SIZE = 64 * 1024; // 64KB chunks for file transfer
|
||||||
|
|
||||||
|
// Store for reactive state
|
||||||
|
export const clipboardState = writable({
|
||||||
|
sessionId: '',
|
||||||
|
isConnected: false,
|
||||||
|
isCreating: false,
|
||||||
|
isJoining: false,
|
||||||
|
isCreator: false,
|
||||||
|
peerConnected: false,
|
||||||
|
qrCodeUrl: '',
|
||||||
|
activeTab: 'files' as 'files' | 'text',
|
||||||
|
files: [] as File[],
|
||||||
|
receivedFiles: [] as FileItem[],
|
||||||
|
textContent: '',
|
||||||
|
receivedText: '',
|
||||||
|
dragover: false,
|
||||||
|
sendingFiles: false,
|
||||||
|
receivingFiles: false,
|
||||||
|
transferProgress: 0,
|
||||||
|
dataChannel: null as RTCDataChannel | null,
|
||||||
|
peerConnection: null as RTCPeerConnection | null
|
||||||
|
});
|
||||||
|
|
||||||
|
export class ClipboardManager {
|
||||||
|
private ws: WebSocket | null = null;
|
||||||
|
private peerConnection: RTCPeerConnection | null = null;
|
||||||
|
private dataChannel: RTCDataChannel | null = null;
|
||||||
|
private keyPair: CryptoKeyPair | null = null;
|
||||||
|
private remotePublicKey: CryptoKey | null = null;
|
||||||
|
private sharedKey: CryptoKey | null = null;
|
||||||
|
private currentReceivingFile: ReceivingFile | null = null;
|
||||||
|
private statusInterval: ReturnType<typeof setInterval> | null = null;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.loadStoredSession();
|
||||||
|
this.startStatusCheck();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Session persistence
|
||||||
|
private loadStoredSession(): void {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const stored = localStorage.getItem('clipboard_session');
|
||||||
|
if (stored) {
|
||||||
|
try {
|
||||||
|
const session = JSON.parse(stored);
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
sessionId: session.sessionId,
|
||||||
|
isCreator: session.isCreator
|
||||||
|
}));
|
||||||
|
} catch (e) {
|
||||||
|
this.clearStoredSession();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private saveSession(sessionId: string, isCreator: boolean): void {
|
||||||
|
if (typeof window !== 'undefined' && sessionId) {
|
||||||
|
localStorage.setItem('clipboard_session', JSON.stringify({
|
||||||
|
sessionId,
|
||||||
|
isCreator,
|
||||||
|
timestamp: Date.now()
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private clearStoredSession(): void {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
localStorage.removeItem('clipboard_session');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private startStatusCheck(): void {
|
||||||
|
this.statusInterval = setInterval(() => {
|
||||||
|
const wsConnected = this.ws?.readyState === WebSocket.OPEN;
|
||||||
|
const peerConnected = this.dataChannel?.readyState === 'open';
|
||||||
|
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
isConnected: wsConnected,
|
||||||
|
peerConnected: peerConnected
|
||||||
|
}));
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// WebSocket management
|
||||||
|
private getWebSocketURL(): string {
|
||||||
|
if (typeof window === 'undefined') return 'ws://localhost:9000/ws';
|
||||||
|
|
||||||
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||||
|
let host = window.location.host;
|
||||||
|
|
||||||
|
// For mobile access, use the actual IP instead of localhost
|
||||||
|
if (host.includes('localhost') || host.includes('127.0.0.1')) {
|
||||||
|
host = '192.168.1.12:5173';
|
||||||
|
}
|
||||||
|
|
||||||
|
const wsUrl = `${protocol}//${host}/ws`;
|
||||||
|
console.log('Constructed WebSocket URL:', wsUrl);
|
||||||
|
return wsUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async connectWebSocket(): Promise<void> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
try {
|
||||||
|
const wsUrl = this.getWebSocketURL();
|
||||||
|
this.ws = new WebSocket(wsUrl);
|
||||||
|
|
||||||
|
this.ws.onopen = () => {
|
||||||
|
console.log('🔗 WebSocket connected');
|
||||||
|
clipboardState.update(state => ({ ...state, isConnected: true }));
|
||||||
|
resolve();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.ws.onmessage = async (event) => {
|
||||||
|
try {
|
||||||
|
const message = JSON.parse(event.data);
|
||||||
|
await this.handleWebSocketMessage(message);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error parsing WebSocket message:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.ws.onclose = () => {
|
||||||
|
console.log('🔌 WebSocket disconnected');
|
||||||
|
clipboardState.update(state => ({ ...state, isConnected: false }));
|
||||||
|
};
|
||||||
|
|
||||||
|
this.ws.onerror = (error) => {
|
||||||
|
console.error('❌ WebSocket error:', error);
|
||||||
|
reject(error);
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating WebSocket:', error);
|
||||||
|
reject(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Encryption
|
||||||
|
private async generateKeyPair(): Promise<void> {
|
||||||
|
this.keyPair = await window.crypto.subtle.generateKey(
|
||||||
|
{ name: 'ECDH', namedCurve: 'P-256' },
|
||||||
|
false,
|
||||||
|
['deriveKey']
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async exportPublicKey(): Promise<ArrayBuffer> {
|
||||||
|
if (!this.keyPair) throw new Error('Key pair not generated');
|
||||||
|
return await window.crypto.subtle.exportKey('raw', this.keyPair.publicKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async importRemotePublicKey(publicKeyArray: number[]): Promise<void> {
|
||||||
|
const publicKeyBuffer = new Uint8Array(publicKeyArray).buffer;
|
||||||
|
this.remotePublicKey = await window.crypto.subtle.importKey(
|
||||||
|
'raw',
|
||||||
|
publicKeyBuffer,
|
||||||
|
{ name: 'ECDH', namedCurve: 'P-256' },
|
||||||
|
false,
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async deriveSharedKey(): Promise<void> {
|
||||||
|
if (!this.keyPair || !this.remotePublicKey) throw new Error('Keys not available');
|
||||||
|
|
||||||
|
this.sharedKey = await window.crypto.subtle.deriveKey(
|
||||||
|
{ name: 'ECDH', public: this.remotePublicKey },
|
||||||
|
this.keyPair.privateKey,
|
||||||
|
{ name: 'AES-GCM', length: 256 },
|
||||||
|
false,
|
||||||
|
['encrypt', 'decrypt']
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async encryptData(data: string): Promise<ArrayBuffer> {
|
||||||
|
if (!this.sharedKey) throw new Error('Shared key not available');
|
||||||
|
|
||||||
|
const encoder = new TextEncoder();
|
||||||
|
const dataBuffer = encoder.encode(data);
|
||||||
|
const iv = window.crypto.getRandomValues(new Uint8Array(12));
|
||||||
|
|
||||||
|
const encrypted = await window.crypto.subtle.encrypt(
|
||||||
|
{ name: 'AES-GCM', iv: iv },
|
||||||
|
this.sharedKey,
|
||||||
|
dataBuffer
|
||||||
|
);
|
||||||
|
|
||||||
|
// Combine IV and encrypted data
|
||||||
|
const result = new Uint8Array(iv.length + encrypted.byteLength);
|
||||||
|
result.set(iv);
|
||||||
|
result.set(new Uint8Array(encrypted), iv.length);
|
||||||
|
|
||||||
|
return result.buffer;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async encryptBinaryData(data: Uint8Array): Promise<ArrayBuffer> {
|
||||||
|
if (!this.sharedKey) throw new Error('Shared key not available');
|
||||||
|
|
||||||
|
const iv = window.crypto.getRandomValues(new Uint8Array(12));
|
||||||
|
|
||||||
|
const encrypted = await window.crypto.subtle.encrypt(
|
||||||
|
{ name: 'AES-GCM', iv: iv },
|
||||||
|
this.sharedKey,
|
||||||
|
data
|
||||||
|
);
|
||||||
|
|
||||||
|
// Combine IV and encrypted data
|
||||||
|
const result = new Uint8Array(iv.length + encrypted.byteLength);
|
||||||
|
result.set(iv);
|
||||||
|
result.set(new Uint8Array(encrypted), iv.length);
|
||||||
|
|
||||||
|
return result.buffer;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async decryptData(encryptedBuffer: ArrayBuffer): Promise<string> {
|
||||||
|
if (!this.sharedKey) throw new Error('Shared key not available');
|
||||||
|
|
||||||
|
const encryptedArray = new Uint8Array(encryptedBuffer);
|
||||||
|
const iv = encryptedArray.slice(0, 12);
|
||||||
|
const encrypted = encryptedArray.slice(12);
|
||||||
|
|
||||||
|
const decrypted = await window.crypto.subtle.decrypt(
|
||||||
|
{ name: 'AES-GCM', iv: iv },
|
||||||
|
this.sharedKey,
|
||||||
|
encrypted
|
||||||
|
);
|
||||||
|
|
||||||
|
const decoder = new TextDecoder();
|
||||||
|
return decoder.decode(decrypted);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async decryptBinaryData(encryptedBuffer: ArrayBuffer): Promise<Uint8Array> {
|
||||||
|
if (!this.sharedKey) throw new Error('Shared key not available');
|
||||||
|
|
||||||
|
const encryptedArray = new Uint8Array(encryptedBuffer);
|
||||||
|
const iv = encryptedArray.slice(0, 12);
|
||||||
|
const encrypted = encryptedArray.slice(12);
|
||||||
|
|
||||||
|
const decrypted = await window.crypto.subtle.decrypt(
|
||||||
|
{ name: 'AES-GCM', iv: iv },
|
||||||
|
this.sharedKey,
|
||||||
|
encrypted
|
||||||
|
);
|
||||||
|
|
||||||
|
return new Uint8Array(decrypted);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public API methods
|
||||||
|
async createSession(): Promise<void> {
|
||||||
|
try {
|
||||||
|
clipboardState.update(state => ({ ...state, isCreating: true }));
|
||||||
|
await this.generateKeyPair();
|
||||||
|
await this.connectWebSocket();
|
||||||
|
|
||||||
|
const publicKeyBuffer = await this.exportPublicKey();
|
||||||
|
const publicKeyArray = Array.from(new Uint8Array(publicKeyBuffer));
|
||||||
|
|
||||||
|
if (this.ws) {
|
||||||
|
this.ws.send(JSON.stringify({
|
||||||
|
type: 'create_session',
|
||||||
|
publicKey: publicKeyArray
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating session:', error);
|
||||||
|
clipboardState.update(state => ({ ...state, isCreating: false }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async joinSession(joinCode: string): Promise<void> {
|
||||||
|
try {
|
||||||
|
console.log('Starting join session process...');
|
||||||
|
clipboardState.update(state => ({ ...state, isJoining: true }));
|
||||||
|
|
||||||
|
await this.generateKeyPair();
|
||||||
|
await this.connectWebSocket();
|
||||||
|
|
||||||
|
const publicKeyBuffer = await this.exportPublicKey();
|
||||||
|
const publicKeyArray = Array.from(new Uint8Array(publicKeyBuffer));
|
||||||
|
|
||||||
|
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
||||||
|
const message = {
|
||||||
|
type: 'join_session',
|
||||||
|
sessionId: joinCode,
|
||||||
|
publicKey: publicKeyArray
|
||||||
|
};
|
||||||
|
console.log('Sending join message:', message);
|
||||||
|
this.ws.send(JSON.stringify(message));
|
||||||
|
} else {
|
||||||
|
console.error('WebSocket not ready');
|
||||||
|
clipboardState.update(state => ({ ...state, isJoining: false }));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error joining session:', error);
|
||||||
|
clipboardState.update(state => ({ ...state, isJoining: false }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async generateQRCode(sessionId: string): Promise<void> {
|
||||||
|
try {
|
||||||
|
if (typeof window !== 'undefined' && sessionId) {
|
||||||
|
let origin = window.location.origin;
|
||||||
|
if (origin.includes('localhost') || origin.includes('127.0.0.1')) {
|
||||||
|
origin = origin.replace(/localhost:\d+|127\.0\.0\.1:\d+/, '192.168.1.12:5173');
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = `${origin}/clipboard?session=${sessionId}`;
|
||||||
|
const qrCodeUrl = await QRCode.toDataURL(url, {
|
||||||
|
color: { dark: '#000000', light: '#ffffff' }
|
||||||
|
});
|
||||||
|
|
||||||
|
clipboardState.update(state => ({ ...state, qrCodeUrl }));
|
||||||
|
console.log('QR Code generated');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('QR Code generation failed:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
shareSession(sessionId: string): void {
|
||||||
|
if (typeof window !== 'undefined' && sessionId) {
|
||||||
|
let origin = window.location.origin;
|
||||||
|
if (origin.includes('localhost') || origin.includes('127.0.0.1')) {
|
||||||
|
origin = origin.replace(/localhost:\d+|127\.0\.0\.1:\d+/, '192.168.1.12:5173');
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = `${origin}/clipboard?session=${sessionId}`;
|
||||||
|
navigator.clipboard.writeText(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cleanup(): void {
|
||||||
|
if (this.dataChannel) {
|
||||||
|
this.dataChannel.close();
|
||||||
|
this.dataChannel = null;
|
||||||
|
}
|
||||||
|
if (this.peerConnection) {
|
||||||
|
this.peerConnection.close();
|
||||||
|
this.peerConnection = null;
|
||||||
|
}
|
||||||
|
if (this.ws) {
|
||||||
|
this.ws.close();
|
||||||
|
this.ws = null;
|
||||||
|
}
|
||||||
|
if (this.statusInterval) {
|
||||||
|
clearInterval(this.statusInterval);
|
||||||
|
}
|
||||||
|
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
sessionId: '',
|
||||||
|
isConnected: false,
|
||||||
|
peerConnected: false,
|
||||||
|
qrCodeUrl: ''
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.sharedKey = null;
|
||||||
|
this.remotePublicKey = null;
|
||||||
|
this.clearStoredSession();
|
||||||
|
}
|
||||||
|
|
||||||
|
// WebSocket message handler
|
||||||
|
private async handleWebSocketMessage(message: any): Promise<void> {
|
||||||
|
console.log('Handling WebSocket message:', message.type);
|
||||||
|
|
||||||
|
switch (message.type) {
|
||||||
|
case 'session_created':
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
sessionId: message.sessionId,
|
||||||
|
isCreating: false,
|
||||||
|
isCreator: true
|
||||||
|
}));
|
||||||
|
await this.generateQRCode(message.sessionId);
|
||||||
|
this.saveSession(message.sessionId, true);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'session_joined':
|
||||||
|
console.log('Session joined successfully, setting up WebRTC...');
|
||||||
|
await this.importRemotePublicKey(message.publicKey);
|
||||||
|
await this.deriveSharedKey();
|
||||||
|
clipboardState.update(state => ({ ...state, isJoining: false }));
|
||||||
|
await this.setupWebRTC(false);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'peer_joined':
|
||||||
|
console.log('Peer joined, setting up WebRTC...');
|
||||||
|
await this.importRemotePublicKey(message.publicKey);
|
||||||
|
await this.deriveSharedKey();
|
||||||
|
|
||||||
|
// Get current state to check if this is the creator
|
||||||
|
let currentState: any = {};
|
||||||
|
const unsubscribe = clipboardState.subscribe(s => currentState = s);
|
||||||
|
unsubscribe();
|
||||||
|
|
||||||
|
if (currentState.isCreator) {
|
||||||
|
await this.setupWebRTC(true);
|
||||||
|
} else {
|
||||||
|
await this.setupWebRTC(false);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'offer':
|
||||||
|
await this.handleOffer(message.offer);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'answer':
|
||||||
|
await this.handleAnswer(message.answer);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'ice_candidate':
|
||||||
|
await this.handleIceCandidate(message.candidate);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'error':
|
||||||
|
console.error('Server error:', message);
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
isCreating: false,
|
||||||
|
isJoining: false
|
||||||
|
}));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// WebRTC setup and handlers
|
||||||
|
private async setupWebRTC(isInitiator: boolean): Promise<void> {
|
||||||
|
try {
|
||||||
|
this.peerConnection = new RTCPeerConnection({
|
||||||
|
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update state with peer connection
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
peerConnection: this.peerConnection
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.peerConnection.onicecandidate = (event) => {
|
||||||
|
if (event.candidate && this.ws) {
|
||||||
|
this.ws.send(JSON.stringify({
|
||||||
|
type: 'ice_candidate',
|
||||||
|
candidate: event.candidate
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.peerConnection.onconnectionstatechange = () => {
|
||||||
|
const state = this.peerConnection?.connectionState;
|
||||||
|
console.log('🔗 Peer connection state changed:', state);
|
||||||
|
|
||||||
|
if (state === 'connected') {
|
||||||
|
console.log('🎉 Peer connected!');
|
||||||
|
clipboardState.update(state => ({ ...state, peerConnected: true }));
|
||||||
|
} else if (state === 'failed' || state === 'disconnected') {
|
||||||
|
console.warn('❌ Peer connection failed/disconnected');
|
||||||
|
clipboardState.update(state => ({ ...state, peerConnected: false }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isInitiator) {
|
||||||
|
this.dataChannel = this.peerConnection.createDataChannel('files', {
|
||||||
|
ordered: true
|
||||||
|
});
|
||||||
|
this.setupDataChannel();
|
||||||
|
|
||||||
|
const offer = await this.peerConnection.createOffer();
|
||||||
|
await this.peerConnection.setLocalDescription(offer);
|
||||||
|
|
||||||
|
if (this.ws) {
|
||||||
|
this.ws.send(JSON.stringify({
|
||||||
|
type: 'offer',
|
||||||
|
offer
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.peerConnection.ondatachannel = (event) => {
|
||||||
|
this.dataChannel = event.channel;
|
||||||
|
this.setupDataChannel();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error setting up WebRTC:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private setupDataChannel(): void {
|
||||||
|
if (!this.dataChannel) return;
|
||||||
|
|
||||||
|
// Update state with data channel
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
dataChannel: this.dataChannel
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.dataChannel.onopen = () => {
|
||||||
|
console.log('🎉 Data channel opened!');
|
||||||
|
clipboardState.update(state => ({ ...state, peerConnected: true }));
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel.onclose = () => {
|
||||||
|
console.log('❌ Data channel closed');
|
||||||
|
clipboardState.update(state => ({ ...state, peerConnected: false }));
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel.onerror = (error) => {
|
||||||
|
console.error('Data channel error:', error);
|
||||||
|
}; this.dataChannel.onmessage = async (event) => {
|
||||||
|
console.log('📨 Data channel message received:', event.data);
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(event.data);
|
||||||
|
console.log('📦 Parsed data:', data.type, data);
|
||||||
|
await this.handleDataChannelMessage(data);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error handling data channel message:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private async handleOffer(offer: RTCSessionDescriptionInit): Promise<void> {
|
||||||
|
try {
|
||||||
|
if (this.peerConnection) {
|
||||||
|
await this.peerConnection.setRemoteDescription(offer);
|
||||||
|
const answer = await this.peerConnection.createAnswer();
|
||||||
|
await this.peerConnection.setLocalDescription(answer);
|
||||||
|
|
||||||
|
if (this.ws) {
|
||||||
|
this.ws.send(JSON.stringify({
|
||||||
|
type: 'answer',
|
||||||
|
answer
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error handling offer:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async handleAnswer(answer: RTCSessionDescriptionInit): Promise<void> {
|
||||||
|
try {
|
||||||
|
if (this.peerConnection) {
|
||||||
|
await this.peerConnection.setRemoteDescription(answer);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error handling answer:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async handleIceCandidate(candidate: RTCIceCandidateInit): Promise<void> {
|
||||||
|
try {
|
||||||
|
if (this.peerConnection) {
|
||||||
|
await this.peerConnection.addIceCandidate(candidate);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error handling ICE candidate:', error);
|
||||||
|
}
|
||||||
|
} private async handleDataChannelMessage(data: any): Promise<void> {
|
||||||
|
console.log('🔍 Handling data channel message type:', data.type);
|
||||||
|
// Handle different types of data channel messages
|
||||||
|
switch (data.type) { case 'text':
|
||||||
|
// Convert array back to ArrayBuffer for decryption
|
||||||
|
const encryptedBuffer = new Uint8Array(data.content).buffer;
|
||||||
|
const decryptedText = await this.decryptData(encryptedBuffer);
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
receivedText: decryptedText,
|
||||||
|
activeTab: 'text' // 自动切换到文本分享标签
|
||||||
|
}));
|
||||||
|
console.log('Text received successfully, switched to text tab');
|
||||||
|
break;
|
||||||
|
case 'file_start':
|
||||||
|
// Start receiving a new file
|
||||||
|
this.currentReceivingFile = {
|
||||||
|
name: data.name,
|
||||||
|
size: data.size,
|
||||||
|
type: data.mimeType || data.type,
|
||||||
|
chunks: [],
|
||||||
|
receivedSize: 0
|
||||||
|
};
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
receivingFiles: true,
|
||||||
|
transferProgress: 0,
|
||||||
|
activeTab: 'files' // 自动切换到文件传输标签
|
||||||
|
}));
|
||||||
|
console.log('Started receiving file:', data.name, ', switched to files tab');
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'file_chunk':
|
||||||
|
if (this.currentReceivingFile) {
|
||||||
|
// Decrypt and store chunk
|
||||||
|
const encryptedData = new Uint8Array(data.data).buffer;
|
||||||
|
const decryptedChunk = await this.decryptBinaryData(encryptedData);
|
||||||
|
|
||||||
|
this.currentReceivingFile.chunks.push(decryptedChunk);
|
||||||
|
this.currentReceivingFile.receivedSize += decryptedChunk.length;
|
||||||
|
|
||||||
|
// Update progress
|
||||||
|
const progress = (this.currentReceivingFile.receivedSize / this.currentReceivingFile.size) * 100;
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
transferProgress: Math.min(progress, 100)
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'file_end':
|
||||||
|
if (this.currentReceivingFile && this.currentReceivingFile.name === data.name) {
|
||||||
|
// Combine all chunks into a single file
|
||||||
|
const totalSize = this.currentReceivingFile.chunks.reduce((sum, chunk) => sum + chunk.length, 0);
|
||||||
|
const combinedArray = new Uint8Array(totalSize);
|
||||||
|
let offset = 0;
|
||||||
|
|
||||||
|
for (const chunk of this.currentReceivingFile.chunks) {
|
||||||
|
combinedArray.set(chunk, offset);
|
||||||
|
offset += chunk.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
const blob = new Blob([combinedArray], { type: this.currentReceivingFile.type });
|
||||||
|
const fileItem: FileItem = {
|
||||||
|
name: this.currentReceivingFile.name,
|
||||||
|
size: this.currentReceivingFile.size,
|
||||||
|
type: this.currentReceivingFile.type,
|
||||||
|
blob: blob
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add to received files
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
receivedFiles: [...state.receivedFiles, fileItem],
|
||||||
|
receivingFiles: false,
|
||||||
|
transferProgress: 0
|
||||||
|
}));
|
||||||
|
|
||||||
|
console.log('File received successfully:', data.name);
|
||||||
|
this.currentReceivingFile = null;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods for sending data
|
||||||
|
async sendText(text: string): Promise<void> {
|
||||||
|
if (!this.dataChannel || this.dataChannel.readyState !== 'open') {
|
||||||
|
console.error('Data channel not ready');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
console.log('🔐 Encrypting text:', text.substring(0, 20) + '...');
|
||||||
|
const encryptedText = await this.encryptData(text);
|
||||||
|
// Convert ArrayBuffer to Array for JSON serialization
|
||||||
|
const encryptedArray = Array.from(new Uint8Array(encryptedText));
|
||||||
|
const message = {
|
||||||
|
type: 'text',
|
||||||
|
content: encryptedArray
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log('📤 Sending message:', message.type, 'with content length:', message.content.length);
|
||||||
|
this.dataChannel.send(JSON.stringify(message));
|
||||||
|
console.log('Text sent successfully');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error sending text:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async sendFiles(): Promise<void> {
|
||||||
|
if (!this.dataChannel || this.dataChannel.readyState !== 'open') {
|
||||||
|
console.error('Data channel not ready');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let currentFiles: File[] = [];
|
||||||
|
const unsubscribe = clipboardState.subscribe(state => {
|
||||||
|
currentFiles = state.files;
|
||||||
|
});
|
||||||
|
unsubscribe();
|
||||||
|
|
||||||
|
if (currentFiles.length === 0) {
|
||||||
|
console.log('No files to send');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
clipboardState.update(state => ({ ...state, sendingFiles: true, transferProgress: 0 }));
|
||||||
|
|
||||||
|
for (let i = 0; i < currentFiles.length; i++) {
|
||||||
|
const file = currentFiles[i];
|
||||||
|
await this.sendSingleFile(file);
|
||||||
|
|
||||||
|
// Update progress
|
||||||
|
const progress = ((i + 1) / currentFiles.length) * 100;
|
||||||
|
clipboardState.update(state => ({ ...state, transferProgress: progress }));
|
||||||
|
}
|
||||||
|
|
||||||
|
clipboardState.update(state => ({ ...state, sendingFiles: false, transferProgress: 0 }));
|
||||||
|
console.log('All files sent successfully');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error sending files:', error);
|
||||||
|
clipboardState.update(state => ({ ...state, sendingFiles: false, transferProgress: 0 }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async sendSingleFile(file: File): Promise<void> {
|
||||||
|
// Send file start message
|
||||||
|
const fileStartMessage = {
|
||||||
|
type: 'file_start',
|
||||||
|
name: file.name,
|
||||||
|
size: file.size,
|
||||||
|
mimeType: file.type
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel!.send(JSON.stringify(fileStartMessage));
|
||||||
|
|
||||||
|
// Send file in chunks
|
||||||
|
const arrayBuffer = await file.arrayBuffer();
|
||||||
|
const totalChunks = Math.ceil(arrayBuffer.byteLength / CHUNK_SIZE);
|
||||||
|
|
||||||
|
for (let i = 0; i < totalChunks; i++) {
|
||||||
|
const start = i * CHUNK_SIZE;
|
||||||
|
const end = Math.min(start + CHUNK_SIZE, arrayBuffer.byteLength);
|
||||||
|
const chunk = arrayBuffer.slice(start, end);
|
||||||
|
const encryptedChunk = await this.encryptBinaryData(new Uint8Array(chunk));
|
||||||
|
|
||||||
|
const chunkMessage = {
|
||||||
|
type: 'file_chunk',
|
||||||
|
index: i,
|
||||||
|
data: Array.from(new Uint8Array(encryptedChunk))
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel!.send(JSON.stringify(chunkMessage));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Send file end message
|
||||||
|
const fileEndMessage = {
|
||||||
|
type: 'file_end',
|
||||||
|
name: file.name
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel!.send(JSON.stringify(fileEndMessage));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Expose peer connection and data channel for debug panel
|
||||||
|
get debugInfo() {
|
||||||
|
return {
|
||||||
|
peerConnection: this.peerConnection,
|
||||||
|
dataChannel: this.dataChannel,
|
||||||
|
sharedKey: this.sharedKey ? 'Present' : 'Not available'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
793
web/src/lib/clipboard/clipboard-manager.ts.broken
Normal file
793
web/src/lib/clipboard/clipboard-manager.ts.broken
Normal file
@ -0,0 +1,793 @@
|
|||||||
|
// WebRTC and WebSocket management composable
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
import { currentApiURL } from '$lib/api/api-url';
|
||||||
|
import QRCode from 'qrcode';
|
||||||
|
|
||||||
|
// Types
|
||||||
|
export interface FileItem {
|
||||||
|
name: string;
|
||||||
|
size: number;
|
||||||
|
type: string;
|
||||||
|
blob: Blob;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ReceivingFile {
|
||||||
|
name: string;
|
||||||
|
size: number;
|
||||||
|
type: string;
|
||||||
|
chunks: Uint8Array[];
|
||||||
|
receivedSize: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Constants
|
||||||
|
const CHUNK_SIZE = 64 * 1024; // 64KB chunks for file transfer
|
||||||
|
|
||||||
|
// Store for reactive state
|
||||||
|
export const clipboardState = writable({
|
||||||
|
sessionId: '',
|
||||||
|
isConnected: false,
|
||||||
|
isCreating: false,
|
||||||
|
isJoining: false,
|
||||||
|
isCreator: false,
|
||||||
|
peerConnected: false,
|
||||||
|
qrCodeUrl: '',
|
||||||
|
activeTab: 'files' as 'files' | 'text',
|
||||||
|
files: [] as File[],
|
||||||
|
receivedFiles: [] as FileItem[],
|
||||||
|
textContent: '',
|
||||||
|
receivedText: '',
|
||||||
|
dragover: false,
|
||||||
|
sendingFiles: false,
|
||||||
|
receivingFiles: false,
|
||||||
|
transferProgress: 0,
|
||||||
|
dataChannel: null as RTCDataChannel | null,
|
||||||
|
peerConnection: null as RTCPeerConnection | null
|
||||||
|
});
|
||||||
|
|
||||||
|
export class ClipboardManager {
|
||||||
|
private ws: WebSocket | null = null;
|
||||||
|
private peerConnection: RTCPeerConnection | null = null;
|
||||||
|
private dataChannel: RTCDataChannel | null = null;
|
||||||
|
private keyPair: CryptoKeyPair | null = null;
|
||||||
|
private remotePublicKey: CryptoKey | null = null;
|
||||||
|
private sharedKey: CryptoKey | null = null;
|
||||||
|
private currentReceivingFile: ReceivingFile | null = null;
|
||||||
|
private statusInterval: ReturnType<typeof setInterval> | null = null;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.loadStoredSession();
|
||||||
|
this.startStatusCheck();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Session persistence
|
||||||
|
private loadStoredSession(): void {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const stored = localStorage.getItem('clipboard_session');
|
||||||
|
if (stored) {
|
||||||
|
try {
|
||||||
|
const sessionData = JSON.parse(stored);
|
||||||
|
const now = Date.now();
|
||||||
|
|
||||||
|
// Check if session is still valid (30 minute timeout)
|
||||||
|
if (sessionData.timestamp && (now - sessionData.timestamp) < 30 * 60 * 1000) {
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
sessionId: sessionData.sessionId || '',
|
||||||
|
isCreator: sessionData.isCreator || false
|
||||||
|
}));
|
||||||
|
console.log('📁 Loaded stored session');
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
console.log('🕐 Stored session expired, clearing...');
|
||||||
|
localStorage.removeItem('clipboard_session');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('❌ Error loading stored session:', error);
|
||||||
|
localStorage.removeItem('clipboard_session');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private saveSession(sessionId: string, isCreator: boolean): void {
|
||||||
|
if (typeof window !== 'undefined' && sessionId) {
|
||||||
|
const sessionData = {
|
||||||
|
sessionId,
|
||||||
|
isCreator,
|
||||||
|
timestamp: Date.now()
|
||||||
|
};
|
||||||
|
localStorage.setItem('clipboard_session', JSON.stringify(sessionData));
|
||||||
|
console.log('💾 Session saved to localStorage:', sessionData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private clearStoredSession(): void {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
localStorage.removeItem('clipboard_session');
|
||||||
|
console.log('🗑️ Stored session cleared');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private startStatusCheck(): void {
|
||||||
|
this.statusInterval = setInterval(() => {
|
||||||
|
if (this.dataChannel) {
|
||||||
|
clipboardState.update(state => {
|
||||||
|
const isNowConnected = this.dataChannel?.readyState === 'open';
|
||||||
|
if (state.peerConnected !== isNowConnected) {
|
||||||
|
console.log('Data channel state changed:', isNowConnected);
|
||||||
|
}
|
||||||
|
return { ...state, peerConnected: isNowConnected };
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// WebSocket management
|
||||||
|
private getWebSocketURL(): string {
|
||||||
|
if (typeof window === 'undefined') return 'ws://localhost:9000/ws';
|
||||||
|
|
||||||
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||||
|
let host = window.location.host;
|
||||||
|
|
||||||
|
// For mobile access, use the actual IP instead of localhost
|
||||||
|
if (host.includes('localhost') || host.includes('127.0.0.1')) {
|
||||||
|
host = '192.168.1.12:5173';
|
||||||
|
}
|
||||||
|
|
||||||
|
const wsUrl = `${protocol}//${host}/ws`;
|
||||||
|
console.log('Constructed WebSocket URL:', wsUrl);
|
||||||
|
return wsUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async connectWebSocket(): Promise<void> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
try {
|
||||||
|
const wsUrl = this.getWebSocketURL();
|
||||||
|
console.log('Connecting to WebSocket:', wsUrl);
|
||||||
|
this.ws = new WebSocket(wsUrl);
|
||||||
|
|
||||||
|
this.ws.onopen = () => {
|
||||||
|
console.log('WebSocket connected');
|
||||||
|
clipboardState.update(state => ({ ...state, isConnected: true }));
|
||||||
|
resolve();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.ws.onmessage = async (event) => {
|
||||||
|
try {
|
||||||
|
const message = JSON.parse(event.data);
|
||||||
|
console.log('WebSocket message:', message);
|
||||||
|
await this.handleWebSocketMessage(message);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error handling WebSocket message:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.ws.onclose = () => {
|
||||||
|
console.log('WebSocket disconnected');
|
||||||
|
clipboardState.update(state => ({ ...state, isConnected: false }));
|
||||||
|
};
|
||||||
|
|
||||||
|
this.ws.onerror = (error) => {
|
||||||
|
console.error('WebSocket error:', error);
|
||||||
|
clipboardState.update(state => ({ ...state, isConnected: false }));
|
||||||
|
reject(new Error('WebSocket connection failed'));
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
reject(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Encryption
|
||||||
|
private async generateKeyPair(): Promise<void> {
|
||||||
|
this.keyPair = await window.crypto.subtle.generateKey(
|
||||||
|
{ name: 'ECDH', namedCurve: 'P-256' },
|
||||||
|
false,
|
||||||
|
['deriveKey']
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async exportPublicKey(): Promise<ArrayBuffer> {
|
||||||
|
if (!this.keyPair) throw new Error('Key pair not generated');
|
||||||
|
return await window.crypto.subtle.exportKey('raw', this.keyPair.publicKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async importRemotePublicKey(publicKeyArray: number[]): Promise<void> {
|
||||||
|
const publicKeyBuffer = new Uint8Array(publicKeyArray).buffer;
|
||||||
|
this.remotePublicKey = await window.crypto.subtle.importKey(
|
||||||
|
'raw',
|
||||||
|
publicKeyBuffer,
|
||||||
|
{ name: 'ECDH', namedCurve: 'P-256' },
|
||||||
|
false,
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async deriveSharedKey(): Promise<void> {
|
||||||
|
if (!this.keyPair || !this.remotePublicKey) throw new Error('Keys not available');
|
||||||
|
|
||||||
|
this.sharedKey = await window.crypto.subtle.deriveKey(
|
||||||
|
{ name: 'ECDH', public: this.remotePublicKey },
|
||||||
|
this.keyPair.privateKey,
|
||||||
|
{ name: 'AES-GCM', length: 256 },
|
||||||
|
false,
|
||||||
|
['encrypt', 'decrypt']
|
||||||
|
);
|
||||||
|
} private async encryptData(data: string): Promise<ArrayBuffer> {
|
||||||
|
if (!this.sharedKey) throw new Error('Shared key not available');
|
||||||
|
|
||||||
|
const encoder = new TextEncoder();
|
||||||
|
const dataBuffer = encoder.encode(data);
|
||||||
|
const iv = window.crypto.getRandomValues(new Uint8Array(12));
|
||||||
|
|
||||||
|
const encrypted = await window.crypto.subtle.encrypt(
|
||||||
|
{ name: 'AES-GCM', iv: iv },
|
||||||
|
this.sharedKey,
|
||||||
|
dataBuffer
|
||||||
|
);
|
||||||
|
|
||||||
|
// Combine IV and encrypted data
|
||||||
|
const result = new Uint8Array(iv.length + encrypted.byteLength);
|
||||||
|
result.set(iv);
|
||||||
|
result.set(new Uint8Array(encrypted), iv.length);
|
||||||
|
|
||||||
|
return result.buffer;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async encryptBinaryData(data: Uint8Array): Promise<ArrayBuffer> {
|
||||||
|
if (!this.sharedKey) throw new Error('Shared key not available');
|
||||||
|
|
||||||
|
const iv = window.crypto.getRandomValues(new Uint8Array(12));
|
||||||
|
|
||||||
|
const encrypted = await window.crypto.subtle.encrypt(
|
||||||
|
{ name: 'AES-GCM', iv: iv },
|
||||||
|
this.sharedKey,
|
||||||
|
data
|
||||||
|
);
|
||||||
|
|
||||||
|
// Combine IV and encrypted data
|
||||||
|
const result = new Uint8Array(iv.length + encrypted.byteLength);
|
||||||
|
result.set(iv);
|
||||||
|
result.set(new Uint8Array(encrypted), iv.length);
|
||||||
|
|
||||||
|
return result.buffer;
|
||||||
|
} private async decryptData(encryptedBuffer: ArrayBuffer): Promise<string> {
|
||||||
|
if (!this.sharedKey) throw new Error('Shared key not available');
|
||||||
|
|
||||||
|
const encryptedArray = new Uint8Array(encryptedBuffer);
|
||||||
|
const iv = encryptedArray.slice(0, 12);
|
||||||
|
const encrypted = encryptedArray.slice(12);
|
||||||
|
|
||||||
|
const decrypted = await window.crypto.subtle.decrypt(
|
||||||
|
{ name: 'AES-GCM', iv: iv },
|
||||||
|
this.sharedKey,
|
||||||
|
encrypted
|
||||||
|
);
|
||||||
|
|
||||||
|
const decoder = new TextDecoder();
|
||||||
|
return decoder.decode(decrypted);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async decryptBinaryData(encryptedBuffer: ArrayBuffer): Promise<Uint8Array> {
|
||||||
|
if (!this.sharedKey) throw new Error('Shared key not available');
|
||||||
|
|
||||||
|
const encryptedArray = new Uint8Array(encryptedBuffer);
|
||||||
|
const iv = encryptedArray.slice(0, 12);
|
||||||
|
const encrypted = encryptedArray.slice(12);
|
||||||
|
|
||||||
|
const decrypted = await window.crypto.subtle.decrypt(
|
||||||
|
{ name: 'AES-GCM', iv: iv },
|
||||||
|
this.sharedKey,
|
||||||
|
encrypted
|
||||||
|
);
|
||||||
|
|
||||||
|
return new Uint8Array(decrypted);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public API methods
|
||||||
|
async createSession(): Promise<void> {
|
||||||
|
try {
|
||||||
|
clipboardState.update(state => ({ ...state, isCreating: true }));
|
||||||
|
await this.generateKeyPair();
|
||||||
|
await this.connectWebSocket();
|
||||||
|
|
||||||
|
const publicKeyBuffer = await this.exportPublicKey();
|
||||||
|
const publicKeyArray = Array.from(new Uint8Array(publicKeyBuffer));
|
||||||
|
|
||||||
|
if (this.ws) {
|
||||||
|
this.ws.send(JSON.stringify({
|
||||||
|
type: 'create_session',
|
||||||
|
publicKey: publicKeyArray
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating session:', error);
|
||||||
|
clipboardState.update(state => ({ ...state, isCreating: false }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async joinSession(joinCode: string): Promise<void> {
|
||||||
|
try {
|
||||||
|
console.log('Starting join session process...');
|
||||||
|
clipboardState.update(state => ({ ...state, isJoining: true }));
|
||||||
|
|
||||||
|
await this.generateKeyPair();
|
||||||
|
await this.connectWebSocket();
|
||||||
|
|
||||||
|
const publicKeyBuffer = await this.exportPublicKey();
|
||||||
|
const publicKeyArray = Array.from(new Uint8Array(publicKeyBuffer));
|
||||||
|
|
||||||
|
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
||||||
|
const message = {
|
||||||
|
type: 'join_session',
|
||||||
|
sessionId: joinCode,
|
||||||
|
publicKey: publicKeyArray
|
||||||
|
};
|
||||||
|
console.log('Sending join message:', message);
|
||||||
|
this.ws.send(JSON.stringify(message));
|
||||||
|
} else {
|
||||||
|
console.error('WebSocket not ready');
|
||||||
|
clipboardState.update(state => ({ ...state, isJoining: false }));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error joining session:', error);
|
||||||
|
clipboardState.update(state => ({ ...state, isJoining: false }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async generateQRCode(sessionId: string): Promise<void> {
|
||||||
|
try {
|
||||||
|
if (typeof window !== 'undefined' && sessionId) {
|
||||||
|
let origin = window.location.origin;
|
||||||
|
if (origin.includes('localhost') || origin.includes('127.0.0.1')) {
|
||||||
|
origin = origin.replace(/localhost:\d+|127\.0\.0\.1:\d+/, '192.168.1.12:5173');
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = `${origin}/clipboard?session=${sessionId}`;
|
||||||
|
const qrCodeUrl = await QRCode.toDataURL(url, {
|
||||||
|
color: { dark: '#000000', light: '#ffffff' }
|
||||||
|
});
|
||||||
|
|
||||||
|
clipboardState.update(state => ({ ...state, qrCodeUrl }));
|
||||||
|
console.log('QR Code generated');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('QR Code generation failed:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
shareSession(sessionId: string): void {
|
||||||
|
if (typeof window !== 'undefined' && sessionId) {
|
||||||
|
let origin = window.location.origin;
|
||||||
|
if (origin.includes('localhost') || origin.includes('127.0.0.1')) {
|
||||||
|
origin = origin.replace(/localhost:\d+|127\.0\.0\.1:\d+/, '192.168.1.12:5173');
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = `${origin}/clipboard?session=${sessionId}`;
|
||||||
|
navigator.clipboard.writeText(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cleanup(): void {
|
||||||
|
if (this.dataChannel) {
|
||||||
|
this.dataChannel.close();
|
||||||
|
this.dataChannel = null;
|
||||||
|
}
|
||||||
|
if (this.peerConnection) {
|
||||||
|
this.peerConnection.close();
|
||||||
|
this.peerConnection = null;
|
||||||
|
}
|
||||||
|
if (this.ws) {
|
||||||
|
this.ws.close();
|
||||||
|
this.ws = null;
|
||||||
|
}
|
||||||
|
if (this.statusInterval) {
|
||||||
|
clearInterval(this.statusInterval);
|
||||||
|
}
|
||||||
|
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
sessionId: '',
|
||||||
|
isConnected: false,
|
||||||
|
peerConnected: false,
|
||||||
|
qrCodeUrl: ''
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.sharedKey = null;
|
||||||
|
this.remotePublicKey = null;
|
||||||
|
this.clearStoredSession();
|
||||||
|
}
|
||||||
|
|
||||||
|
// WebSocket message handler
|
||||||
|
private async handleWebSocketMessage(message: any): Promise<void> {
|
||||||
|
console.log('Handling WebSocket message:', message.type);
|
||||||
|
|
||||||
|
switch (message.type) {
|
||||||
|
case 'session_created':
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
sessionId: message.sessionId,
|
||||||
|
isCreating: false,
|
||||||
|
isCreator: true
|
||||||
|
}));
|
||||||
|
await this.generateQRCode(message.sessionId);
|
||||||
|
this.saveSession(message.sessionId, true);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'session_joined':
|
||||||
|
console.log('Session joined successfully, setting up WebRTC...');
|
||||||
|
await this.importRemotePublicKey(message.publicKey);
|
||||||
|
await this.deriveSharedKey();
|
||||||
|
clipboardState.update(state => ({ ...state, isJoining: false }));
|
||||||
|
await this.setupWebRTC(false);
|
||||||
|
break;
|
||||||
|
case 'peer_joined':
|
||||||
|
console.log('Peer joined, setting up WebRTC...');
|
||||||
|
await this.importRemotePublicKey(message.publicKey);
|
||||||
|
await this.deriveSharedKey();
|
||||||
|
|
||||||
|
// Get current state to check if this is the creator
|
||||||
|
let currentState: any = {};
|
||||||
|
const unsubscribe = clipboardState.subscribe(s => currentState = s);
|
||||||
|
unsubscribe();
|
||||||
|
|
||||||
|
if (currentState.isCreator) {
|
||||||
|
await this.setupWebRTC(true);
|
||||||
|
} else {
|
||||||
|
await this.setupWebRTC(false);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'offer':
|
||||||
|
await this.handleOffer(message.offer);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'answer':
|
||||||
|
await this.handleAnswer(message.answer);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'ice_candidate':
|
||||||
|
await this.handleIceCandidate(message.candidate);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'error':
|
||||||
|
console.error('Server error:', message);
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
isCreating: false,
|
||||||
|
isJoining: false
|
||||||
|
}));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} // WebRTC setup and handlers
|
||||||
|
private async setupWebRTC(isInitiator: boolean): Promise<void> {
|
||||||
|
try {
|
||||||
|
this.peerConnection = new RTCPeerConnection({
|
||||||
|
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update state with peer connection
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
peerConnection: this.peerConnection
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.peerConnection.onicecandidate = (event) => {
|
||||||
|
if (event.candidate && this.ws) {
|
||||||
|
this.ws.send(JSON.stringify({
|
||||||
|
type: 'ice_candidate',
|
||||||
|
candidate: event.candidate
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.peerConnection.onconnectionstatechange = () => {
|
||||||
|
const state = this.peerConnection?.connectionState;
|
||||||
|
console.log('🔗 Peer connection state changed:', state);
|
||||||
|
|
||||||
|
if (state === 'connected') {
|
||||||
|
console.log('🎉 Peer connected!');
|
||||||
|
clipboardState.update(state => ({ ...state, peerConnected: true }));
|
||||||
|
} else if (state === 'failed' || state === 'disconnected') {
|
||||||
|
console.warn('❌ Peer connection failed/disconnected');
|
||||||
|
clipboardState.update(state => ({ ...state, peerConnected: false }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isInitiator) {
|
||||||
|
this.dataChannel = this.peerConnection.createDataChannel('files', {
|
||||||
|
ordered: true
|
||||||
|
});
|
||||||
|
this.setupDataChannel();
|
||||||
|
|
||||||
|
const offer = await this.peerConnection.createOffer();
|
||||||
|
await this.peerConnection.setLocalDescription(offer);
|
||||||
|
|
||||||
|
if (this.ws) {
|
||||||
|
this.ws.send(JSON.stringify({
|
||||||
|
type: 'offer',
|
||||||
|
offer
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.peerConnection.ondatachannel = (event) => {
|
||||||
|
this.dataChannel = event.channel;
|
||||||
|
this.setupDataChannel();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error setting up WebRTC:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private setupDataChannel(): void {
|
||||||
|
if (!this.dataChannel) return;
|
||||||
|
|
||||||
|
// Update state with data channel
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
dataChannel: this.dataChannel
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.dataChannel.onopen = () => {
|
||||||
|
console.log('🎉 Data channel opened!');
|
||||||
|
clipboardState.update(state => ({ ...state, peerConnected: true }));
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel.onclose = () => {
|
||||||
|
console.log('❌ Data channel closed');
|
||||||
|
clipboardState.update(state => ({ ...state, peerConnected: false }));
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel.onerror = (error) => {
|
||||||
|
console.error('Data channel error:', error);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel.onmessage = async (event) => {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(event.data);
|
||||||
|
await this.handleDataChannelMessage(data);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error handling data channel message:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private async handleOffer(offer: RTCSessionDescriptionInit): Promise<void> {
|
||||||
|
try {
|
||||||
|
if (this.peerConnection) {
|
||||||
|
await this.peerConnection.setRemoteDescription(offer);
|
||||||
|
const answer = await this.peerConnection.createAnswer();
|
||||||
|
await this.peerConnection.setLocalDescription(answer);
|
||||||
|
|
||||||
|
if (this.ws) {
|
||||||
|
this.ws.send(JSON.stringify({
|
||||||
|
type: 'answer',
|
||||||
|
answer
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error handling offer:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async handleAnswer(answer: RTCSessionDescriptionInit): Promise<void> {
|
||||||
|
try {
|
||||||
|
if (this.peerConnection) {
|
||||||
|
await this.peerConnection.setRemoteDescription(answer);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error handling answer:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async handleIceCandidate(candidate: RTCIceCandidateInit): Promise<void> {
|
||||||
|
try {
|
||||||
|
if (this.peerConnection) {
|
||||||
|
await this.peerConnection.addIceCandidate(candidate);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error handling ICE candidate:', error);
|
||||||
|
}
|
||||||
|
} private async handleDataChannelMessage(data: any): Promise<void> {
|
||||||
|
// Handle different types of data channel messages
|
||||||
|
switch (data.type) {
|
||||||
|
case 'text':
|
||||||
|
// Convert array back to ArrayBuffer for decryption
|
||||||
|
const encryptedBuffer = new Uint8Array(data.content).buffer;
|
||||||
|
const decryptedText = await this.decryptData(encryptedBuffer);
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
receivedText: decryptedText
|
||||||
|
}));
|
||||||
|
console.log('Text received successfully');
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'file_start':
|
||||||
|
// Start receiving a new file
|
||||||
|
this.currentReceivingFile = {
|
||||||
|
name: data.name,
|
||||||
|
size: data.size,
|
||||||
|
type: data.mimeType || data.type,
|
||||||
|
chunks: [],
|
||||||
|
receivedSize: 0
|
||||||
|
};
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
receivingFiles: true,
|
||||||
|
transferProgress: 0
|
||||||
|
}));
|
||||||
|
console.log('Started receiving file:', data.name);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'file_chunk':
|
||||||
|
if (this.currentReceivingFile) {
|
||||||
|
// Decrypt and store chunk
|
||||||
|
const encryptedData = new Uint8Array(data.data).buffer;
|
||||||
|
const decryptedChunk = await this.decryptBinaryData(encryptedData);
|
||||||
|
|
||||||
|
this.currentReceivingFile.chunks.push(decryptedChunk);
|
||||||
|
this.currentReceivingFile.receivedSize += decryptedChunk.length;
|
||||||
|
|
||||||
|
// Update progress
|
||||||
|
const progress = (this.currentReceivingFile.receivedSize / this.currentReceivingFile.size) * 100;
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
transferProgress: Math.min(progress, 100)
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'file_end':
|
||||||
|
if (this.currentReceivingFile && this.currentReceivingFile.name === data.name) {
|
||||||
|
// Combine all chunks into a single file
|
||||||
|
const totalSize = this.currentReceivingFile.chunks.reduce((sum, chunk) => sum + chunk.length, 0);
|
||||||
|
const combinedArray = new Uint8Array(totalSize);
|
||||||
|
let offset = 0;
|
||||||
|
|
||||||
|
for (const chunk of this.currentReceivingFile.chunks) {
|
||||||
|
combinedArray.set(chunk, offset);
|
||||||
|
offset += chunk.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
const blob = new Blob([combinedArray], { type: this.currentReceivingFile.type });
|
||||||
|
const fileItem: FileItem = {
|
||||||
|
name: this.currentReceivingFile.name,
|
||||||
|
size: this.currentReceivingFile.size,
|
||||||
|
type: this.currentReceivingFile.type,
|
||||||
|
blob: blob
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add to received files
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
receivedFiles: [...state.receivedFiles, fileItem],
|
||||||
|
receivingFiles: false,
|
||||||
|
transferProgress: 0
|
||||||
|
}));
|
||||||
|
|
||||||
|
console.log('File received successfully:', data.name);
|
||||||
|
this.currentReceivingFile = null;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods for sending data async sendText(text: string): Promise<void> {
|
||||||
|
if (!this.dataChannel || this.dataChannel.readyState !== 'open') {
|
||||||
|
console.error('Data channel not ready');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const encryptedText = await this.encryptData(text);
|
||||||
|
// Convert ArrayBuffer to Array for JSON serialization
|
||||||
|
const encryptedArray = Array.from(new Uint8Array(encryptedText));
|
||||||
|
const message = {
|
||||||
|
type: 'text',
|
||||||
|
content: encryptedArray
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel.send(JSON.stringify(message));
|
||||||
|
console.log('Text sent successfully');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error sending text:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async sendFiles(): Promise<void> {
|
||||||
|
if (!this.dataChannel || this.dataChannel.readyState !== 'open') {
|
||||||
|
console.error('Data channel not ready');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let currentFiles: File[] = [];
|
||||||
|
const unsubscribe = clipboardState.subscribe(state => {
|
||||||
|
currentFiles = state.files;
|
||||||
|
});
|
||||||
|
unsubscribe();
|
||||||
|
|
||||||
|
if (currentFiles.length === 0) {
|
||||||
|
console.log('No files to send');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
clipboardState.update(state => ({ ...state, sendingFiles: true, transferProgress: 0 }));
|
||||||
|
|
||||||
|
for (let i = 0; i < currentFiles.length; i++) {
|
||||||
|
const file = currentFiles[i];
|
||||||
|
await this.sendSingleFile(file);
|
||||||
|
|
||||||
|
// Update progress
|
||||||
|
const progress = ((i + 1) / currentFiles.length) * 100;
|
||||||
|
clipboardState.update(state => ({ ...state, transferProgress: progress }));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear sent files and reset state
|
||||||
|
clipboardState.update(state => ({
|
||||||
|
...state,
|
||||||
|
files: [],
|
||||||
|
sendingFiles: false,
|
||||||
|
transferProgress: 0
|
||||||
|
}));
|
||||||
|
|
||||||
|
console.log('All files sent successfully');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error sending files:', error);
|
||||||
|
clipboardState.update(state => ({ ...state, sendingFiles: false }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
private async sendSingleFile(file: File): Promise<void> {
|
||||||
|
const CHUNK_SIZE = 64 * 1024; // 64KB chunks
|
||||||
|
|
||||||
|
// Send file start message
|
||||||
|
const fileStartMessage = {
|
||||||
|
type: 'file_start',
|
||||||
|
name: file.name,
|
||||||
|
size: file.size,
|
||||||
|
mimeType: file.type
|
||||||
|
};
|
||||||
|
this.dataChannel!.send(JSON.stringify(fileStartMessage));
|
||||||
|
|
||||||
|
// Send file in chunks
|
||||||
|
const arrayBuffer = await file.arrayBuffer();
|
||||||
|
const totalChunks = Math.ceil(arrayBuffer.byteLength / CHUNK_SIZE);
|
||||||
|
|
||||||
|
for (let i = 0; i < totalChunks; i++) {
|
||||||
|
const start = i * CHUNK_SIZE;
|
||||||
|
const end = Math.min(start + CHUNK_SIZE, arrayBuffer.byteLength);
|
||||||
|
const chunk = arrayBuffer.slice(start, end);
|
||||||
|
|
||||||
|
// Encrypt chunk (binary data)
|
||||||
|
const encryptedChunk = await this.encryptBinaryData(new Uint8Array(chunk));
|
||||||
|
|
||||||
|
const chunkMessage = {
|
||||||
|
type: 'file_chunk',
|
||||||
|
index: i,
|
||||||
|
data: Array.from(new Uint8Array(encryptedChunk))
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataChannel!.send(JSON.stringify(chunkMessage));
|
||||||
|
|
||||||
|
// Small delay to prevent overwhelming the data channel
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 10));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Send file end message
|
||||||
|
const fileEndMessage = {
|
||||||
|
type: 'file_end',
|
||||||
|
name: file.name
|
||||||
|
};
|
||||||
|
this.dataChannel!.send(JSON.stringify(fileEndMessage));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Expose peer connection and data channel for debug panel
|
||||||
|
get debugInfo() {
|
||||||
|
return {
|
||||||
|
peerConnection: this.peerConnection,
|
||||||
|
dataChannel: this.dataChannel
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user