ad/packmate
1
0
Fork 0
mirror of https://github.com/Av0idD4rk/packmate.git synced 2026-10-23 16:31:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Реализовал обновление без перезагрузки страницы с WS

Browse Source
This commit is contained in:
saber-nyan 2019-05-10 18:56:45 +03:00
parent 5656770319
commit 43591bd269
No known key found for this signature in database
GPG Key ID: 7B069E9C295E6B4A
5 changed files with 42 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

2
src/components/Content.vue
View File

@ -5,7 +5,7 @@
:id="packet.id"
:content="packet.content"
:timestamp="packet.timestamp"></Packet>
<infinite-loading @infinite="infiniteHandler" ref="infiniteLoading"></infinite-loading>
<infinite-loading @infinite="infiniteHandler" spinner="waveDots" ref="infiniteLoading"></infinite-loading>
</main>
</template>

6
src/components/Sidebar.vue
View File

@ -8,7 +8,7 @@
:id="stream.id"
:servicePort="stream.service.port"
:time="stream.startTimestamp"></Stream>
<infinite-loading @infinite="infiniteHandler" ref="infiniteLoading"></infinite-loading>
<infinite-loading @infinite="infiniteHandler" spinner="waveDots" ref="infiniteLoading"></infinite-loading>
</ul>
</div>
</nav>
@ -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,},
}

30
src/views/Home.vue
View File

@ -3,7 +3,7 @@
<Navbar @settingsButtonClicked="showSettingsModal = true" @addServiceButtonClicked="showAddServiceModal = true" ref="navbar"></Navbar>
<div class="container-fluid">
<div class="row">
<Sidebar :servicePort="servicePort" :streamId="streamId"></Sidebar>
<Sidebar ref="sidebar" :servicePort="servicePort" :streamId="streamId"></Sidebar>
<Content :servicePort="servicePort" :streamId="streamId"></Content>
</div>
</div>
@ -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,