Added code that automatically reconnects users after losing connection to server.

frontend/App.vue

@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<h1 v-if="!socketConnected" class="socketNotConnected">Could not connect to the server.</h1>
 		<router-view></router-view>
 		<toast></toast>
 		<what-is-new></what-is-new>
@@ -38,7 +39,8 @@
 				isRegisterActive: false,
 				isLoginActive: false,
 				isCreateCommunityStationActive: false,
-				serverDomain: ''
+				serverDomain: '',
+				socketConnected: true
 			}
 		},
 		methods: {
@@ -113,6 +115,10 @@
 						this.isCreateCommunityStationActive = !this.isCreateCommunityStationActive;
 						break;
 				}
+			},
+			'handleSocketConnection': function() {
+				this.socketConnected = window.socketConnected;
+				this.$broadcast('handleSocketConnection');
 			}
 		},
 		components: { Toast, WhatIsNew, LoginModal, RegisterModal, CreateCommunityStation }
@@ -121,4 +127,16 @@
 
 <style type='scss'>
 	#toast-container { z-index: 10000 !important; }
+
+	.socketNotConnected {
+		padding: 20px;
+		color: white;
+		background-color: red;
+		position: fixed;
+		top: 50px;
+		right: 50px;
+		font-size: 2em;
+		border-radius: 5px;
+		z-index: 10000000;
+	}
 </style>

frontend/components/Station/Station.vue

@@ -301,6 +301,56 @@
 						Toast.methods.addToast(`Error: ${data.message}`, 8000);
 					}
 				});
