优化代码，优化体验，优化压缩

README.md

@@ -6,34 +6,38 @@
 
 ## 准备
 
+    电脑安装好node，npm后进入项目目录
+    
     npm install
 
-    cd build/webpack/ & npm install
+    进入build目录 : cd build/webpack/  
+
+    安装一些依赖 : npm install
 
 ## 测试环境 
 
-    npm run dev & npm run devsocket
+    本地局域网启动file-res : npm run dev
 
-## 线上环境
+    本地局域网启动file-socket : npm run devsocket
 
-    npm run svr & npm run svrsocket
+## 线上环境 （需要配置wss）
+
+    公网环境启动file-res : npm run svr 
+
+    公网环境启动file-socket : npm run svrsocket
 
 
-## 修改res
+## 配置db
-
-    cd build/webpack & npm run build 保持开启即可
-
-## 接入db
 
     修改conf/cfg.json中相应db配置即可, 如open, dbName, host, port, user, pwd 等
 
 
-## 接入wss
+## 配置wss
 
     修改conf/cfg.json中相应ws配置即可，如port, ws_online等
 
 
-## 配置turnserver
+## 配置turnserver （私有部署）
 
     ubuntu:
 
@@ -45,3 +49,9 @@
 
     4. chomd +x bin/startTurnServer.sh && ./startTurnServer.sh     #启动turnserver，文件内容按需修改
 
+
+## 需要自行修改res目录
+
+    cd build/webpack 
+
+    npm run build 保持后台开启即可

build/webpack/buildDev.js

@@ -0,0 +1,4 @@
+const cliService = require('./dev/cli.js');
+
+cliService.watchCss();
+cliService.watchJs();

build/webpack/buildPro.js

@@ -0,0 +1,4 @@
+const cliService = require('./pro/cli');
+
+cliService.watchCss();
+cliService.watchJs();

build/webpack/comm/log.js

@@ -23,15 +23,15 @@ class Log {
     }
 
     log(content, tag = '1.0.0') {
-       fancyLog(this.addColor(`[BLOG-CLI] ${tag}: `, 'log') + content);
+       fancyLog(this.addColor(`[TL-RTC-FILE] ${tag}: `, 'log') + content);
     }
 
     warn(content, tag = '1.0.0') {
-        fancyLog(this.addColor(`[BLOG-CLI] ${tag}: `, 'warn') + content);
+        fancyLog(this.addColor(`[TL-RTC-FILE] ${tag}: `, 'warn') + content);
     }
 
     error(content, tag = '1.0.0') {
-        fancyLog(this.addColor(`[BLOG-CLI] ${tag}: `, 'error') + content);
+        fancyLog(this.addColor(`[TL-RTC-FILE] ${tag}: `, 'error') + content);
     }
 }
 

build/webpack/comm/path.js

@@ -1,12 +1,13 @@
 const path = require("path");
 
 function getBasePath(dir){
-    return path.resolve(process.cwd(),dir);
+    return path.resolve(__dirname , dir);
 }
 
