refactor: Extract link and transmission core functions to increase sc…

…alability

README.md

@@ -4,7 +4,7 @@
 
 EasyTransfer is a free, simple, and easy-to-use P2P file transfer tool. You only need to visit a simple web page to connect to **any device** in **any network** using a device code.
 
-It is built with webRTC, and does not upload your files to any server.
+It is built using webRTC, **no need to scan codes**, **no need to share URL links**, **no need to upload files to the server**.
 
 ## How to use
 
@@ -20,7 +20,7 @@ It is built with webRTC, and does not upload your files to any server.
 ## TODO
 
 - [x] Support large file transmission
-- [ ] Optimize transmission speed
+- [x] Optimize transmission speed
 - [ ] Support photo transmission
 - [ ] Support plain text transmission
 

README_cn.md

@@ -4,7 +4,7 @@
 
 EasyTransfer是一个免费、简单、易用的 P2P 文件传输工具。您仅需要访问一个简单的网页，就可以使用设备代码连接到**任何网络**中的**任何设备**。
 
-它使用 webRTC 构建，且不会将您的文件上传到任何服务器。
+它使用 webRTC 构建，**无需扫码**、**无需分享 URL 链接**、**无需上传文件到服务器**。
 
 ## 使用方法
 
@@ -20,7 +20,7 @@ EasyTransfer是一个免费、简单、易用的 P2P 文件传输工具。您仅
 ## TODO
 
 - [x] 支持大文件传输
-- [ ] 优化传输速度
+- [x] 优化传输速度
 - [ ] 支持拍照传输
 - [ ] 支持纯文本传输
 

client/components/Download.js

@@ -6,13 +6,7 @@ import DownloadItem from './DownloadItem.js'
 export default {
   data() {
     return {
-      fileName: 'Drop file here or click to upload',
-      fileSize: 0,
-      fileProgress: 0,
       downloadFileItems: ref([]),
-      receivedData: [],
-      fileNameQueue: [],
-      fileSizeQueue: [],
     }
   },
 
@@ -21,114 +15,54 @@ export default {
   },
 
   methods: {
-    addDownloadFileItem(url, name, size, progress) {
+    addDownloadFileItem(url, name, size, progress, type) {
       this.downloadFileItems.push({
         url: url,
         name: name,
         size: size,
         progress: progress,
+        type: type,
         success: false,
       })
     },
 
-    modifyProgress(progress) {
-      this.downloadFileItems[this.downloadFileItems.length - 1].progress = progress
+    updateFileProgress(index, progress) {
+      this.downloadFileItems[index].progress = progress
     },
 
-    modifyUrl(url) {
-      this.downloadFileItems[this.downloadFileItems.length - 1].url = url
+    updateFileUrl(index, url) {
+      this.downloadFileItems[index].url = url
     },
 
-    modifySuccess() {
-      this.downloadFileItems[this.downloadFileItems.length - 1].success = true
+    updateFileSuccess(index) {
+      this.downloadFileItems[index].success = true
     },
+  },
 
-    async handleReceiveChannelMsg(event) {
-      if (typeof event.data === 'string') {
-        if (parseInt(event.data)) {
-          console.log(`[INFO] Received file size ${event.data}`);
-          this.fileSizeQueue.push(parseInt(event.data));
-        } else {
-          console.log(`[INFO] Received file ${event.data}`);
-          this.fileNameQueue.push(event.data);
-        }
-      } else {
-        // if no file name, pop from queue
-        if (!this.fileName && this.fileNameQueue.length > 0) {
-          this.fileName = this.fileNameQueue.shift();
-          this.fileSize = this.fileSizeQueue.shift();
-
-          // Insert download file HTML
-          this.addDownloadFileItem("javascript:void(0)", this.fileName, this.fileSize, 0);
-        }
-
-        // receive file
-        this.receivedData.push(event.data);
-        this.fileProgress += event.data.byteLength;
-        this.modifyProgress(this.fileProgress);
-
-        // check if file is fully received
-        if (this.fileProgress === this.fileSize) {
-          console.log(`[INFO] Received file ${this.fileName} with size ${this.fileSize}`);
-
-          this.modifyUrl(URL.createObjectURL(new Blob(this.receivedData)));
-          this.modifySuccess();
-
-          this.receivedData = [];
-          this.fileProgress = 0;
-          this.fileName = '';
-          this.fileSize = 0;
-        }
-      }
-    },
-
-    receiveFiles() {
-      this.peerConnection.ondatachannel = (event) => {
-        const receiveChannel = event.channel;
-
-        this.receivedData = [];
-        this.fileProgress = 0;
-        this.fileName = '';
-        this.fileSize = 0;
-
-        receiveChannel.onopen = () => {
-          console.log(`[INFO] Receive channel opened`);
-        }
-        receiveChannel.onerror = error => {
-          console.error(`[ERR] Receive channel error: ${error}`);
-        }
-        receiveChannel.onclose = () => {
-          console.log(`[INFO] Receive channel closed`);
-        }
-
-        this.fileNameQueue = [];
-        this.fileSizeQueue = [];
-
-        receiveChannel.onmessage = async (event) => {
-          await this.handleReceiveChannelMsg(event);
-        };
+  watch: {
+    isConnectSuccess(newValue) {
+      if (newValue) {
+        this.receiveFileUtil.receiveFiles(this.connectCore, this.addDownloadFileItem, this.updateFileProgress, this.updateFileUrl, this.updateFileSuccess)
       }
-    },
+    }
   },
 
   setup() {
     const dataStore = useDataStore()
 
-    const { peerConnection } = storeToRefs(dataStore);
+    const { connectCore, receiveFileUtil, isConnectSuccess } = storeToRefs(dataStore)
 
     return {
-      peerConnection,
+      dataStore,
+      connectCore,
+      receiveFileUtil,
+      isConnectSuccess,
     }
   },
 
-  mounted() {
-    this.receiveFiles();
-  },
-
   template: /*html*/`
     <div class="downloadFile">
-      <DownloadItem  v-for="(downloadFileItem, index) in downloadFileItems" :key="index" :url="downloadFileItem.url" :name="downloadFileItem.name" :size="downloadFileItem.size" :progress="downloadFileItem.progress" :success="downloadFileItem.success" />
+      <DownloadItem  v-for="(downloadFileItem, index) in downloadFileItems" :key="index" :url="downloadFileItem.url" :name="downloadFileItem.name" :size="downloadFileItem.size" :progress="downloadFileItem.progress" :success="downloadFileItem.success" :type="downloadFileItem.type" />
     </div>
-    <!--<button @click="addDownloadFileItem('javascript:void(0)', 'file', 1, 0)">Add item</button>-->
   `
 }

client/components/DownloadItem.js

@@ -16,6 +16,10 @@ export default {
       type: Number,
       default: 0
     },
+    type: {
+      type: String,
+      default: "file"
+    },
     success: {
       type: Boolean,
       default: false