Client: encapsulate WebSocket client in Client class

public_html/js/client.js

@@ -1,47 +1,43 @@
 // Constants and variables
 // const wsUri = "ws://localhost:32715";
 const wsUri = "wss://chat.glitch-in.space:443/ws/";
-let websocket;
 
+class Client {
+	constructor(wsUri) {
+		this.wsUri = wsUri;
 
-// Initialization
-function init() {
-	console.log("Init...");
-	openWebSocket();
-}
-
-// Open WebSocket
-function openWebSocket() {
-	websocket = new WebSocket(wsUri);
-	websocket.onopen = function(evt) { onOpen(evt) };
-	websocket.onclose = function(evt) { onClose(evt) };
-	websocket.onmessage = function(evt) { onMessage(evt) };
-	websocket.onerror = function(evt) { onError(evt) };
+		// Create WebSocket and set callbacks
+		console.log("Initialize Client...")
+		this.webSocket = new WebSocket(wsUri);
+		this.webSocket.onopen = this.onOpen.bind(this);
+		this.webSocket.onclose = this.onClose.bind(this);
+		this.webSocket.onmessage = this.onMessage.bind(this);
+		this.webSocket.onerror = this.onError.bind(this);
 	}
 
 	// WebSocket event handlers
-function onOpen(evt) {
-	console.log("Connected to " + wsUri + ".");
+	onOpen(evt) {
+		console.log("Connected to " + wsUri);
 
 		// Send init command containing chat ID and nickname
-	sendInit();
+		this.sendInit();
 	}
 
-function onClose(evt) {
+	onClose(evt) {
 		console.log("Connection closed (code " + evt.code + ").");
 	}
 
-function onMessage(evt) {
+	onMessage(evt) {
 		console.log("Received: " + evt.data);
-	parseMessage(evt.data);
+		this.parseMessage(evt.data);
 	}
 
-function onError(evt) {
+	onError(evt) {
 		console.error("Connection error: ", evt);
 	}
 
 	// Command senders
-function sendInit() {
+	sendInit() {
 		// Define command as JSON object
 		let initObj = {
 			action: "init",
@@ -52,11 +48,11 @@ function sendInit() {
 		// Send command as JSON string
 		let initJson = JSON.stringify(initObj);
 		console.log("Sending init: " + initJson);
-	websocket.send(initJson);
+		this.webSocket.send(initJson);
 	}
 
 	// Message parsing
-function parseMessage(msgString) {
+	parseMessage(msgString) {
 		try {
 			let msg = JSON.parse(msgString);
 
@@ -83,8 +79,9 @@ function parseMessage(msgString) {
 			console.error("Error parsing message JSON: " + e.message);
 		}
 	}
+}
 
 // Run script after page is loaded
 $(function() {
-	init();
+	let client = new Client(wsUri);
 });