Добавил вебсокеты, реализовал паузу

Closes #1, #2

src/App.vue

@@ -4,7 +4,7 @@
 		<div class="container-fluid">
 			<div class="row">
 				<transition name="fade" mode="out-in">
-					<router-view name="sidebar"/>
+					<router-view name="sidebar" ref="sidebar"/>
 				</transition>
 				<!--				<Sidebar></Sidebar>-->
 				<main role="main" class="col-sm-9 ml-sm-auto px-4">
@@ -15,8 +15,8 @@
 			</div>
 		</div>
 		<Settings/>
-		<AddService @serviceAddComplete="$refs.navbar.updateServices()"/>
-		<EditService @serviceEditComplete="$refs.navbar.updateServices()"/>
+		<AddService/>
+		<EditService/>
 		<AddPattern/>
 	</div>
 </template>
@@ -27,8 +27,69 @@
 	import AddService from './views/AddService';
 	import EditService from './views/EditService';
 	import AddPattern from './views/AddPattern';
+	import SockJS from 'sockjs-client';
 
 	export default {
+		data() {
+			return {
+				websocket: null,
+			};
+		},
+		mounted() {
+			this.connectWs();
+		},
+		beforeDestroy() {
+			this.websocket?.close();
+		},
+		methods: {
+			connectWs() {
+				this.websocket = new SockJS(this.$http.defaults.baseURL + '/ws');
+				this.websocket.onopen = () => {
+					console.info('[WS] Connected');
+				};
+				this.websocket.onclose = (ev) => {
+					console.info('[WS] Disconnected', ev.code, ev.reason);
+					if (ev.code === 1008) {
+						console.info('[WS] Security timeout, reconnecting...');
+						this.connectWs();
+					}
+				};
+				this.websocket.onmessage = (ev) => {
+					const parsed = JSON.parse(ev.data);
+					// console.debug('[WS] New message', parsed);
+
+					switch (parsed.type) {
+						case 'NEW_STREAM': {
+							this.$refs.sidebar.addStreamFromWs(parsed.value);
+							break;
+						}
+						case 'SAVE_SERVICE': {
+							this.$refs.navbar.addServiceFromWs(parsed.value);
+							break;
+						}
+						case 'DELETE_SERVICE': {
+							this.$refs.navbar.deleteServiceFromWs(parsed.value);
+							break;
+						}
+						case 'SAVE_PATTERN': {
+							this.$refs.navbar.$refs.patternsDropdown.addPatternFromWs(parsed.value);
+							break;
+						}
+						case 'DELETE_PATTERN': {
+							this.$refs.navbar.$refs.patternsDropdown.deletePatternFromWs(parsed.value);
+							break;
+						}
+						default: {
+							console.error('[WS] Event not implemented!', parsed);
+							break;
+						}
+					}
+				};
+				this.websocket.onerror = (ev) => {
+					console.warn('[WS] Error', ev);
+				};
+			},
+		},
 		components: {
 			AddPattern,
 			AddService,

src/components/Navbar.vue

@@ -5,7 +5,7 @@
 		<!--			<i class="fas fa-angle-down" style="margin-left: 0.5em"/>-->
 		<!--		</div>-->
 
-		<PatternsDropdown/>
+		<PatternsDropdown ref="patternsDropdown"/>
 
 		<div class="navbar-collapse collapse">
 			<ul class="navbar-nav px-3 mr-auto">
@@ -66,6 +66,17 @@
 						console.error('Failed to load services:', e);
 					});
 			},
+			addServiceFromWs(service) {
+				const foundIndex = this.services.findIndex(el => el.port === service.port);
+				if (foundIndex === -1) {
+					this.services.push(service);
+					return;
+				}
+				this.services.splice(foundIndex, 1, service);
+			},
+			deleteServiceFromWs(port) {
+				this.services = this.services.filter(o => o.port !== port);
+			},
 		},
 		components: {
 			PatternsDropdown,

src/components/PatternsDropdown.vue

@@ -73,6 +73,14 @@
 					console.error('Failed to delete pattern', e);
 				});
 			},
+
+			addPatternFromWs(pattern) {
+				this.patterns.push(pattern);
+			},
+
+			deletePatternFromWs(id) {
+				this.patterns = this.patterns.filter(o => o.id !== id);
+			},
 		},
 	};
 </script>

src/components/Sidebar.vue

@@ -91,6 +91,16 @@
 			togglePause() {
 				this.$store.commit('togglePause');
 			},
+			addStreamFromWs(stream) {
+				const currentPort = parseInt(this.$route?.params?.servicePort, 10);
+				if (currentPort && currentPort !== stream.service) return;
+				if (this.$store.state.displayFavoritesOnly || this.$store.state.pause) return;
+				if (this.$route.query.pattern && !stream.foundPatterns.some(e => e.id === this.$route.query.pattern)) {
+					return;
+				}
+
+				this.streams.unshift(stream);
+			},
 		},
 		components: {
 			SidebarStream,