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,