From 43591bd26961790e2e53b8472a505f8b432b6516 Mon Sep 17 00:00:00 2001 From: saber-nyan Date: Fri, 10 May 2019 18:56:45 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B5=D0=B0=D0=BB=D0=B8=D0=B7=D0=BE?= =?UTF-8?q?=D0=B2=D0=B0=D0=BB=20=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B1=D0=B5=D0=B7=20=D0=BF=D0=B5=D1=80?= =?UTF-8?q?=D0=B5=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=BA=D0=B8=20=D1=81?= =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B=20=D1=81=20WS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 25 ++++++------------------- package.json | 1 + src/components/Content.vue | 2 +- src/components/Sidebar.vue | 6 +++++- src/views/Home.vue | 30 +++++++++++++++++++++++++++++- 5 files changed, 42 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2b0206f..c6ffb90 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4416,7 +4416,6 @@ "version": "1.0.7", "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.0.7.tgz", "integrity": "sha512-4Ln17+vVT0k8aWq+t/bF5arcS3EpT9gYtW66EPacdj/mAFevznsnyoHLPy2BA8gbIQeIHoPsvwmfBftfcG//BQ==", - "dev": true, "requires": { "original": "^1.0.0" } @@ -5963,8 +5962,7 @@ "http-parser-js": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.0.tgz", - "integrity": "sha512-cZdEF7r4gfRIq7ezX9J0T+kQmJNOub71dWbgAXVHDct80TKP4MCETtZQ31xyv38UwgzkWPYF/Xc0ge55dW9Z9w==", - "dev": true + "integrity": "sha512-cZdEF7r4gfRIq7ezX9J0T+kQmJNOub71dWbgAXVHDct80TKP4MCETtZQ31xyv38UwgzkWPYF/Xc0ge55dW9Z9w==" }, "http-proxy": { "version": "1.17.0", @@ -6161,8 +6159,7 @@ "inherits": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "inquirer": { "version": "3.3.0", @@ -6667,8 +6664,7 @@ "json3": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz", - "integrity": "sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE=", - "dev": true + "integrity": "sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE=" }, "json5": { "version": "2.1.0", @@ -7643,7 +7639,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz", "integrity": "sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==", - "dev": true, "requires": { "url-parse": "^1.4.3" } @@ -8782,8 +8777,7 @@ "querystringify": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.1.tgz", - "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==", - "dev": true + "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==" }, "randombytes": { "version": "2.1.0", @@ -9117,8 +9111,7 @@ "requires-port": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", - "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", - "dev": true + "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" }, "reselect": { "version": "3.0.1", @@ -9665,7 +9658,6 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.3.0.tgz", "integrity": "sha512-R9jxEzhnnrdxLCNln0xg5uGHqMnkhPSTzUZH2eXcR03S/On9Yvoq2wyUZILRUhZCNVu2PmwWVoyuiPz8th8zbg==", - "dev": true, "requires": { "debug": "^3.2.5", "eventsource": "^1.0.7", @@ -9679,7 +9671,6 @@ "version": "3.2.6", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", - "dev": true, "requires": { "ms": "^2.1.1" } @@ -9688,7 +9679,6 @@ "version": "0.11.1", "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.1.tgz", "integrity": "sha1-8O/hjE9W5PQK/H4Gxxn9XuYYjzg=", - "dev": true, "requires": { "websocket-driver": ">=0.5.1" } @@ -10699,7 +10689,6 @@ "version": "1.4.7", "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz", "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==", - "dev": true, "requires": { "querystringify": "^2.1.1", "requires-port": "^1.0.0" @@ -11293,7 +11282,6 @@ "version": "0.7.0", "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.0.tgz", "integrity": "sha1-DK+dLXVdk67gSdS90NP+LMoqJOs=", - "dev": true, "requires": { "http-parser-js": ">=0.4.0", "websocket-extensions": ">=0.1.1" @@ -11302,8 +11290,7 @@ "websocket-extensions": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz", - "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==", - "dev": true + "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==" }, "which": { "version": "1.3.1", diff --git a/package.json b/package.json index fead9fc..e948b0f 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "core-js": "^2.6.5", "jquery": "^3.4.0", "popper.js": "^1.15.0", + "sockjs-client": "^1.3.0", "vue": "^2.6.10", "vue-infinite-loading": "^2.4.4", "vue-router": "^3.0.3", diff --git a/src/components/Content.vue b/src/components/Content.vue index 6ed85ef..778a1f0 100644 --- a/src/components/Content.vue +++ b/src/components/Content.vue @@ -5,7 +5,7 @@ :id="packet.id" :content="packet.content" :timestamp="packet.timestamp"> - + diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 0713e6e..17ad088 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -8,7 +8,7 @@ :id="stream.id" :servicePort="stream.service.port" :time="stream.startTimestamp"> - + @@ -76,6 +76,10 @@ export default { return $state.error(); }); }, + onGotNewStream(stream) { + console.debug('got new stream from WS!', stream); + this.streams.unshift(stream); + }, }, components: {Stream, InfiniteLoading,}, } diff --git a/src/views/Home.vue b/src/views/Home.vue index 7e44a76..4895d74 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -3,7 +3,7 @@
- +
@@ -24,6 +24,7 @@ import Navbar from "@/components/Navbar.vue"; import Sidebar from "@/components/Sidebar.vue"; import Content from "@/components/Content.vue"; import AddServiceModal from "@/components/AddServiceModal.vue"; +import SockJS from "sockjs-client"; export default { name: 'Home', @@ -31,6 +32,7 @@ export default { return { showSettingsModal: false, showAddServiceModal: false, + socket: null, } }, props: ['servicePort', 'streamId',], @@ -39,6 +41,32 @@ export default { this.$refs.navbar.getCtfServices(); }, }, + mounted() { + const wsUrl = this.$store.state.apiUrl + '/ws'; + this.socket = new SockJS(wsUrl); + this.socket.onopen = function () { + console.debug('WS connected'); + }; + this.socket.onclose = function (ev) { + console.debug('WS disconnected', ev.code, ev.reason); + }; + this.socket.onmessage = ev => { + const parsed = JSON.parse(ev.data); + console.debug('WS got message', parsed); + const currentPort = this.$route.params.servicePort; + if (!(currentPort === undefined || currentPort === parsed.service.port)) { + console.debug('not related port, skipping...'); + return; + } + this.$refs.sidebar.onGotNewStream(parsed); + }; + this.socket.onerror = function (ev) { + console.warn('WS err', ev); + }; + }, + beforeDestroy() { + this.socket.close(); + }, components: { AddServiceModal, SettingsModal,