From b428166101522bf61b13fa5e16d22af3eead53da Mon Sep 17 00:00:00 2001 From: DAIXiao Date: Tue, 10 Apr 2018 12:32:04 +0800 Subject: [PATCH] Fix websocket bugs(To be exactly, one is caused by mistakenly calling ffmpeg so it emit "end" event twice) and add thumbnail over the player in my_video.html --- app.js | 81 +++++------- package-lock.json | 276 ++++++++++++++++++++++++++++++++++++++- package.json | 2 +- static/js/upload_file.js | 25 ++-- views/head.html | 9 -- views/header.ejs | 4 +- views/my_video.html | 2 +- views/upload_file.html | 60 +-------- 8 files changed, 327 insertions(+), 132 deletions(-) delete mode 100644 views/head.html diff --git a/app.js b/app.js index b35466a..3235a37 100644 --- a/app.js +++ b/app.js @@ -14,8 +14,8 @@ var app = express(); var mysql = require('mysql'); var bodyParser = require("body-parser"); var connection = mysql.createConnection({ - host: '192.168.1.119', - // host : 'localhost', + // host: '192.168.1.119', + host : 'localhost', user: 'comp5322', password: 'comp5322project', database: 'comp5322' @@ -35,8 +35,8 @@ const events = require('events') const template = require('art-template') const formidable = require('formidable') -const WebSocket = require('ws') -const ffmpeg = require('fluent-ffmpeg') +const socket_io = require('socket.io') +const fluent_ffmpeg = require('fluent-ffmpeg') function display_upload_file_html(request, response) { return new Promise((resolve, reject) => { @@ -135,32 +135,32 @@ function insert_vid(uploaded_file, request, response) { } global.insert_vid = insert_vid; -function websocket_desperation(){ - let ws = new WebSocket.Server({ - server: server, - path: '/test_api' - }) +function ffmpeg_thumbnail(uploaded_file){ - ws.on('connection', (socket) => { - eventEmit.on('segmentation_process', percentage => { - socket.send(percentage) - }) - }) - -// for debug - ws.on('error',error=>{ - console.log('ws error: ',error) + let file_path = uploaded_file.path + let filename = path.parse(file_path).name + let ffmpeg_instance = fluent_ffmpeg(file_path) + return new Promise((resolve, reject) => { + ffmpeg_instance + .thumbnail({ + timestamps: ['50%'], + filename: filename + '.png', + folder: 'static/video/', + size: '320x240' + }) + .on('error', (err, stdout, stderr) => { + reject(err) + }) + .on('end', () => { + resolve() + }) }) } - -function call_ffmpeg(uploaded_file) { +function ffmpeg_segmentation(uploaded_file) { let file_path = uploaded_file.path - - var basename = path.basename(file_path); - var filename = basename.split('.')[0]; - var ext = basename.split('.')[1]; - let ffmpeg_instance = ffmpeg(file_path) + let filename = path.parse(file_path).name + let ffmpeg_instance = fluent_ffmpeg(file_path) return new Promise((resolve, reject) => { ffmpeg_instance.addOptions([ '-profile:v baseline', // baseline profile (level 3.0) for H264 video codec @@ -170,12 +170,6 @@ function call_ffmpeg(uploaded_file) { '-hls_list_size 0', // Maxmimum number of playlist entries (0 means all entries/infinite) '-f hls' // HLS format ]) - .thumbnail({ - timestamps: ['50%'], - filename: filename + '.png', - folder: 'static/video/', - size: '320x240' - }) .output('static/video/' + filename + '.m3u8') .on('progress', progress => { eventEmit.emit('segmentation_process', progress.percent) @@ -187,16 +181,10 @@ function call_ffmpeg(uploaded_file) { eventEmit.emit('segmentation_process', 100) resolve() }) - .run(); - // ffmepg_instance.thumbnail({ - // timestamps: ['50%'], - // filename: filename + '.png', - // folder: 'static/video/', - // size: '320x240' - // }).run(); + .run() }) } -global.call_ffmpeg = call_ffmpeg; +global.ffmpeg_segmentation = ffmpeg_segmentation; //Integrate with Shawn's code end // all environments @@ -231,20 +219,23 @@ app.get('/videos/:videoId', user.myvideo); //to render my_video.html app.get('/static/*', display_static_resoures); //static resources app.post('/upload', async function(request, response) { try{ - websocket_desperation() let uploaded_file = await upload_process(request, response) await insert_vid(uploaded_file, request, response) - await call_ffmpeg(uploaded_file); + await ffmpeg_thumbnail(uploaded_file) + await ffmpeg_segmentation(uploaded_file) }catch(err){ - console.error('upload出現例外了。請看例外詳情： ',err) + console.error('Upload function point occurs an exception：',err) } }); //Middleware -// Second Integration Part of Shawn's code ( due to websocket ) -// Main part has been moved to websocket_desperation let eventEmit = new events.EventEmitter() - let server = http.createServer(app) +let io = socket_io.listen(server) +io.sockets.on('connection', function (socket) { + eventEmit.on('segmentation_process',(data)=>{ + socket.emit('push_from_server', data) + }) +}) // process.stdin.resume();//so the program will not close instantly diff --git a/package-lock.json b/package-lock.json index 6d63210..9e6c7b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,11 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.3.tgz", "integrity": "sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ==" }, + "after": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz", + "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=" + }, "ansi-align": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz", @@ -78,6 +83,11 @@ "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=" }, + "arraybuffer.slice": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz", + "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==" + }, "art-template": { "version": "4.12.2", "resolved": "https://registry.npmjs.org/art-template/-/art-template-4.12.2.tgz", @@ -122,6 +132,11 @@ "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.0.tgz", "integrity": "sha512-SuiKH8vbsOyCALjA/+EINmt/Kdl+TQPrtFgW7XZZcwtryFu9e5kQoX3bjCW6mIvGH1fbeAZZuvwGR5IlBRznGw==" }, + "backo2": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", + "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=" + }, "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", @@ -151,6 +166,24 @@ } } }, + "base64-arraybuffer": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz", + "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg=" + }, + "base64id": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/base64id/-/base64id-1.0.0.tgz", + "integrity": "sha1-R2iMuZu2gE8OBtPnY7HDLlfY5rY=" + }, + "better-assert": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/better-assert/-/better-assert-1.0.2.tgz", + "integrity": "sha1-QIZrnhueC1W0gYlDEeaPr/rrxSI=", + "requires": { + "callsite": "1.0.0" + } + }, "bignumber.js": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-4.0.4.tgz", @@ -161,6 +194,11 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.11.0.tgz", "integrity": "sha1-RqoXUftqL5PuXmibsQh9SxTGwgU=" }, + "blob": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.4.tgz", + "integrity": "sha1-vPEwUspURj8w+fx+lbmkdjCpSSE=" + }, "body-parser": { "version": "1.18.2", "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.2.tgz", @@ -259,6 +297,11 @@ "unset-value": "1.0.0" } }, + "callsite": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz", + "integrity": "sha1-KAOY5dZkvXQDi28JBRU+borxvCA=" + }, "camel-case": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz", @@ -424,11 +467,21 @@ "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz", "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==" }, + "component-bind": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz", + "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=" + }, "component-emitter": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" }, + "component-inherit": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz", + "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=" + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -585,6 +638,69 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, + "engine.io": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-3.2.0.tgz", + "integrity": "sha512-mRbgmAtQ4GAlKwuPnnAvXXwdPhEx+jkc0OBCLrXuD/CRvwNK3AxRSnqK4FSqmAMRRHryVJP8TopOvmEaA64fKw==", + "requires": { + "accepts": "1.3.5", + "base64id": "1.0.0", + "cookie": "0.3.1", + "debug": "3.1.0", + "engine.io-parser": "2.1.2", + "ws": "3.3.3" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + } + } + }, + "engine.io-client": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.2.1.tgz", + "integrity": "sha512-y5AbkytWeM4jQr7m/koQLc5AxpRKC1hEVUb/s1FUAWEJq5AzJJ4NLvzuKPuxtDi5Mq755WuDvZ6Iv2rXj4PTzw==", + "requires": { + "component-emitter": "1.2.1", + "component-inherit": "0.0.3", + "debug": "3.1.0", + "engine.io-parser": "2.1.2", + "has-cors": "1.1.0", + "indexof": "0.0.1", + "parseqs": "0.0.5", + "parseuri": "0.0.5", + "ws": "3.3.3", + "xmlhttprequest-ssl": "1.5.5", + "yeast": "0.1.2" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + } + } + }, + "engine.io-parser": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.1.2.tgz", + "integrity": "sha512-dInLFzr80RijZ1rGpx1+56/uFoH7/7InhH3kZt+Ms6hT8tNx3NGW/WNSA/f8As1WkOfkuyb3tnRyuXGxusclMw==", + "requires": { + "after": "0.8.2", + "arraybuffer.slice": "0.0.7", + "base64-arraybuffer": "0.1.5", + "blob": "0.0.4", + "has-binary2": "1.0.2" + } + }, "escape-html": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", @@ -1814,6 +1930,26 @@ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=" }, + "has-binary2": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-binary2/-/has-binary2-1.0.2.tgz", + "integrity": "sha1-6D26SfC5vk0CbSc2U1DZ8D9Uvpg=", + "requires": { + "isarray": "2.0.1" + }, + "dependencies": { + "isarray": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz", + "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=" + } + } + }, + "has-cors": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz", + "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=" + }, "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -1899,6 +2035,11 @@ "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=" }, + "indexof": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz", + "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=" + }, "inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -6246,6 +6387,11 @@ "path-key": "2.0.1" } }, + "object-component": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/object-component/-/object-component-0.0.3.tgz", + "integrity": "sha1-8MaapQ78lbhmwYb0AKM3acsvEpE=" + }, "object-copy": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz", @@ -6381,6 +6527,22 @@ "no-case": "2.3.2" } }, + "parseqs": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz", + "integrity": "sha1-1SCKNzjkZ2bikbouoXNoSSGouJ0=", + "requires": { + "better-assert": "1.0.2" + } + }, + "parseuri": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.5.tgz", + "integrity": "sha1-gCBKUNTbt3m/3G6+J3jZDkvOMgo=", + "requires": { + "better-assert": "1.0.2" + } + }, "parseurl": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz", @@ -6868,6 +7030,90 @@ } } }, + "socket.io": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-2.1.0.tgz", + "integrity": "sha512-KS+3CNWWNtLbVN5j0/B+1hjxRzey+oTK6ejpAOoxMZis6aXeB8cUtfuvjHl97tuZx+t/qD/VyqFMjuzu2Js6uQ==", + "requires": { + "debug": "3.1.0", + "engine.io": "3.2.0", + "has-binary2": "1.0.2", + "socket.io-adapter": "1.1.1", + "socket.io-client": "2.1.0", + "socket.io-parser": "3.2.0" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + } + } + }, + "socket.io-adapter": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz", + "integrity": "sha1-KoBeihTWNyEk3ZFZrUUC+MsH8Gs=" + }, + "socket.io-client": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.1.0.tgz", + "integrity": "sha512-TvKPpL0cBON5LduQfR8Rxrr+ktj70bLXGvqHCL3er5avBXruB3gpnbaud5ikFYVfANH1gCABAvo0qN8Axpg2ew==", + "requires": { + "backo2": "1.0.2", + "base64-arraybuffer": "0.1.5", + "component-bind": "1.0.0", + "component-emitter": "1.2.1", + "debug": "3.1.0", + "engine.io-client": "3.2.1", + "has-binary2": "1.0.2", + "has-cors": "1.1.0", + "indexof": "0.0.1", + "object-component": "0.0.3", + "parseqs": "0.0.5", + "parseuri": "0.0.5", + "socket.io-parser": "3.2.0", + "to-array": "0.1.4" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + } + } + }, + "socket.io-parser": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.2.0.tgz", + "integrity": "sha512-FYiBx7rc/KORMJlgsXysflWx/RIvtqZbyGLlHZvjfmPTPeuD/I8MaW7cfFrj5tRltICJdgwflhfZ3NVVbVLFQA==", + "requires": { + "component-emitter": "1.2.1", + "debug": "3.1.0", + "isarray": "2.0.1" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "isarray": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz", + "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=" + } + } + }, "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", @@ -7055,6 +7301,11 @@ "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz", "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=" }, + "to-array": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz", + "integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA=" + }, "to-object-path": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz", @@ -7142,6 +7393,11 @@ "random-bytes": "1.0.0" } }, + "ultron": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz", + "integrity": "sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==" + }, "undefsafe": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.2.tgz", @@ -7336,11 +7592,13 @@ } }, "ws": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-5.1.0.tgz", - "integrity": "sha512-7KU/qkUXtJW9aa5WRKlo0puE1ejEoAgDb0D/Pt+lWpTkKF7Kp+MqFOtwNFwnuiYeeDpFjp0qyMniE84OjKIEqQ==", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz", + "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==", "requires": { - "async-limiter": "1.0.0" + "async-limiter": "1.0.0", + "safe-buffer": "5.1.1", + "ultron": "1.1.1" } }, "xdg-basedir": { @@ -7353,10 +7611,20 @@ "resolved": "https://registry.npmjs.org/xml-char-classes/-/xml-char-classes-1.0.0.tgz", "integrity": "sha1-ZGV4SKIP/F31g6Qq2KJ3tFErvE0=" }, + "xmlhttprequest-ssl": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz", + "integrity": "sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=" + }, "yallist": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=" + }, + "yeast": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz", + "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=" } } } diff --git a/package.json b/package.json index 7e29fe9..bc271e4 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,6 @@ "npm": "^5.8.0", "req-flash": "0.0.3", "rimraf": "^2.6.2", - "ws": "^5.1.0" + "socket.io": "^2.1.0" } } diff --git a/static/js/upload_file.js b/static/js/upload_file.js index 5d0a99e..01c80e2 100644 --- a/static/js/upload_file.js +++ b/static/js/upload_file.js @@ -2,26 +2,19 @@ function segmentation_modal(){ $('#uploaded_modal').modal({ backdrop:'static' }) - let ws = new WebSocket('ws://localhost:8081/test_api') - ws.onmessage = function(e){ - let progress_percentage = parseInt(e.data,10) - if(isNaN(progress_percentage) === false){ - $('#segmentation_progress').width(`${progress_percentage}%`) - - if(progress_percentage === 100) - { + let websocket = io.connect() + let $segmentation_progress = $('#segmentation_progress') + websocket.on('push_from_server',data=>{ + if($.isNumeric(data)){ + let progress_percentage = Math.round(data) + $segmentation_progress.width(`${progress_percentage}%`) + if(progress_percentage === 100){ $("#my_video_link").removeClass('d-none') } }else{ - alert('The data from server is wrong, its value:',progress_percentage) + alert('The data from server is wrong, the data value is: ',data) } - } -// only for debug - ws.onclose = function(event){ - console.log('Was clean?',event.wasClean) - console.log('Code=',event.code) - console.log('Reason=',event.reason) - } + }) } let uploader = new plupload.Uploader({ url : '/upload', diff --git a/views/head.html b/views/head.html deleted file mode 100644 index 1b1e03c..0000000 --- a/views/head.html +++ /dev/null @@ -1,9 +0,0 @@ - - -{{title}} - - - - - - \ No newline at end of file diff --git a/views/header.ejs b/views/header.ejs index e3111b7..bceb064 100644 --- a/views/header.ejs +++ b/views/header.ejs @@ -1,3 +1,4 @@ + @@ -15,4 +16,5 @@ - + + \ No newline at end of file diff --git a/views/my_video.html b/views/my_video.html index cc83356..175c1f4 100644 --- a/views/my_video.html +++ b/views/my_video.html @@ -16,7 +16,7 @@ -