fix(socket.io -> WS): added config option for websockets domain

Signed-off-by: Jonathan <theflametrooper@gmail.com>

README.md

@@ -68,7 +68,8 @@ We currently only utilize 1 backend, 1 MongoDB server and 1 Redis server running
 
     | Property | Description |
     | - | - |
-    | `serverDomain` | Should be the url where the backend will be accessible from, usually `http://localhost:8080` for non-Docker. |
+    | `apiDomain` | Should be the url where the backend will be accessible from, usually `http://localhost:8080` for non-Docker. |
+    | `websocketsDomain` | Should be the same as the `serverDomain`, except using the `ws://` protocol instead of `http://` and with `/ws` at the end. |
     | `frontendDomain` | Should be the url where the frontend will be accessible from, usually `http://localhost` for docker or `http://localhost:80` for non-Docker. |
     | `frontendPort` | Should be the port where the frontend will be accessible from, should always be port `81` for Docker, and is recommended to be port `80` for non-Docker. |
     | `recaptcha.key` | Can be obtained by setting up a [ReCaptcha Site (v3)](https://www.google.com/recaptcha/admin). |

frontend/dist/config/template.json

@@ -3,7 +3,8 @@
 		"key": "",
 		"enabled": false
 	},
-	"serverDomain": "http://localhost:8080",
+	"apiDomain": "http://localhost:8080",
+	"websocketsDomain": "ws://localhost:8080/ws",
 	"frontendDomain": "http://localhost",
 	"frontendPort": "81",
   	"cookie": {
@@ -18,5 +19,5 @@
 		"github": "https://github.com/Musare/MusareNode"
 	},
 	"skipConfigVersionCheck": false,
-	"configVersion": 1
+	"configVersion": 2
 }

frontend/src/App.vue