-const ROOT_PATH = getBasePath('./../../res');
+
-const JS_PATH = getBasePath('./../../res/js');
+const ROOT_PATH = getBasePath('../../../res');
-const CSS_PATH = getBasePath('./../../res/css');
+const JS_PATH = getBasePath('../../../res/js');
+const CSS_PATH = getBasePath('../../../res/css');
 
 
 module.exports = {

build/webpack/comm/util.js

@@ -12,7 +12,6 @@ const Log = require("./log");
 const {
     JS_PATH,
     CSS_PATH,
-    JS_SINGLE_PATH
 } = require("./path");
 
 // 将后缀 .src.css .src.js .js .css 截断

build/webpack/config/.babelrc

@@ -1,6 +0,0 @@
-{
-    "presets":["@babel/preset-env"],
-    "plugins": [
-        "@vue/babel-plugin-transform-vue-jsx"   
-    ]
-}

build/webpack/dev/cli.js

@@ -2,15 +2,10 @@ const webpack = require('webpack');
 const merge = require('webpack-merge');
 const path = require('path');
 
-const devAllConfig = require('../webpack.dev-all');
+const allConfig = require('./webpackall');
 const {
-    ROOT_FILE_PATH,
     JS_PATH,
     CSS_PATH,
-
-    ROOT_LIVE_PATH,
-    JS_LIVE_PATH,
-    CSS_LIVE_PATH
 } = require('../comm/path');
 
 const {
@@ -21,7 +16,6 @@ const {
 const deleteCssJs = require('../plugin/deleteCssJs'); // 用于对打包css生成的无用js和js.map进行删除的操作
 const watchNewEntry = require('../plugin/watchNewEntry'); // 用于watch时监听新增文件的监听
 
-
 /**
  * 用于开发环境监听打包，打包出min版
  * @watchJs
@@ -33,18 +27,13 @@ class Cli {
         this.cssComplier = null; // 对应 css/dist 出口
     }
 
-    /**
-     * 监听单个文件
-     */
-    watchSingleJs(){
-    
-    }
-
     watchJs() {
-        this.jsComplier = webpack(merge(devAllConfig, {
+        this.jsComplier = webpack(merge(allConfig, {
-            entry: {
+            entry: watchNewEntry.getEntries(
-                'index' : path.resolve(JS_PATH, "./index.js")
+                [
-            },
+                    path.resolve(JS_PATH, './!(*.min).js'),  
+                ],
+            ),
             output: {
                 libraryTarget: 'umd',
                 globalObject: 'this',
@@ -56,13 +45,16 @@ class Cli {
         // 开始编译并且监听
         this.jsComplier.watch({
             aggregateTimeout: 400,
+            ignored: [
+                path.resolve(JS_PATH, "./*.min.js"),
+            ],
         }, startCompilerJs);
 
         process.stdout.write('开始webpack编译js目录' + '\n\n');
     }
    
     watchCss() {
-        this.cssComplier = webpack(merge(devAllConfig, {
+        this.cssComplier = webpack(merge(allConfig, {
             entry: watchNewEntry.getEntries(
                 [
                     path.resolve(CSS_PATH, './!(*.min).css'),  
@@ -72,7 +64,7 @@ class Cli {
                 libraryTarget: 'umd',
                 globalObject: 'this',
                 path: path.resolve(CSS_PATH, "./"),
-                filename: "./cssJsDist/[name].src.js",
+                filename: "./cssJsDist/[name].min.js",
             },
             plugins: [
                 new deleteCssJs(),
@@ -82,6 +74,9 @@ class Cli {
         // 开始编译监听
         this.cssComplier.watch({
             aggregateTimeout: 400,
+            ignored: [
+                path.resolve(CSS_PATH, "./*.min.css"),
+            ],
         }, startCompilerCss);
 
         process.stdout.write('开始webpack编译css目录' + '\n\n');

build/webpack/dev/webpackall.js

@@ -1,9 +1,8 @@
 const path = require('path');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
-const watchNewEntry = require('./plugin/watchNewEntry');
+const watchNewEntry = require('../plugin/watchNewEntry');
-const { JS_PATH, CSS_PATH } = require('./comm/path');
+const { JS_PATH, CSS_PATH } = require('../comm/path');
 
 module.exports = {
     mode: 'development',
@@ -14,15 +13,6 @@ module.exports = {
     },
     module: {
         rules: [
-            {
-                test: /\.vue$/,
-                use: [
-                    {
-                        loader: 'vue-loader',
-                    },
-                ],
-                exclude: /node_modules/,
-            },
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
@@ -30,10 +20,7 @@ module.exports = {
                 use: [
                     'thread-loader',
                     {
-                        loader: 'babel-loader',
+                        loader: 'babel-loader'
-                        options: {
-                            //configFile: path.join(__dirname, './config/.babelrc'),
-                        },
                     },
                 ],
             },
@@ -51,28 +38,9 @@ module.exports = {
                     },
                 ],
             },
-            {
-                test: /\.svg$/,
-                exclude: /node_modules/,
-                use: [
-                    {
-                        loader: 'svg-sprite-loader',
-                    },
-                    {
-                        loader: 'svgo-loader',
-                        options: {
-                            plugins: [
-                                { convertPathData: false },
-                                { mergePaths: false },
-                            ],
-                        },
-                    },
-                ],
-            },
         ],
     },
     plugins: [
-        new VueLoaderPlugin(),
         new MiniCssExtractPlugin({
             path: path.resolve(CSS_PATH, "./"),
             filename: '[name].min.css',
@@ -83,7 +51,6 @@ module.exports = {
     resolve: {
         extensions: [
             '.js',
-            '.vue',
         ],
     },
     stats: {

build/webpack/devBuild.js

@@ -1,5 +0,0 @@
-const cliService = require('./cli/cli.js');
-
-cliService.watchCss();
-cliService.watchJs();
-cliService.watchSingleJs();

build/webpack/package.json

@@ -67,7 +67,8 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "node devBuild.js"
+    "dev": "node buildDev.js",
+    "pro": "node buildPro.js"
   },
   "keywords": [],
   "author": "",

build/webpack/pro/cli.js

@@ -0,0 +1,86 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const path = require('path');
+
+const allConfig = require('./webpackall');
+const {
+    JS_PATH,
+    CSS_PATH,
+} = require('../comm/path');
+
+const {
+    startCompilerCss,
+    startCompilerJs,
+    watchFile
+} = require('../comm/util');
+const deleteCssJs = require('../plugin/deleteCssJs'); // 用于对打包css生成的无用js和js.map进行删除的操作
+const watchNewEntry = require('../plugin/watchNewEntry'); // 用于watch时监听新增文件的监听
+
+/**
+ * 用于生产环境监听打包，打包出min版
+ * @watchJs
+ * @watchCss
+ * * */
+class Cli {
+    constructor() {
+        this.jsComplier = null; // 对应 js/dist 出口
+        this.cssComplier = null; // 对应 css/dist 出口
+    }
+
+    watchJs() {
+        this.jsComplier = webpack(merge(allConfig, {
+            entry: watchNewEntry.getEntries(
+                [
+                    path.resolve(JS_PATH, './!(*.min).js'),  
+                ],
+            ),
+            output: {
+                libraryTarget: 'umd',
+                globalObject: 'this',
+                path: path.resolve(JS_PATH, "./"),
+                filename: '[name].min.js',
+            }
+        }));
+
+        // 开始编译并且监听
+        this.jsComplier.watch({
+            aggregateTimeout: 400,
+            ignored: [
+                path.resolve(JS_PATH, "./*.min.js"),
+            ],
+        }, startCompilerJs);
+
+        process.stdout.write('开始webpack编译js目录' + '\n\n');
+    }
+   
+    watchCss() {
+        this.cssComplier = webpack(merge(allConfig, {
+            entry: watchNewEntry.getEntries(
+                [
+                    path.resolve(CSS_PATH, './!(*.min).css'),  
+                ],
+            ),
+            output: {
+                libraryTarget: 'umd',
+                globalObject: 'this',
+                path: path.resolve(CSS_PATH, "./"),
+                filename: "./cssJsDist/[name].min.js",
+            },
+            plugins: [
+                new deleteCssJs(),
+            ],
+        }));
+
+        // 开始编译监听
+        this.cssComplier.watch({
+            aggregateTimeout: 400,
+            ignored: [
+                path.resolve(CSS_PATH, "./*.min.css"),
+            ],
+        }, startCompilerCss);
+
+        process.stdout.write('开始webpack编译css目录' + '\n\n');
+    }
+}
+
+module.exports = new Cli();

build/webpack/pro/webpackall.js

@@ -0,0 +1,68 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const watchNewEntry = require('../plugin/watchNewEntry');
+const { JS_PATH, CSS_PATH } = require('../comm/path');
+
+module.exports = {
+    mode: 'production',
+    devtool: 'eval',
+    watchOptions: {
+        ignored: /node_modules/,
+        aggregateTimeout: 500,
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                include: JS_PATH,
+                use: [
+                    'thread-loader',
+                    {
+                        loader: 'babel-loader'
+                    },
+                ],
+            },
+            {
+                test: /\.css$/,
+                exclude: /node_modules/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            importLoaders: 1,
+                            url: false
+                        },
+                    },
+                ],
+            },
+        ],
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            path: path.resolve(CSS_PATH, "./"),
+            filename: '[name].min.css',
+            ignoreOrder: false,
+        }),
+        new watchNewEntry(),
+    ],
+    resolve: {
+        extensions: [
+            '.js',
+        ],
+    },
+    stats: {
+        children: false,
+    },
+    externals: {
+        jquery: 'jQuery',
+    },
+    optimization: {
+        minimize: true,
+        minimizer: [
+            new UglifyJSPlugin()
+        ]
+    },
+};

conf/cfg.json

@@ -22,7 +22,8 @@
               "whiteFile" : ["router.js"]
          },
          "res" : {
-               "/" : "res/"
+               "/" : "res/",
+               "/static" : "static/"
          }
     },
     "db" : {

res/css/comm.min.css

@@ -1,90 +0,0 @@
-
-[v-cloak]{
-    visibility: hidden !important; /*防止被覆盖*/
-}
-
-/* svg主题 */
-.svg_black{
-    width: 22px;
-    height: 22px;
-    fill: black;
-}
-.svg_white{
-    width: 22px;
-    height: 22px;
-    fill: #168ce6;
-}
-.svg_black:hover{
-    width: 22px;
-    height: 22px;
-    fill: #168ce6;
-}
-.svg_white:hover{
-    width: 22px;
-    height: 22px;
-    fill: black;
-}
-
-/* 按钮主题 */
-.btn_black{
-    width: 22px;
-    height: 22px;
-    background-color: black;
-}
-.btn_white{
-    width: 22px;
-    height: 22px;
-    background-color: #168ce6;
-}
-.btn_black:hover{
-    width: 22px;
-    height: 22px;
-    background-color: #168ce6;
-}
-.btn_white:hover{
-    width: 22px;
-    height: 22px;
-    background-color: black;
-}
-
-/* 字体主题 */
-.font_black{
-    width: 22px;
-    height: 22px;
-    color: black;
-}
-.font_white{
-    width: 22px;
-    height: 22px;
-    color: #168ce6;
-}
-.font_black:hover{
-    width: 22px;
-    height: 22px;
-    color: #168ce6;
-}
-.font_white:hover{
-    width: 22px;
-    height: 22px;
-    color: black;
-}
-
-
-/* 侧边栏主题 */
-::-webkit-scrollbar{
-    width: 4px;
-    height: 4px;
-    background-color: #F5F5F5;
-}
-::-webkit-scrollbar-track{
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-    border-radius: 10px;
-    background-color: #FFF;
-}
-::-webkit-scrollbar-thumb{
-    border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-    background-color: #AAA;
-}
-
-/*# sourceMappingURL=comm.min.css.map*/

res/css/comm.min.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///E:/code/tl-rtc-file/res/css/comm.css"],"names":[],"mappings":";AACA;AACA,kCAAkC;AAClC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,C","file":"comm.min.css","sourcesContent":["\r\n[v-cloak]{\r\n    visibility: hidden !important; /*防止被覆盖*/\r\n}\r\n\r\n/* svg主题 */\r\n.svg_black{\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: black;\r\n}\r\n.svg_white{\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: #168ce6;\r\n}\r\n.svg_black:hover{\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: #168ce6;\r\n}\r\n.svg_white:hover{\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: black;\r\n}\r\n\r\n/* 按钮主题 */\r\n.btn_black{\r\n    width: 22px;\r\n    height: 22px;\r\n    background-color: black;\r\n}\r\n.btn_white{\r\n    width: 22px;\r\n    height: 22px;\r\n    background-color: #168ce6;\r\n}\r\n.btn_black:hover{\r\n    width: 22px;\r\n    height: 22px;\r\n    background-color: #168ce6;\r\n}\r\n.btn_white:hover{\r\n    width: 22px;\r\n    height: 22px;\r\n    background-color: black;\r\n}\r\n\r\n/* 字体主题 */\r\n.font_black{\r\n    width: 22px;\r\n    height: 22px;\r\n    color: black;\r\n}\r\n.font_white{\r\n    width: 22px;\r\n    height: 22px;\r\n    color: #168ce6;\r\n}\r\n.font_black:hover{\r\n    width: 22px;\r\n    height: 22px;\r\n    color: #168ce6;\r\n}\r\n.font_white:hover{\r\n    width: 22px;\r\n    height: 22px;\r\n    color: black;\r\n}\r\n\r\n\r\n/* 侧边栏主题 */\r\n::-webkit-scrollbar{\r\n    width: 4px;\r\n    height: 4px;\r\n    background-color: #F5F5F5;\r\n}\r\n::-webkit-scrollbar-track{\r\n    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);\r\n    border-radius: 10px;\r\n    background-color: #FFF;\r\n}\r\n::-webkit-scrollbar-thumb{\r\n    border-radius: 10px;\r\n    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);\r\n    background-color: #AAA;\r\n}"],"sourceRoot":""}

res/css/index.css

@@ -112,7 +112,7 @@ body{
     height: 50%;
     width: 100%;
     background: white;
-    z-index: 99;
+    z-index: 10000;
     box-shadow: 0 0px 20px rgba(0,0,0,.4);
     transition: all 1s;
     -moz-transition: all 1s;
@@ -412,7 +412,7 @@ body{
 .noSendFile{
     width: 100%;
     height: 100%;
-    background: url(./../../image/noSendFiles.png) no-repeat center;
+    background: url(/image/noSendFiles.png) no-repeat center;
 }
 
 .logs{

res/css/index.min.css

@@ -1,435 +0,0 @@
-html {
-    box-sizing: border-box;
-    --bgColorMenu : #1d1d27;
-    --duration: .7s; 
-}
-html *,
-html *::before,
-html *::after {
-    box-sizing: inherit;
-}
-body{
-    margin: 0;
-    margin-left: 5%;
-    max-width: 90%;
-    align-items: center;
-    justify-content: center;
-    background-color: #ffb457;
-    transition: background-color var(--duration);
-    -webkit-tap-highlight-color: transparent;
-}
-.menu{
-    display: flex;
-    width: 90%;
-    font-size: .8em;
-    padding: 0 2.85em;
-    bottom: 0;
-    align-items: center;
-    justify-content: center;
-    border-radius: 10px;
-    background-color: var(--bgColorMenu);
-    position: fixed;
-    z-index: 1000;
-}
-.menu__item{
-    all: unset;
-    flex-grow: 1;
-    z-index: 80;
-    display: flex;
-    cursor: pointer;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-    padding: 0.55em 0 0.85em;
-    transition: transform var(--duration);
-}
-.menu__item::before{
-    content: "";
-    z-index: -1;
-    width: 4.2em;
-    height: 4.2em;
-    border-radius: 50%;
-    position: absolute;
-    transform: scale(0);
-    transition: background-color var(--duration), transform var(--duration);
-}
-.menu__item.active {
-    transform: translate3d(0, -.8em , 0);
-}
-.menu__item.active::before{
-    transform: scale(1);
-    background-color: var(--bgColorItem);
-}
-.icon{
-    width: 2.6em;
-    height: 2.6em;
-    stroke: white;
-    fill: transparent;
-    stroke-width: 1pt;
-    stroke-miterlimit: 10;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-dasharray: 400;
-    
-}
-.menu__item.active .icon {
-    animation: strok 1.5s reverse;
-}
-@keyframes strok {
-    100% {
-        stroke-dashoffset: 400;
-    }
-}
-.menu__border{
-    left: 0;
-    bottom: 99%;
-    width: 10.9em;
-    height: 2.4em;
-    position: absolute;
-    clip-path: url(#menu);
-    background-color: var(--bgColorMenu);
-    transition: transform var(--duration);
-}
-#fileApp .cusInput{
-    border-radius: 10px;
-    width: 70%;
-    margin-left: 15%;
-    height: 54px;
-    padding: 0 10px;
-    font-size: 16px;
-    font-family: "微软雅黑";
-    border: none;
-    color: #332828;
-    vertical-align: middle;
-    outline: none;
-    overflow: hidden;
-    background-color: #e9e9e9;
-}
-#fileApp .maskBottom{
-    position: fixed;
-    top: 50%;
-    left: 0;
-    height: 50%;
-    width: 100%;
-    background: white;
-    z-index: 99;
-    box-shadow: 0 0px 20px rgba(0,0,0,.4);
-    transition: all 1s;
-    -moz-transition: all 1s;
-    -webkit-transition: all 1s;
-    -o-transition: all 1s;
-}
-
-#fileApp .maskRight{
-    position: fixed;
-    top: 0;
-    left: 50%;
-    height: 100%;
-    width: 50%;
-    background: white;
-    z-index: 99;
-    box-shadow: 0 0px 20px rgb(0 0 0 / 40%);
-    transition: all 1s;
-    -moz-transition: all 1s;
-    -webkit-transition: all 1s;
-    -o-transition: all 1s;
-}
-
-#fileApp table tr td span{
-    word-break: break-all;
-}
-#fileApp .exitBtn{
-    position: absolute;
-    right: 20%;
-}
-#fileApp .roomClass{
-    margin-top: 5%;
-    transition :  margin-top 0.5s;
-}
-#fileApp .roomClass button{
-    -webkit-appearance: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    outline: none;
-    cursor: pointer;
-    width: 7rem;
-    height: 3rem;
-    background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);
-    border-radius: 30px;
-    border: 1px solid #8F9092;
-    box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 0 #CECFD1;
-    transition: all 0.2s ease;
-    font-family: "Source Sans Pro", sans-serif;
-    font-size: 12px;
-    font-weight: 600;
-    color: #606060;
-    text-shadow: 0 1px #fff;
-    margin-left: 20px;
-    margin-right: 20px;
-}
-#fileApp .roomClass button[disabled]{
-    border: 1px solid #e6e6e6;
-    background-color: #FBFBFB;
-    color: #C9C9C9;
-    cursor: not-allowed;
-    opacity: 1;
-}
-#fileApp .roomClass button:hover{
-    box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;
-}
-#fileApp .roomClass .center{
-    padding: 10px;
-    display: inline-flex;
-    width: 70%;
-    margin-left: 15%;
-    margin-top: 20px;
-}
-#fileApp .roomClass .mobileCenter{
-    padding: 10px;
-    display: inline-flex;
-    width: 100%;
-    margin-top: 20px;
-}
-#fileApp #self{
-    width: 70%;
-    margin-left: 15%;
-    margin-top: 40px;
-    display: grid;
-    text-align: center;
-}
-#fileApp #self span{
-    margin-bottom: 10px;
-}
-#fileApp #self input{
-    margin-bottom: 10px;
-    width: 72px;
-}
-#fileApp #self button{
-    margin-bottom: 10px;
-}
-
-
-
-.sendFileBtn {
-    margin-left: 30%;
-    color: #0d1322;
-    background-color: #3be8b0;
-    border: 0;
-    padding: 0 25px;
-    outline: none;
-    width: 40%;
-    border-radius: 25px;
-    font-size: 1.4rem;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    -ms-flex-align: center;
-    align-items: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    height: 50px;
-    line-height: 50px;
-    cursor: pointer;
-    box-shadow: 0 0px 20px rgba(0,0,0,.4);
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    transition: all .2s ease;
-}
-.sendFileBtn:hover{
-    box-shadow: 0 8px 35px rgba(0,0,0,.4);
-    transition: all .2s ease;
-    -webkit-tap-highlight-color: rgba(4,32,23,.2);
-}
-
-
-/* 480px以下 */
-@media screen and (max-width: 480px) {
-    #fileApp .exitBtn{
-        position: absolute;
-        right: 10%;
-    }
-    #fileApp .roomClass button{
-        width: 6rem;
-        height: 2.5rem;
-    }
-    #fileApp .roomClass .center{
-        width: 100%;
-        margin-top: 20px;
-        margin-left: 0;
-    }
-    .sendFilePannel{
-        /* margin-top: 15%; */
-    }
-}
-/* 500px以下 */
-@media screen and (max-width: 500px) {
-    .sendFileBtn{
-        width: 80%;
-        margin-left: 10%;
-    }
-}
-/* 480px到765px */
-@media screen and (min-width: 480px) and (max-width: 765px) {
-    /* .sendFilePannel{
-        margin-top: 10%;
-    } */
-}
-
-/* 765px以上 */
-@media screen and (min-width: 765px) {
-    .sendFilePannel{
-        /* margin-top: 25%; */
-    }
-}
-/* 765px到1000px */
-@media screen and (min-width: 765px) and (max-width: 775px) {
-    .sendFilePannel{
-        /* margin-top: 24%; */
-    }
-}
-@media screen and (min-width: 1000px) {
-    .sendFilePannel{
-        /* margin-top: 20%; */
-    }
-}
-
-.tool{
-    position: absolute;
-    right: 5px;
-    float: right;
-    top: 10px;
-}
-.tool svg{
-    width: 30px;
-    height: 30px;
-    cursor: pointer;
-}
-
-.userRoom{
-    padding-left: 15px !important;
-    width: 80%;
-    margin-left: 10% !important;
-    margin-top: 130px;
-    height: 120px;
-    display: inline-flex;
-}
-.userBlocK{
-    cursor: pointer !important;
-    margin: 0  0 15px !important;
-    display: grid !important;
-}
-
-.chooseFileName {
-    margin-top: 10px;
-    word-break: break-all;
-    margin-bottom: 10px;
-    padding: 7px 3px 7px 3px;
-    background: rgb(255, 180, 87);
-    box-shadow: 0 0px 20px rgba(0,0,0,.4);
-    border-radius: 6px;
-}
-.remoteId{
-    width: 63px;
-    margin-top: -10px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.sendFilePannel{
-    transition: all .2s ease-in-out;
-    border-radius: 5px;
-    box-shadow: 0 8px 35px rgba(0,0,0,.4);
-}
-.sendFileHeader{
-    border-bottom: 1px solid #fbe1e1;
-    padding: .3rem 1rem;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-align: baseline;
-    align-items: baseline;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    font-size: 15px;
-}
-.sendFiles{
-    margin: 5px 0;
-    max-height: 330px;
-    padding: 0 0px 10px;
-}
-.sendFile{
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-align: center;
-    align-items: center;
-    max-height: 340px;
-    padding: 5px 5px 4px;
-    overflow-x: hidden;
-    margin: 5px 11px;
-}
-.sendFileType{
-    margin-right: 1rem;
-    color: #636979;
-}
-.sendFileInfo{
-    text-align: left;
-    -ms-flex: 1;
-    flex: 1;
-    width: 60%;
-    margin-right: 1rem;
-}
-.sendFileName{
-    font-weight: 500;
-    font-size: 15px;
-    margin-bottom: 5px;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-    white-space: nowrap;
-    width: 100%;
-}
-.sendFileOther{
-    margin: 0;
-    font-weight: 500;
-    color: #636979;
-    font-size: 12px;
-}
-.sendInfoBackgroud{
-    display: none;
-    background: #ff00002e;
-    width: 116px;
-    height: 40px;
-    position: absolute;
-    padding: 25px;
-    border-radius: 3px;
-    margin-left: -20px;
-}
-.noSendFile{
-    width: 100%;
-    height: 100%;
-    background: url(./../../image/noSendFiles.png) no-repeat center;
-}
-
-.logs{
-    text-align: center;
-    border-bottom: 1px solid #f6f6f6;
-    word-break: break-all;
-}
-
-.infoMsg{
-    width: 70%;
-    margin-left: 15%;
-    text-align: center;
-    font-size: 0.1rem;
-}
-
-.layui-table td, .layui-table th{
-    font-size: 12px !important;
-}
-
-/*# sourceMappingURL=index.min.css.map*/

res/index.html

@@ -4,18 +4,19 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>tlp2p</title>
+    <title>tl-rtc-file</title>
 
     <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
-    <link rel="stylesheet" href="css/index.min.css" media="all">
+    <link rel="stylesheet" href="/css/index.min.css" media="all">
-    <link rel="stylesheet" href="css/comm.min.css" media="all">
+    <link rel="stylesheet" href="/css/comm.min.css" media="all">
-    <link rel="stylesheet" href="css/swiper-bundle.min.css" media="all">
+    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css" media="all">
-    <script type="text/javascript" src="js/swiper-bundle.min.js"></script>
+    <script type="text/javascript" src="/static/js/swiper-bundle.min.js"></script>
-    <script type="text/javascript" src="js/socket.io.js"></script>
+    <script type="text/javascript" src="/static/js/socket.io.js"></script>
-    <script type="text/javascript" src="js/vue.min.js"></script>
+    <script type="text/javascript" src="/static/js/vue.min.js"></script>
-    <script type="text/javascript" src="js/axios.js"></script>
+    <script type="text/javascript" src="/static/js/axios.js"></script>
     <script>
         window.Bus = new Vue({});
+        window.prefix = "";
     </script>
 </head>
 <body>
@@ -87,14 +88,14 @@
             <div class="noSendFile" v-show="!sendFileList || sendFileList.length === 0"></div>
         </div>
 
-        <div class="maskBottom" @click="clickSendFile"  :style="{top: numSendFile + '%'}">
+        <div class="maskBottom" @click="clickSendFile"  :style="{top: numSendFile + '%'}" >
             <div class="layui-col-sm2" style="width: 100%;">
                 <div class="layui-card">
                     <div class="layui-card-header">发送的文件</div>
                     <div class="layui-card-body" style="overflow-y: scroll;height: 330px;">
                         <table class="layui-table">
                             <thead>
-                                <tr><th>用户名ID</th><th>名称</th><th>格式</th><th>大小</th></tr> 
+                                <tr><th>用户名ID</th><th>名称</th><th>格式</th><th>大小</th><th>发送进度</th></tr> 
                             </thead>
                             <tbody ref="files">
                                 <tr v-for="file in sendFileList">
@@ -102,6 +103,7 @@
                                     <td><span>{{file.name}}</span></td>
                                     <td><span>{{file.type}}</span></td>
                                     <td><span>{{getFileSizeStr(file.size)}}</span></td>
+                                    <td><span>{{file.process}}%</span></td>
                                 </tr>
                                 <div style="display: flex;padding:5px;">
                                     <span style="word-break: keep-all;font-size: 12px;">进度：</span>
@@ -121,12 +123,20 @@
                     <div class="layui-card-body" style="overflow-y: scroll;height: 330px;">
                         <table class="layui-table">
                             <thead>
-                                <tr><th>用户名ID</th><th>文件名称</th><th>文件格式</th><th>文件大小</th></tr> 
+                                <tr><th>用户名ID</th><th>文件名称</th><th>文件格式</th><th>文件大小</th><th>接收进度</th></tr> 
                             </thead>
                             <tbody ref="files">
+                                <tr v-for="file in receiveFileList">
+                                    <td><span>{{file.id}}</span></td>
+                                    <td v-if="file.href === ''"><span :style="file.style">{{file.name}}</span></td>
+                                    <td v-else><a :href="file.href" :download="file.name" :style="file.style">{{file.name}}</a></td>
+                                    <td><span>{{file.type}}</span></td>
+                                    <td><span>{{getFileSizeStr(file.size)}}</span></td>
+                                    <td><span>{{file.process}}%</span></td>
+                                </tr>
                                 <div style="display: flex;padding:5px;">
                                     <span style="word-break: keep-all;font-size: 12px;">进度：</span>
-                                    <progress ref="receiveProgress" :value="offset" max="0" style="width: 100%;margin: auto;"></progress>
+                                    <progress ref="receiveProgress" :value="currentReceiveSize" max="0" style="width: 100%;margin: auto;"></progress>
                                 </div>
                             </tbody>
                         </table>
@@ -150,10 +160,6 @@
             </div>
         </div>
 
-        <!-- <div id="canvasPannel">
-            <iframe frameborder="0" scrolling="no" src="./room.html" width="100%" height="200px"></iframe>
-        </div> -->
-
         <div class="userRoom swiper-container">
             <div class="swiper-wrapper">
                 <div class="swiper-slide userBlocK" v-for="remote in remoteMap">
@@ -212,7 +218,7 @@
     </div>
 
 
-    <script type="text/javascript" src="js/index.min.js"></script>
+    <script type="text/javascript" src="/js/index.min.js"></script>
     <script src="https://www.layuicdn.com/layui/layui.js"></script>
     <script>
         setTimeout(()=>{
@@ -233,7 +239,11 @@
             window.swiper = mySwiper;
         },1000)
         
-        layui.config({}).extend({}).use(['form','layer'],function(){
+        layui.config({
+            // base: '/lay/dist/layuiadmin/' //静态资源所在路径
+        }).extend({
+            // index: 'lib/index' //主入口模块
+        }).use(['form','layer'],function(){
             layer.open({
                 type: 1
                 ,title: false

res/js/index.js

@@ -1,6 +1,6 @@
 // file.js
 var file = null;
-axios.get("/api/comm/initData",{}).then((initData)=>{
+axios.get(window.prefix + "/api/comm/initData",{}).then((initData)=>{
     let resData = initData.data;
     file = new Vue({
         el : '#fileApp',
@@ -20,7 +20,6 @@ axios.get("/api/comm/initData",{}).then((initData)=>{
                 numSendFile: 150,
                 numReceiveFile : 150,
                 numLogs : 150,
-                tool_bg : false,
                 currentMenu : 1,
                 logsHeight : 0,
                 
@@ -31,14 +30,15 @@ axios.get("/api/comm/initData",{}).then((initData)=>{
                 rtcConns : {}, //远程连接
                 remoteMap : {}, //远程连接map
     
-                chunkSize : 256 * 1024, //一块512字节
+                chunkSize : 256 * 1024, //一块256kb
                 offset : 0, //当前文件分片位移
                 fileName : null, //文件名称
                 allSended : false,//当前文件是否全部发送给房间内所有用户
-                allReceiveSize : 0, //统计收到文件的大小
+                currentReceiveSize : 0, //统计收到文件的大小
                 currentSendingId : "", //当前正在发送的文件
                 chooseFile : null,  //选择的文件
-                sendFileList : [],
+                sendFileList : [], //发过文件的列表
+                receiveFileList : [], //接收文件的列表
                 logs : [],  //记录日志
             }
         },
@@ -91,22 +91,34 @@ axios.get("/api/comm/initData",{}).then((initData)=>{
                     if(idList.length > 0){
                         toIdStr += "发送给房间的 "+idList[0]+" ...等"+idList.length+"人";
                     }
-                    let fileData = {
+                    for(let id in this.remoteMap){
-                        name : this.chooseFile.name,
+                        this.sendFileList.push({
-                        size : this.chooseFile.size,
+                            id : id,
-                        type : this.chooseFile.type,
+                            name : this.chooseFile.name,
-                        toIdStr : toIdStr,
+                            size : this.chooseFile.size,
+                            type : this.chooseFile.type,
+                            process : 0,
+                            done : false,
+                            toIdStr : toIdStr,
+                        });
                     }
-                    this.sendFileList.push(fileData);
                 }
             },
-            allReceiveSize : function(newV,oldV){
+            currentReceiveSize : function(newV,oldV){
-                this.allReceiveSize = newV;
+                this.currentReceiveSize = newV;
             },
             remoteMap : {
-                handler : function(newV,oldV){
+                handler : function(newV,oldV){},
-                    
+                deep : true,
-                },
+                immediate : true
+            },
+            receiveFileList : {
+                handler : function (newV, oldV) {},
+                deep : true,
+                immediate : true
+            },
+            sendFileList : {
+                handler : function (newV, oldV) {},
                 deep : true,
                 immediate : true
             }
@@ -210,35 +222,6 @@ axios.get("/api/comm/initData",{}).then((initData)=>{
                     this.clickReceiveFile()
                 }
             },
-            //生成下载标签
-            genDownUrlTableDom : function(id, domA, fileType, fileSize){
-                let tr = document.createElement("tr");
-                let thDom_id = document.createElement("td");
-                let span_id = document.createElement("span");
-                span_id.innerText = id;
-                thDom_id.appendChild(span_id);
-    
-                let thDom_fileName = document.createElement("td");
-                let span_fileName = document.createElement("span");
-                span_fileName.appendChild(domA);
-                thDom_fileName.appendChild(span_fileName);
-    
-                let thDom_fileType = document.createElement("td");
-                let span_fileType = document.createElement("span");
-                span_fileType.innerText = fileType;
-                thDom_fileType.appendChild(span_fileType);
-    
-                let thDom_fileSize = document.createElement("td");
-                let span_fileSize = document.createElement("span");
-                span_fileSize.innerText = this.getFileSizeStr(fileSize);
-                thDom_fileSize.appendChild(span_fileSize);
-    
-                tr.appendChild(thDom_id);
-                tr.appendChild(thDom_fileName);
-                tr.appendChild(thDom_fileType);
-                tr.appendChild(thDom_fileSize);
-                this.$refs['files'].appendChild(tr);
-            },
             //文件大小
             getFileSizeStr : function (size){
                 let sizeStr = (size/1048576).toString();
@@ -249,14 +232,6 @@ axios.get("/api/comm/initData",{}).then((initData)=>{
                 }
                 return head + '.' + tail + "M";
             },
-            //文件进度
-            getFileSizePercent : function (offset, size){
-                if(size === 0) return 0;
-                let percent = (offset / size) * 100;
-                let percentStr = percent.toString();
-                let head = percentStr.split(".")[0];
-                return head;
-            },
             //点击下载文件
             clickReceiveFile : function(){
                 this.showReceiveFile = !this.showReceiveFile;
@@ -284,14 +259,6 @@ axios.get("/api/comm/initData",{}).then((initData)=>{
                     this.numLogs = 150;
                 }
             },
-            //点击更换背景色
-            clickToolBg : function(){
-                this.tool_bg = !this.tool_bg;
-            },
-            //点击切换tab
-            changeMenu : function(index){
-                this.menu = index;
-            },
             //创建房间
             createRoom : function () {
                 if(this.fileName != null){
@@ -323,33 +290,8 @@ axios.get("/api/comm/initData",{}).then((initData)=>{
                     rtcConnect.close();
                     rtcConnect = null;
                 }
-                this.resetData();
-            },
-            //推出后重置数据
-            resetData : function(){
-                this.isJoined = false;
-                this.showReceiveFile = false;
-                this.showSendFile = false;
-                this.numSendFile= 150;
-                this.numReceiveFile = 150;
-                this.tool_bg = false;
-                this.currentMenu = 1;
 
-                this.nickName = "";
+                window.location.reload();
-                this.socketId = 0; //本人的id
-                this.roomId = "10086"; //房间号
-                this.fileReader = null;
-                this.rtcConns = {}; //远程连接
-                this.remoteMap = {}; //远程连接map
-    
-                this.chunkSize = 16 * 1024; //一块16kb字节
-                this.offset = 0;
-                this.fileName = null;
-                this.allSended = false;//当前文件是否全部发送给房间内所有用户
-                this.allReceiveSize = 0;
-                this.currentSendingId = ""; //当前正在发送的文件
-                this.chooseFile = null;  //选择的文件
-                this.sendFileList = [];
             },
             //获取rtc缓存连接
             getRtcConnect : function(id){
@@ -512,12 +454,24 @@ axios.get("/api/comm/initData",{}).then((initData)=>{
     
                         sendChannel.send(event.target.result);
                         this.offset += event.target.result.byteLength;
+                        let currentSendFile = this.offset;
                         
-                        //接受完一份重置相关数据 并且开启下一个
+                        //更新发送进度
+                        this.updateSendProcess(needSendingId, {
+                            process : parseInt((currentSendFile/this.chooseFile.size)*100)
+                        })
+    
+                        //发送完一份重置相关数据 并且开启下一个
                         if(this.offset === this.chooseFile.size){
                             console.log(needSendingId+"发送完毕");
                             this.addPopup("正在发送给"+needSendingId.substr(0,4)+",100%。");
                             this.logs.push("正在发送给"+needSendingId.substr(0,4)+",100%。")
+
+                            //更新发送进度
+                            this.updateSendProcess(needSendingId, {
+                                done : true
+                            })
+
                             this.offset = 0;
                             this.setRemoteInfo(needSendingId,{status : 2})
                             this.submitChooseFile();
@@ -587,26 +541,31 @@ axios.get("/api/comm/initData",{}).then((initData)=>{
                 this.$refs['receiveProgress'].value = receivedSize;
     
                 this.setRemoteInfo(id,{receiveBuffer : receiveBuffer,receivedSize : receivedSize})
-                this.allReceiveSize += event.data.byteLength;
+                this.currentReceiveSize += event.data.byteLength;
     
                 //收到分片后反馈ack
-                this.receivedAck(id,receivedSize);
+                this.receivedAck(id, receivedSize);
+
+                //更新接收进度
+                this.updateReceiveProcess(id, {
+                    process : parseInt((receivedSize/size)*100)
+                });
     
                 if(receivedSize === size){
                     console.log("接收完毕");
                     this.logs.push("接收完毕...");
                     this.$refs['receiveProgress'].value = 0;
                     this.addPopup("文件[ "+name+" ]接收完毕，可点击右下角查看。");
-                    const received = new Blob(receiveBuffer);
+                    
-                    //下载标签
+                    //更新接收进度
-                    let a = document.createElement("a");
+                    this.updateReceiveProcess(id, {
-                    a.href = URL.createObjectURL(received,{type: type});
+                        style : 'color: #ff5722;text-decoration: underline;',
-                    a.download = name;
+                        href : URL.createObjectURL(new Blob(receiveBuffer),{type: type}),
-                    a.innerHTML = name;
+                        done : true
-                    a.style="color: #ff5722;text-decoration: underline;";
+                    });
-                    this.genDownUrlTableDom(id, a, type, size);
                     //清除接收的数据缓存
                     this.setRemoteInfo(id,{receiveBuffer : [], receivedSize : 0})
+                    this.currentReceiveSize = 0;
                 }
             },
             //关闭连接
@@ -623,14 +582,32 @@ axios.get("/api/comm/initData",{}).then((initData)=>{
                 }
             },
             //设置rtc缓存远程连接数据
-            setRemoteInfo(id,data){
+            setRemoteInfo(id, data){
                 if(!id || !data){
                     return;
                 }
                 let oldData = this.remoteMap[id];
                 if(oldData){
                     Object.assign(oldData,data);
-                    Vue.set(this.remoteMap,id,oldData);
+                    Vue.set(this.remoteMap, id, oldData);
+                }
+            },
+            //更新接收进度
+            updateReceiveProcess : function (id, data) {
+                for(let i = 0; i < this.receiveFileList.length; i++){
+                    let item = this.receiveFileList[i];
+                    if(item.id === id && !item.done){
+                        Object.assign(this.receiveFileList[i], data);
+                    }
+                }
+            },
+            //更新发送进度
+            updateSendProcess : function (id, data) {
+                for(let i = 0; i < this.sendFileList.length; i++){
+                    let item = this.sendFileList[i];
+                    if(item.id === id && !item.done){
+                        Object.assign(this.sendFileList[i], data);
+                    }
                 }
             },
             //获取rtc缓存远程连接数据
@@ -766,12 +743,21 @@ axios.get("/api/comm/initData",{}).then((initData)=>{
     
                 //选中文件时发送给接收方
                 this.socket.on('sendFileInfo', function (data) {
-                    console.log('sendFileInfo ',data)
                     let fromId = data.from;
                     that.setRemoteInfo(fromId,{receiveFiles : data});
                     that.addPopup(data.from+"选择了文件 [ "+data.name+" ]，即将发送。");
                     that.logs.push(data.from+"选择了文件 [ "+data.name+" ]，即将发送。");
                     that.$refs['receiveProgress'].max = data.size;
+
+                    that.receiveFileList.push({
+                        id : fromId,
+                        href : "",
+                        name : data.name,
+                        type : data.type,
+                        size : data.size,
+                        process : 0,
+                        done : false
+                    })
                 });
     
                 //收到文件回传ack，继续分片回传
@@ -822,7 +808,9 @@ axios.get("/api/comm/initData",{}).then((initData)=>{
             reCaculateSwiperSize : function () {
                 let clientWidth = document.body.clientWidth;
                 let slidesPerView = parseInt((clientWidth / 100))-1;
-                window.swiper.params.slidesPerView = slidesPerView;
+                if(window.swiper){
+                    window.swiper.params.slidesPerView = slidesPerView;
+                }
             },
             touchResize : function() {
                 let that = this;
@@ -835,9 +823,9 @@ axios.get("/api/comm/initData",{}).then((initData)=>{
         },
         created : function () {
             let that = this;
-            if(window.location.search && window.location.search.includes("debug")){
+            if(window.location.hash && window.location.hash.includes("debug")){
-                this.loadJS('js/vconsole.min.js',function(){
+                this.loadJS('/static/js/vconsole.min.js',function(){
-                    that.loadJS('js/vconsole.js',function(){
+                    that.loadJS('/static/js/vconsole.js',function(){
                         console.log("load vconsole success")
                     });
                 });

res/vertical.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>vertical</title>
-    <script type="text/javascript" src="js/vue.min.js"></script>
+    <script type="text/javascript" src="/static/js/vue.min.js"></script>
 </head>
     <style>
         .vertical{
@@ -22,7 +22,7 @@
     <div class="vertical" v-cloak></div>
 
 
-    <script src="js/scroxt.min.js"></script>
+    <script src="/static/js/scroxt.min.js"></script>
     <script>
         let verticalVue = new Vue({
             el : ".vertical",

static/js/vconsole.js

@@ -0,0 +1 @@
+var vConsole = new VConsole();