Added proper socket.io module.

frontend/App.vue

@@ -18,6 +18,7 @@
 	import RegisterModal from './components/Modals/Register.vue';
 	import CreateCommunityStation from './components/Modals/CreateCommunityStation.vue';
 	import auth from './auth';
+	import io from './io';
 
 	export default {
 		replace: false,
@@ -65,6 +66,12 @@
 				_this.username = username;
 				_this.userId = userId;
 			});
+			io.onConnect(() => {
+				_this.socketConnected = true;
+			});
+			io.onDisconnect(() => {
+				_this.socketConnected = false;
+			});
 			lofig.get('serverDomain', res => {
 				_this.serverDomain = res;
 			});
@@ -114,12 +121,7 @@
 						break;
 				}
 			},
-			'handleSocketConnection': function () {
-				this.socketConnected = window.socketConnected;
-				console.log(123332222111);
-				this.$broadcast('handleSocketConnection');
-			},
-			'closeModal': function () {
+			'closeModal': function() {
 				this.$broadcast('closeModal');
 			}
 		},

frontend/components/Admin/QueueSongs.vue

@@ -42,6 +42,7 @@
 	import { Toast } from 'vue-roaster';
 
 	import EditSong from '../Modals/EditSong.vue';
+	import io from '../../io';
 
 	export default {
 		components: { EditSong },
@@ -137,15 +138,12 @@
 		},
 		ready: function () {
 			let _this = this;
-			let socketInterval = setInterval(() => {
-				if (!!_this.$parent.$parent.socket) {
-					_this.socket = _this.$parent.$parent.socket;
-					_this.socket.emit('queueSongs.index', data => {
-						_this.songs = data;
-					});
-					clearInterval(socketInterval);
-				}
-			}, 100);
+			io.getSocket((socket) => {
+				_this.socket = socket;
+				_this.socket.emit('queueSongs.index', data => {
+					_this.songs = data;
+				});
+			});
 
 			this.video.player = new YT.Player('player', {
 				height: 315,

frontend/components/Admin/Songs.vue

@@ -131,15 +131,12 @@
 		},
 		ready: function () {
 			let _this = this;
-			let socketInterval = setInterval(() => {
-				if (!!_this.$parent.$parent.socket) {
-					_this.socket = _this.$parent.$parent.socket;
-					_this.socket.emit('songs.index', data => {
-						_this.songs = data;
-					});
-					clearInterval(socketInterval);
-				}
-			}, 100);
+			io.getSocket((socket) => {
+				_this.socket = socket;
+				_this.socket.emit('songs.index', data => {
+					_this.songs = data;
+				});
+			});
 
 			this.video.player = new YT.Player('player', {
 				height: 315,

frontend/components/Admin/Stations.vue

@@ -85,6 +85,7 @@
 
 <script>
 	import { Toast } from 'vue-roaster';
+	import io from '../../io';
 
 	export default {
 		data() {
@@ -140,15 +141,12 @@
 		},
 		ready: function () {
 			let _this = this;
-			let socketInterval = setInterval(() => {
-				if (!!_this.$parent.$parent.socket) {
-					_this.socket = _this.$parent.$parent.socket;
-					_this.socket.emit('stations.index', data => {
+			io.getSocket((socket) => {
+				_this.socket = socket;
+				_this.socket.emit('stations.index', data => {
 						_this.stations = data.stations;
-					});
-					clearInterval(socketInterval);
-				}
-			}, 100);
+				});
+			});
 		}
 	}
 </script>

frontend/components/Modals/AddSongToQueue.vue

@@ -39,6 +39,7 @@
 
 <script>
 	import { Toast } from 'vue-roaster';
+	import io from '../../io';
 
 	export default {
 		data() {
@@ -86,12 +87,9 @@
 		},
 		ready: function () {
 			let _this = this;
-			let socketInterval = setInterval(() => {
-				if (!!_this.$parent.$parent.socket) {
-					_this.socket = _this.$parent.$parent.socket;
-					clearInterval(socketInterval);
-				}
-			}, 100);
+			io.getSocket((socket) => {
+				_this.socket = socket;
+			});
 		},
 		events: {
 			closeModal: function() {

frontend/components/Modals/CreateCommunityStation.vue

@@ -30,6 +30,7 @@
 
 <script>
 	import { Toast } from 'vue-roaster';
+	import io from '../../io';
 
 	export default {
 		data() {
@@ -43,12 +44,9 @@
 		},
 		ready: function () {
 			let _this = this;
-			let socketInterval = setInterval(() => {
-				if (!!_this.$parent.socket) {
-					_this.socket = _this.$parent.socket;
-					clearInterval(socketInterval);
-				}
-			}, 100);
+			io.getSocket((socket) => {
+				_this.socket = socket;
+			});
 		},
 		methods: {
 			toggleModal: function () {

frontend/components/Modals/EditStation.vue

@@ -58,6 +58,7 @@
 
 <script>
 	import { Toast } from 'vue-roaster';
+	import io from '../../io';
 
 	export default {
 		methods: {
@@ -88,12 +89,9 @@
 		},
 		ready: function () {
 			let _this = this;
-			let socketInterval = setInterval(() => {
-				if (!!_this.$parent.$parent.socket) {
-					_this.socket = _this.$parent.$parent.socket;
-					clearInterval(socketInterval);
-				}
-			}, 100);
+			io.getSocket((socket) => {
+				_this.socket = socket;
+			});
 		},
 		events: {
 			closeModal: function() {

frontend/components/Modals/Playlists/Create.vue

@@ -20,6 +20,7 @@
 
 <script>
 	import { Toast } from 'vue-roaster';
+	import io from '../../../io';
 
 	export default {
 		data() {
@@ -43,12 +44,9 @@
 		},
 		ready: function () {
 			let _this = this;
-			let socketInterval = setInterval(() => {
-				if (!!_this.$parent.$parent.socket) {
-					_this.socket = _this.$parent.$parent.socket;
-					clearInterval(socketInterval);
-				}
-			}, 100);
+			io.getSocket((socket) => {
+				_this.socket = socket;
+			});
 		},
 		events: {
 			closeModal: function() {

frontend/components/Modals/Playlists/Edit.vue

@@ -76,6 +76,7 @@
 
 <script>
 	import { Toast } from 'vue-roaster';
+	import io from '../../../io';
 
 	export default {
 		data() {
@@ -152,35 +153,32 @@
 		},
 		ready: function () {
 			let _this = this;
-			let socketInterval = setInterval(() => {
-				if (!!_this.$parent.$parent.socket) {
-					_this.socket = _this.$parent.$parent.socket;
-					_this.socket.emit('playlists.getPlaylist', _this.$parent.playlistBeingEdited, res => {
+			io.getSocket((socket) => {
+				_this.socket = socket;
+				_this.socket.emit('playlists.getPlaylist', _this.$parent.playlistBeingEdited, res => {
 						if (res.status == 'success') _this.playlist = res.data; _this.playlist.oldId = res.data._id;
-					});
-					_this.socket.on('event:playlist.addSong', (data) => {
-						if (_this.playlist._id === data.playlistId) {
-							console.log("PUSH!");
-							_this.playlist.songs.push(data.song);
-						}
-					});
-					_this.socket.on('event:playlist.removeSong', (data) => {
-						if (_this.playlist._id === data.playlistId) {
-							_this.playlist.songs.forEach((song, index) => {
-								if (song._id === data.songId) {
-									_this.playlist.songs.splice(index, 1);
-								}
-							});
-						}
-					});
-					_this.socket.on('event:playlist.updateDisplayName', (data) => {
-						if (_this.playlist._id === data.playlistId) {
-							_this.playlist.displayName = data.displayName;
+				});
+				_this.socket.on('event:playlist.addSong', (data) => {
+					if (_this.playlist._id === data.playlistId) {
+						console.log("PUSH!");
+						_this.playlist.songs.push(data.song);
+					}
+				});
+				_this.socket.on('event:playlist.removeSong', (data) => {
+					if (_this.playlist._id === data.playlistId) {
+						_this.playlist.songs.forEach((song, index) => {
+						if (song._id === data.songId) {
+							_this.playlist.songs.splice(index, 1);
 						}
 					});
-					clearInterval(socketInterval);
-				}
-			}, 100);
+					}
+				});
+				_this.socket.on('event:playlist.updateDisplayName', (data) => {
+					if (_this.playlist._id === data.playlistId) {
+						_this.playlist.displayName = data.displayName;
+					}
+				});
+			});
 		},
 		events: {
 			closeModal: function() {

frontend/components/Modals/WhatIsNew.vue

@@ -40,6 +40,8 @@
 </template>
 
 <script>
+	import io from '../../io';
+
 	export default {
 		data() {
 			return {
@@ -49,26 +51,23 @@
 		},
 		ready: function () {
 			let _this = this;
-			let socketInterval = setInterval(() => {
-				if (!!_this.$parent.socket) {
-					_this.socket = _this.$parent.socket;
-					_this.socket.emit('news.newest', res => {
-						_this.news = res.data;
-						if (_this.news) {
-							if (localStorage.getItem('whatIsNew')) {
-								if (parseInt(localStorage.getItem('whatIsNew')) < res.data.createdAt) {
-									this.toggleModal();
-									localStorage.setItem('whatIsNew', res.data.createdAt);
-								}
-							} else {
+			io.getSocket((socket) => {
+				_this.socket = socket;
+				_this.socket.emit('news.newest', res => {
+					_this.news = res.data;
+					if (_this.news) {
+						if (localStorage.getItem('whatIsNew')) {
+							if (parseInt(localStorage.getItem('whatIsNew')) < res.data.createdAt) {
 								this.toggleModal();
 								localStorage.setItem('whatIsNew', res.data.createdAt);
 							}
+						} else {
+							this.toggleModal();
+							localStorage.setItem('whatIsNew', res.data.createdAt);
 						}
-					});
-					clearInterval(socketInterval);
-				}
-			}, 100);
+					}
+				});
+			});
 		},
 		methods: {
 			toggleModal: function () {

frontend/components/Sidebars/Playlist.vue

@@ -30,6 +30,7 @@
 <script>
 	import { Toast } from 'vue-roaster';
 	import { Edit } from '../Modals/Playlists/Edit.vue';
+	import io from '../../io';
 
 	export default {
 		data() {
@@ -58,50 +59,47 @@
 		ready: function () {
 			// TODO: Update when playlist is removed/created
 			let _this = this;
-			let socketInterval = setInterval(() => {
-				if (!!_this.$parent.$parent.socket) {
-					_this.socket = _this.$parent.$parent.socket;
-					_this.socket.emit('playlists.indexForUser', res => {
-						if (res.status == 'success') _this.playlists = res.data;
-					});
-					_this.socket.on('event:playlist.create', (playlist) => {
+			io.getSocket((socket) => {
+				_this.socket = socket;
+				_this.socket.emit('playlists.indexForUser', res => {
+					if (res.status == 'success') _this.playlists = res.data;
+				});
+				_this.socket.on('event:playlist.create', (playlist) => {
 						_this.playlists.push(playlist);
+				});
+				_this.socket.on('event:playlist.delete', (playlistId) => {
+					_this.playlists.forEach((playlist, index) => {
+						if (playlist._id === playlistId) {
+							_this.playlists.splice(index, 1);
+						}
 					});
-					_this.socket.on('event:playlist.delete', (playlistId) => {
-						_this.playlists.forEach((playlist, index) => {
-							if (playlist._id === playlistId) {
-								_this.playlists.splice(index, 1);
-							}
-						});
-					});
-					_this.socket.on('event:playlist.addSong', (data) => {
-						_this.playlists.forEach((playlist, index) => {
-							if (playlist._id === data.playlistId) {
-								_this.playlists[index].songs.push(data.song);
-							}
-						});
+				});
+				_this.socket.on('event:playlist.addSong', (data) => {
+					_this.playlists.forEach((playlist, index) => {
+						if (playlist._id === data.playlistId) {
+							_this.playlists[index].songs.push(data.song);
+						}
 					});
-					_this.socket.on('event:playlist.removeSong', (data) => {
-						_this.playlists.forEach((playlist, index) => {
-							if (playlist._id === data.playlistId) {
-								_this.playlists[index].songs.forEach((song, index2) => {
-									if (song._id === data.songId) {
-										_this.playlists[index].songs.splice(index2, 1);
-									}
-								});
-							}
-						});
+				});
+				_this.socket.on('event:playlist.removeSong', (data) => {
+					_this.playlists.forEach((playlist, index) => {
+						if (playlist._id === data.playlistId) {
+							_this.playlists[index].songs.forEach((song, index2) => {
+								if (song._id === data.songId) {
+									_this.playlists[index].songs.splice(index2, 1);
+								}
+							});
+						}
 					});
-					_this.socket.on('event:playlist.updateDisplayName', (data) => {
-						_this.playlists.forEach((playlist, index) => {
-							if (playlist._id === data.playlistId) {
-								_this.playlists[index].displayName = data.displayName;
-							}
-						});
+				});
+				_this.socket.on('event:playlist.updateDisplayName', (data) => {
+					_this.playlists.forEach((playlist, index) => {
+						if (playlist._id === data.playlistId) {
+							_this.playlists[index].displayName = data.displayName;
+						}
 					});
-					clearInterval(socketInterval);
-				}
-			}, 100);
+				});
+			});
 		}
 	}
 </script>

frontend/components/Sidebars/Queue.vue

@@ -38,6 +38,8 @@
 </template>
 
 <script>
+	import io from '../../io';
+
 	export default {
 		data() {
 			return {
@@ -46,15 +48,12 @@
 		},
 		ready: function () {
 			let _this = this;
-			let socketInterval = setInterval(() => {
-				if (!!_this.$parent.$parent.socket) {
-					_this.socket = _this.$parent.$parent.socket;
-					_this.socket.emit('stations.getPlaylist', _this.$parent.stationId, res => {
+			io.getSocket((socket) => {
+				_this.socket = socket;
+				_this.socket.emit('stations.getPlaylist', _this.$parent.stationId, res => {
 						if (res.status == 'success') _this.playlist = res.data;
-					});
-					clearInterval(socketInterval);
-				}
-			}, 100);
+				});
+			});
 		}
 	}
 </script>

frontend/components/Station/Station.vue

@@ -31,7 +31,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="columns is-mobile" v-show="!noSong" v-if='currentSong !== null'>
+		<div class="columns is-mobile" v-show="!noSong">
 			<div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
 				<div class="columns is-mobile">
 					<div class="column is-12-mobile" v-bind:class="{'is-8-desktop': !simpleSong}">
@@ -82,6 +82,7 @@
 
 	import OfficialHeader from './OfficialHeader.vue';
 	import CommunityHeader from './CommunityHeader.vue';
+	import io from '../../io';
 
 	export default {
 		data() {
@@ -362,117 +363,111 @@
 			_this.stationId = _this.$route.params.id;
 			window.stationInterval = 0;
 
-			let socketInterval = setInterval(() => {
-				if (!!_this.$parent.socket) {
-					_this.socket = _this.$parent.socket;
-					_this.socket.removeAllListeners();
+			io.getSocket((socket) => {
+				_this.socket = socket;
+				io.removeAllListeners();
 
-					if (_this.socket.connected) {
-						_this.joinStation();
-					}
+				if (_this.socket.connected) {
+					_this.joinStation();
+				}
 
-					_this.socket.on('event:songs.next', data => {
-						_this.previousSong = _this.currentSong;
-						_this.currentSong = (data.currentSong) ? data.currentSong : {};
-						_this.startedAt = data.startedAt;
-						_this.paused = data.paused;
-						_this.timePaused = data.timePaused;
-						if (data.currentSong) {
-							_this.noSong = false;
-							_this.simpleSong = (data.currentSong.likes === -1 && data.currentSong.dislikes === -1);
-							if (_this.simpleSong) {
-								_this.currentSong.skipDuration = 0;
-							}
-							console.log(1233, _this.stationId);
-							if (!_this.playerReady) _this.youtubeReady();
-							else _this.playVideo();
-							_this.socket.emit('songs.getOwnSongRatings', 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 TRUE2", data);
-							_this.noSong = true;
+				io.onConnect(() => {
+					_this.joinStation();
+				});
+
+				_this.socket.on('event:songs.next', data => {
+					_this.previousSong = _this.currentSong;
+					_this.currentSong = (data.currentSong) ? data.currentSong : {};
+					_this.startedAt = data.startedAt;
+					_this.paused = data.paused;
+					_this.timePaused = data.timePaused;
+					if (data.currentSong) {
+						_this.noSong = false;
+						_this.simpleSong = (data.currentSong.likes === -1 && data.currentSong.dislikes === -1);
+						if (_this.simpleSong) {
+							_this.currentSong.skipDuration = 0;
 						}
-					});
+						console.log(1233, _this.stationId);
+						if (!_this.playerReady) _this.youtubeReady();
+						else _this.playVideo();
+						_this.socket.emit('songs.getOwnSongRatings', 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 TRUE2", data);
+						_this.noSong = true;
+					}
+				});
 
-					_this.socket.on('event:stations.pause', data => {
-						_this.pauseLocalStation();
-					});
+				_this.socket.on('event:stations.pause', data => {
+					_this.pauseLocalStation();
+				});
 
-					_this.socket.on('event:stations.resume', data => {
-						_this.timePaused = data.timePaused;
-						_this.resumeLocalStation();
-					});
+				_this.socket.on('event:stations.resume', data => {
+					_this.timePaused = data.timePaused;
+					_this.resumeLocalStation();
+				});
 
-					_this.socket.on('event:song.like', data => {
-						if (!this.noSong) {
-							if (data.songId === _this.currentSong._id) {
-								_this.currentSong.likes++;
-								if (data.undisliked) _this.currentSong.dislikes--;
-							}
+				_this.socket.on('event:song.like', data => {
+					if (!this.noSong) {
+						if (data.songId === _this.currentSong._id) {
+							_this.currentSong.likes++;
+							if (data.undisliked) _this.currentSong.dislikes--;
 						}
-					});
+					}
+				});
 
-					_this.socket.on('event:song.dislike', data => {
-						if (!this.noSong) {
-							if (data.songId === _this.currentSong._id) {
-								_this.currentSong.dislikes++;
-								if (data.unliked) _this.currentSong.likes--;
-							}
+				_this.socket.on('event:song.dislike', data => {
+					if (!this.noSong) {
+						if (data.songId === _this.currentSong._id) {
+							_this.currentSong.dislikes++;
+							if (data.unliked) _this.currentSong.likes--;
 						}
-					});
+					}
+				});
 
-					_this.socket.on('event:song.unlike', data => {
-						if (!this.noSong) {
-							if (data.songId === _this.currentSong._id) _this.currentSong.likes--;
-						}
-					});
+				_this.socket.on('event:song.unlike', data => {
+					if (!this.noSong) {
+						if (data.songId === _this.currentSong._id) _this.currentSong.likes--;
+					}
+				});
 
-					_this.socket.on('event:song.undislike', data => {
-						if (!this.noSong) {
-							if (data.songId === _this.currentSong._id) _this.currentSong.dislikes--;
-						}
-					});
+				_this.socket.on('event:song.undislike', data => {
+					if (!this.noSong) {
+						if (data.songId === _this.currentSong._id) _this.currentSong.dislikes--;
+					}
+				});
 
-					_this.socket.on('event:song.newRatings', data => {
-						if (!this.noSong) {
-							if (data.songId === _this.currentSong._id) {
-								_this.liked = data.liked;
-								_this.disliked = data.disliked;
-							}
+				_this.socket.on('event:song.newRatings', data => {
+					if (!this.noSong) {
+						if (data.songId === _this.currentSong._id) {
+							_this.liked = data.liked;
+							_this.disliked = data.disliked;
 						}
-					});
+					}
+				});
 
-					_this.socket.on('event:queue.update', queue => {
-						if (this.type === 'community') {
-							this.queue = queue;
-						}
-					});
+				_this.socket.on('event:queue.update', queue => {
+					if (this.type === 'community') {
+						this.queue = queue;
+					}
+				});
 
-					_this.socket.on('event:song.voteSkipSong', () => {
-						if (this.currentSong) {
-							this.currentSong.skipVotes++;
-						}
-					});
-					clearInterval(socketInterval);
-				}
-			}, 100);
+				_this.socket.on('event:song.voteSkipSong', () => {
+					if (this.currentSong) {
+						this.currentSong.skipVotes++;
+					}
+				});
+			});
 
 			let volume = parseInt(localStorage.getItem("volume"));
 			volume = (typeof volume === "number") ? volume : 20;
 			$("#volumeSlider").val(volume);
 		},
-		events: {
-			'handleSocketConnection': function () {
-				if (this.$parent.socketConnected) {
-					this.joinStation();
-				}
-			}
-		},
 		components: {
 			OfficialHeader,
 			CommunityHeader,

frontend/components/User/Settings.vue

@@ -42,18 +42,15 @@
 		},
 		ready: function() {
 			let _this = this;
-			let socketInterval = setInterval(() => {
-				if (!!_this.$parent.socket) {
-					_this.socket = _this.$parent.socket;
-					_this.socket.emit('users.findBySession', res => {
-						if (res.status == 'success') { _this.user = res.data; } else {
-							_this.$parent.isLoginActive = true;
-							Toast.methods.addToast('Your are currently not signed in', 3000);
-						}
-					});
-					clearInterval(socketInterval);
-				}
-			}, 100);
+			io.getSocket((socket) => {
+				_this.socket = socket;
+				_this.socket.emit('users.findBySession', res => {
+					if (res.status == 'success') { _this.user = res.data; } else {
+						_this.$parent.isLoginActive = true;
+						Toast.methods.addToast('Your are currently not signed in', 3000);
+					}
+				});
+			});
 		},
 		methods: {
 			changeEmail: function () {

frontend/components/User/Show.vue

@@ -54,18 +54,15 @@
 		},
 		ready: function() {
 			let _this = this;
-			let socketInterval = setInterval(() => {
-				if (!!_this.$parent.socket) {
-					_this.socket = _this.$parent.socket;
-					_this.socket.emit('users.findByUsername', _this.$route.params.username, res => {
-						if (res.status == 'error') this.$router.go('/404');
-						else _this.user = res.data; _this.isUser = true;
-					});
-					clearInterval(socketInterval);
-				}
-			}, 100);
+			io.getSocket((socket) => {
+				_this.socket = socket;
+				_this.socket.emit('users.findByUsername', _this.$route.params.username, res => {
+					if (res.status == 'error') this.$router.go('/404');
+					else _this.user = res.data; _this.isUser = true;
+				});
+			});
 		},
-		components: { MainHeader, MainFooter },
+		components: { MainHeader, MainFooter }
 	}
 </script>
 

frontend/components/pages/Home.vue

@@ -59,6 +59,7 @@
 	import MainHeader from '../MainHeader.vue';
 	import MainFooter from '../MainFooter.vue';
 	import auth from '../../auth';
+	import io from '../../io';
 
 	export default {
 		data() {
@@ -77,21 +78,26 @@
 		ready() {
 			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}
-						}
+				io.getSocket((socket) => {
+					_this.socket = socket;
+					if (_this.socket.connected) {
+						_this.init();
 					}
-					_this.stations[station.type].push(station);
+					io.onConnect(() => {
+						_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);
+					});
 				});
 			});
 		},
@@ -122,13 +128,6 @@
 				_this.socket.emit("apis.joinRoom", 'home', () => {});
 			}
 		},
-		events: {
-			'handleSocketConnection': function() {
-				if (this.$parent.socketConnected) {
-					this.init();
-				}
-			}
-		},
 		components: { MainHeader, MainFooter }
 	}
 </script>

frontend/components/pages/News.vue

@@ -46,6 +46,7 @@
 <script>
 	import MainHeader from '../MainHeader.vue';
 	import MainFooter from '../MainFooter.vue';
+	import io from '../../io';
 
 	export default {
 		components: { MainHeader, MainFooter },
@@ -61,15 +62,12 @@
 		},
 		ready: function () {
 			let _this = this;
-			let socketInterval = setInterval(() => {
-				if (!!_this.$parent.socket) {
-					_this.socket = _this.$parent.socket;
-					_this.socket.emit('news.index', res => {
-						_this.news = res.data;
-					});
-					clearInterval(socketInterval);
-				}
-			}, 100);
+			io.getSocket((socket) => {
+				_this.socket = socket;
+				_this.socket.emit('news.index', res => {
+					_this.news = res.data;
+				});
+			});
 		}
 	}
 </script>

frontend/io.js

@@ -0,0 +1,57 @@
+let callbacks = [];
+let onConnectCallbacks = [];
+let onDisconnectCallbacks = [];
+
+export default {
+
+	ready: false,
+	socket: null,
+
+	getSocket: function (cb) {
+		if (this.ready) cb(this.socket);
+		else callbacks.push(cb);
+	},
+
+	onConnect: function(cb) {
+		onConnectCallbacks.push(cb);
+	},
+
+	onDisconnect: function(cb) {
+		onDisconnectCallbacks.push(cb);
+	},
+
+	removeAllListeners: function() {
+		Object.keys(this.socket._callbacks).forEach((id) => {
+			if (id.indexOf("$event:song") !== -1) {
+				delete this.socket._callbacks[id];
+			}
+		});
+	},
+
+	init: function (url) {
+		this.socket = window.socket = io(url);
+		this.socket.on('connect', () => {
+			// Connect
+			console.log("SOCKET.IO CONNECTED");
+			onConnectCallbacks.forEach((cb) => {
+				cb();
+			});
+		});
+		this.socket.on('disconnect', () => {
+			// Disconnect
+			console.log("SOCKET.IO DISCONNECTED");
+			onDisconnectCallbacks.forEach((cb) => {
+				cb();
+			});
+		});
+		this.socket.on('connect_error', () => {
+			// Connect error
+			console.log("SOCKET.IO ERROR WHILE CONNECTING");
+		});
+		this.ready = true;
+		callbacks.forEach(callback => {
+			callback(this.socket);
+		});
+		callbacks = [];
+	}
+}

frontend/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './App.vue';
 import auth from './auth';
+import io from './io';
 
 import NotFound from './components/404.vue';
 import Home from './components/pages/Home.vue';
@@ -17,23 +18,16 @@ import Login from './components/Modals/Login.vue';
 Vue.use(VueRouter);
 
 let router = new VueRouter({ history: true });
+let _this = this;
 
 lofig.folder = '../config/default.json';
-lofig.get('serverDomain', res => {
-	let socket = window.socket = io(res);
-	socket.on("ready", (status, role, username, userId) => {
-		auth.data(status, role, username, userId);
+lofig.get('serverDomain', function(res) {
+	io.init(res);
+	io.getSocket((socket) => {
+		socket.on("ready", (status, role, username, userId) => {
+			auth.data(status, role, username, userId);
+		});
 	});
-	window.socketConnected = true;
-	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);
 });
 
 document.onkeydown = event => {
@@ -47,7 +41,7 @@ router.beforeEach(transition => {
 		window.stationInterval = 0;
 	}
 	if (window.socket) {
-		window.socket.removeAllListeners();
+		io.removeAllListeners();
 	}
 	if (transition.to.loginRequired || transition.to.adminRequired) {
 		auth.getStatus((authenticated, role) => {