@@ -31,7 +31,7 @@ export default {
 	replace: false,
 	data() {
 		return {
-			serverDomain: "",
+			apiDomain: "",
 			socketConnected: true,
 			keyIsDown: false
 		};
@@ -120,7 +120,7 @@ export default {
 			this.socketConnected = false;
 		});
 
-		this.serverDomain = await lofig.get("serverDomain");
+		this.apiDomain = await lofig.get("apiDomain");
 
 		this.$router.onReady(() => {
 			if (this.$route.query.err) {

frontend/src/components/modals/EditPlaylist/index.vue

@@ -378,7 +378,7 @@ export default {
 		return {
 			utils,
 			drag: false,
-			serverDomain: "",
+			apiDomain: "",
 			playlist: { songs: [] }
 		};
 	},
@@ -641,11 +641,11 @@ export default {
 			});
 		},
 		async downloadPlaylist() {
-			if (this.serverDomain === "")
-				this.serverDomain = await lofig.get("serverDomain");
+			if (this.apiDomain === "")
+				this.apiDomain = await lofig.get("apiDomain");
 
 			fetch(
-				`${this.serverDomain}/export/privatePlaylist/${this.playlist._id}`,
+				`${this.apiDomain}/export/privatePlaylist/${this.playlist._id}`,
 				{ credentials: "include" }
 			)
 				.then(res => res.blob())

frontend/src/components/modals/Login.vue

@@ -62,7 +62,7 @@
 				>
 				<a
 					class="button is-github"
-					:href="serverDomain + '/auth/github/authorize'"
+					:href="apiDomain + '/auth/github/authorize'"
 					@click="githubRedirect()"
 				>
 					<div class="icon">
@@ -88,11 +88,11 @@ export default {
 		return {
 			email: "",
 			password: "",
-			serverDomain: ""
+			apiDomain: ""
 		};
 	},
 	async mounted() {
-		this.serverDomain = await lofig.get("serverDomain");
+		this.apiDomain = await lofig.get("apiDomain");
 	},
 	methods: {
 		submitModal() {

frontend/src/components/modals/Register.vue

@@ -94,7 +94,7 @@
 				>
 				<a
 					class="button is-github"
-					:href="serverDomain + '/auth/github/authorize'"
+					:href="apiDomain + '/auth/github/authorize'"
 					@click="githubRedirect()"
 				>
 					<div class="icon">
@@ -142,7 +142,7 @@ export default {
 				token: "",
 				enabled: false
 			},
-			serverDomain: ""
+			apiDomain: ""
 		};
 	},
 	watch: {
@@ -195,7 +195,7 @@ export default {
 		}
 	},
 	async mounted() {
-		this.serverDomain = await lofig.get("serverDomain");
+		this.apiDomain = await lofig.get("apiDomain");
 
 		lofig.get("recaptcha").then(obj => {
 			this.recaptcha.enabled = obj.enabled;

frontend/src/main.js

@@ -6,7 +6,7 @@ import store from "./store";
 import App from "./App.vue";
 import ws from "./ws";
 
-const REQUIRED_CONFIG_VERSION = 1;
+const REQUIRED_CONFIG_VERSION = 2;
 
 const handleMetadata = attrs => {
 	document.title = `Musare | ${attrs.title}`;
@@ -137,106 +137,123 @@ const router = new VueRouter({
 	]
 });
 
-// const { serverDomain } = config;
-ws.init({ url: "ws://localhost:8080/ws" });
-
-ws.socket.on("ready", (loggedIn, role, username, userId) =>
-	store.dispatch("user/auth/authData", {
-		loggedIn,
-		role,
-		username,
-		userId
-	})
-);
-
-ws.socket.on("keep.event:banned", ban =>
-	store.dispatch("user/auth/banUser", ban)
-);
-
-ws.socket.on("event:user.username.changed", username =>
-	store.dispatch("user/auth/updateUsername", username)
-);
-
-ws.socket.on("keep.event:user.preferences.changed", preferences => {
-	store.dispatch(
-		"user/preferences/changeAutoSkipDisliked",
-		preferences.autoSkipDisliked
-	);
+lofig.folder = "../config/default.json";
 
-	store.dispatch("user/preferences/changeNightmode", preferences.nightmode);
+(async () => {
+	const websocketsDomain = await lofig.get("websocketsDomain");
+	ws.init(websocketsDomain);
 
-	store.dispatch(
-		"user/preferences/changeActivityLogPublic",
-		preferences.activityLogPublic
+	ws.socket.on("ready", (loggedIn, role, username, userId) =>
+		store.dispatch("user/auth/authData", {
+			loggedIn,
+			role,
+			username,
+			userId
+		})
 	);
-});
 
-lofig.folder = "../config/default.json";
-lofig.fetchConfig().then(config => {
-	const { configVersion, skipConfigVersionCheck } = config;
-	if (configVersion !== REQUIRED_CONFIG_VERSION && !skipConfigVersionCheck) {
-		// eslint-disable-next-line no-alert
-		alert(
-			"CONFIG VERSION IS WRONG. PLEASE UPDATE YOUR CONFIG WITH THE HELP OF THE TEMPLATE FILE AND THE README FILE."
-		);
-		window.stop();
-	}
-});
+	ws.socket.on("keep.event:banned", ban =>
+		store.dispatch("user/auth/banUser", ban)
+	);
 
-router.beforeEach((to, from, next) => {
-	if (window.stationInterval) {
-		clearInterval(window.stationInterval);
-		window.stationInterval = 0;
-	}
+	ws.socket.on("event:user.username.changed", username =>
+		store.dispatch("user/auth/updateUsername", username)
+	);
 
-	if (window.socket) ws.removeAllListeners();
+	ws.socket.on("keep.event:user.preferences.changed", preferences => {
+		store.dispatch(
+			"user/preferences/changeAutoSkipDisliked",
+			preferences.autoSkipDisliked
+		);
 
-	ws.clear();
+		store.dispatch(
+			"user/preferences/changeNightmode",
+			preferences.nightmode
+		);
 
-	if (to.meta.loginRequired || to.meta.adminRequired) {
-		const gotData = () => {
-			if (to.meta.loginRequired && !store.state.user.auth.loggedIn)
-				next({ path: "/login" });
-			else if (
-				to.meta.adminRequired &&
-				store.state.user.auth.role !== "admin"
-			)
-				next({ path: "/" });
-			else next();
-		};
+		store.dispatch(
+			"user/preferences/changeActivityLogPublic",
+			preferences.activityLogPublic
+		);
+	});
 
-		if (store.state.user.auth.gotData) gotData();
-		else {
-			const watcher = store.watch(
-				state => state.user.auth.gotData,
-				() => {
-					watcher();
-					gotData();
-				}
+	lofig.fetchConfig().then(config => {
+		const { configVersion, skipConfigVersionCheck } = config;
+		if (
+			configVersion !== REQUIRED_CONFIG_VERSION &&
+			!skipConfigVersionCheck
+		) {
+			// eslint-disable-next-line no-alert
+			alert(
+				"CONFIG VERSION IS WRONG. PLEASE UPDATE YOUR CONFIG WITH THE HELP OF THE TEMPLATE FILE AND THE README FILE."
 			);
+			window.stop();
 		}
-	} else next();
-});
+	});
 
-Vue.directive("click-outside", {
-	bind(element, binding) {
-		window.handleOutsideClick = event => {
-			if (!(element === event.target || element.contains(event.target))) {
-				binding.value();
+	router.beforeEach((to, from, next) => {
+		if (window.stationInterval) {
+			clearInterval(window.stationInterval);
+			window.stationInterval = 0;
+		}
+
+		if (window.socket) ws.removeAllListeners();
+
+		ws.clear();
+
+		if (to.meta.loginRequired || to.meta.adminRequired) {
+			const gotData = () => {
+				if (to.meta.loginRequired && !store.state.user.auth.loggedIn)
+					next({ path: "/login" });
+				else if (
+					to.meta.adminRequired &&
+					store.state.user.auth.role !== "admin"
+				)
+					next({ path: "/" });
+				else next();
+			};
+
+			if (store.state.user.auth.gotData) gotData();
+			else {
+				const watcher = store.watch(
+					state => state.user.auth.gotData,
+					() => {
+						watcher();
+						gotData();
+					}
+				);
 			}
-		};
+		} else next();
+	});
 
-		document.body.addEventListener("click", window.handleOutsideClick);
-	},
-	unbind() {
-		document.body.removeEventListener("click", window.handleOutsideClick);
-	}
-});
+	Vue.directive("click-outside", {
+		bind(element, binding) {
+			window.handleOutsideClick = event => {
+				if (
+					!(
+						element === event.target ||
+						element.contains(event.target)
+					)
+				) {
+					binding.value();
+				}
+			};
 
-// eslint-disable-next-line no-new
-new Vue({
-	router,
-	store,
-	el: "#root",
-	render: wrapper => wrapper(App)
-});
+			document.body.addEventListener("click", window.handleOutsideClick);
+		},
+		unbind() {
+			document.body.removeEventListener(
+				"click",
+				window.handleOutsideClick
+			);
+		}
+	});
+
+	// eslint-disable-next-line no-new
+	new Vue({
+		router,
+		store,
+		el: "#root",
+		render: wrapper => wrapper(App)
+	});
+})();

frontend/src/pages/Settings/tabs/Security.vue

@@ -78,10 +78,7 @@
 
 			<hr class="section-horizontal-rule" />
 
-			<a
-				class="button is-github"
-				:href="`${serverDomain}/auth/github/link`"
-			>
+			<a class="button is-github" :href="`${apiDomain}/auth/github/link`">
 				<div class="icon">
 					<img class="invert" src="/assets/social/github.svg" />
 				</div>
@@ -155,7 +152,7 @@ export default {
 	components: { InputHelpBox },
 	data() {
 		return {
-			serverDomain: "",
+			apiDomain: "",
 			previousPassword: "",
 			validation: {
 				newPassword: {
@@ -195,7 +192,7 @@ export default {
 		}
 	},
 	async mounted() {
-		this.serverDomain = await lofig.get("serverDomain");
+		this.apiDomain = await lofig.get("apiDomain");
 	},
 	methods: {
 		onInputBlur(inputName) {

frontend/src/ws.js

@@ -45,7 +45,7 @@ export default {
 				delete CB_REFS[id];
 		}),
 
-	init() {
+	init(url) {
 		class ListenerHandler extends EventTarget {
 			constructor() {
 				super();
@@ -79,7 +79,7 @@ export default {
 		}
 
 		class CustomWebSocket extends WebSocket {
-			constructor(url) {
+			constructor() {
 				super(url);
 				this.dispatcher = new ListenerHandler();
 			}
@@ -105,7 +105,7 @@ export default {
 			}
 		}
 
-		this.socket = new CustomWebSocket("ws://localhost:8080/ws");
+		this.socket = new CustomWebSocket();
 		store.dispatch("websockets/createSocket", this.socket);
 
 		this.socket.onopen = () => {
@@ -141,7 +141,7 @@ export default {
 			onDisconnect.persist.forEach(cb => cb());
 
 			// try to reconnect every 1000ms
-			setTimeout(() => this.init(), 1000);
+			setTimeout(() => this.init(url), 1000);
 		};
 
 		this.socket.onerror = err => {