+			},
+			joinStation: function(test) {
+				let _this = this;
+				_this.socket.emit('stations.join', _this.stationId, res => {
+					if (res.status === 'success') {
+						_this.station = {
+							displayName: res.data.displayName,
+							description: res.data.description,
+							privacy: res.data.privacy,
+							partyMode: res.data.partyMode,
+							owner: res.data.owner,
+							privatePlaylist: res.data.privatePlaylist
+						};
+						_this.currentSong = (res.data.currentSong) ? res.data.currentSong : {};
+						_this.type = res.data.type;
+						_this.startedAt = res.data.startedAt;
+						_this.paused = res.data.paused;
+						_this.timePaused = res.data.timePaused;
+						if (res.data.currentSong) {
+							_this.noSong = false;
+							_this.simpleSong = (res.data.currentSong.likes === -1 && res.data.currentSong.dislikes === -1);
+							if (_this.simpleSong) {
+								_this.currentSong.skipDuration = 0;
+							}
+							console.log(12334);
+							_this.youtubeReady();
+							_this.playVideo();
+							_this.socket.emit('songs.getOwnSongRatings', res.data.currentSong._id, data => {
+								if (_this.currentSong._id === data.songId) {
+									_this.liked = data.liked;
+									_this.disliked = data.disliked;
+								}
+							});
+						} else {
+							if (_this.playerReady) _this.player.pauseVideo();
+							console.log("NO SONG TRUE1", res.data);
+							_this.noSong = true;
+						}
+						if (_this.type === 'community') {
+							_this.socket.emit('stations.getQueue', _this.stationId, data => {
+								console.log(data);
+								if (data.status === 'success') {
+									_this.queue = data.queue;
+								}
+							});
+						}
+					} else {
+						//TODO Handle error
+					}
+				});
 			}
 		},
 		ready: function() {
@@ -312,53 +362,10 @@
 				if (!!_this.$parent.socket) {
 					_this.socket = _this.$parent.socket;
 					_this.socket.removeAllListeners();
-					_this.socket.emit('stations.join', _this.stationId, res => {
-						if (res.status === 'success') {
-							_this.station = {
-								displayName: res.data.displayName,
-								description: res.data.description,
-								privacy: res.data.privacy,
-								partyMode: res.data.partyMode,
-								owner: res.data.owner,
-								privatePlaylist: res.data.privatePlaylist
-							};
-							_this.currentSong = (res.data.currentSong) ? res.data.currentSong : {};
-							_this.type = res.data.type;
-							_this.startedAt = res.data.startedAt;
-							_this.paused = res.data.paused;
-							_this.timePaused = res.data.timePaused;
-							if (res.data.currentSong) {
-								_this.noSong = false;
-								_this.simpleSong = (res.data.currentSong.likes === -1 && res.data.currentSong.dislikes === -1);
-								if (_this.simpleSong) {
-									_this.currentSong.skipDuration = 0;
-								}
-								console.log(12334);
-								_this.youtubeReady();
-								_this.playVideo();
-								_this.socket.emit('songs.getOwnSongRatings', res.data.currentSong._id, data => {
-									if (_this.currentSong._id === data.songId) {
-										_this.liked = data.liked;
-										_this.disliked = data.disliked;
-									}
-								});
-							} else {
-								if (_this.playerReady) _this.player.pauseVideo();
-								console.log("NO SONG TRUE1", res.data);
-								_this.noSong = true;
-							}
-							if (_this.type === 'community') {
-								_this.socket.emit('stations.getQueue', _this.stationId, data => {
-									console.log(data);
-									if (data.status === 'success') {
-										_this.queue = data.queue;
-									}
-								});
-							}
-						} else {
-							//TODO Handle error
-						}
-					});
+
+					if (_this.socket.connected) {
+						_this.joinStation();
+					}
 
 					_this.socket.on('event:songs.next', data => {
 						_this.currentSong = (data.currentSong) ? data.currentSong : {};
@@ -454,6 +461,13 @@
 			volume = (typeof volume === "number") ? volume : 20;
 			$("#volumeSlider").val(volume);
 		},
+		events: {
+			'handleSocketConnection': function() {
+				if (this.$parent.socketConnected) {
+					this.joinStation(321);
+				}
+			}
+		},
 		components: { OfficialHeader, CommunityHeader, SongQueue, EditPlaylist, CreatePlaylist, EditStation, QueueSidebar, PlaylistSidebar, UsersSidebar }
 	}
 </script>

frontend/components/pages/Home.vue

@@ -78,7 +78,32 @@
 			let _this = this;
 			auth.getStatus((authenticated, role, username, userId) => {
 				_this.socket = _this.$parent.socket;
+				if (_this.socket.connected) {
+					this.init();
+				}
+				_this.socket.on('event:stations.created', station => {
+					console.log("CREATED!!!", station);
+					if (!station.currentSong) station.currentSong = {thumbnail: '/assets/notes.png'};
+					if (station.privacy !== 'public') {
+						station.class = {'station-red': true}
+					} else if (station.type === 'community') {
+						if (station.owner === userId) {
+							station.class = {'station-blue': true}
+						}
+					}
+					_this.stations[station.type].push(station);
+				});
+			});
+		},
+		methods: {
+			toggleModal: function (type) {
+				this.$dispatch('toggleModal', type);
+			},
+			init: function() {
+				let _this = this;
 				_this.socket.emit("stations.index", data => {
+					_this.stations.community = [];
+					_this.stations.official = [];
 					if (data.status === "success")  data.stations.forEach(station => {
 						if (!station.currentSong) station.currentSong = { thumbnail: '/assets/notes.png' };
 						console.log(station.privacy);
@@ -95,23 +120,13 @@
 					});
 				});
 				_this.socket.emit("apis.joinRoom", 'home', () => {});
-				_this.socket.on('event:stations.created', station => {
-					console.log("CREATED!!!", station);
-					if (!station.currentSong) station.currentSong = {thumbnail: '/assets/notes.png'};
-					if (station.privacy !== 'public') {
-						station.class = {'station-red': true}
-					} else if (station.type === 'community') {
-						if (station.owner === userId) {
-							station.class = {'station-blue': true}
-						}
-					}
-					_this.stations[station.type].push(station);
-				});
-			});
+			}
 		},
-		methods: {
-			toggleModal: function (type) {
-				this.$dispatch('toggleModal', type);
+		events: {
+			'handleSocketConnection': function() {
+				if (this.$parent.socketConnected) {
+					this.init();
+				}
 			}
 		},
 		components: { MainHeader, MainFooter }

frontend/main.js

@@ -23,6 +23,15 @@ lofig.get('serverDomain', function(res) {
 	socket.on("ready", (status, role, username, userId) => {
 		auth.data(status, role, username, userId);
 	});
+	setInterval(() => {
+		if (!socket.connected) {
+			window.socketConnected = false;
+			router.app.$dispatch("handleSocketConnection");
+		} else if (!window.socketConnected && socket.connected) {
+			window.socketConnected = true;
+			router.app.$dispatch("handleSocketConnection");
+		}
+	}, 10000);
 });
 
 router.beforeEach(transition => {