From e746a4e8cae2a2644deed97cb081f721f32446a2 Mon Sep 17 00:00:00 2001
From: binaryDiv <binarydiv@gmail.com>
Date: Sun, 20 Jan 2019 05:00:02 +0100
Subject: [PATCH 1/2] Client: rename internal WebSocket event handlers

---
 public_html/js/client.js | 81 +++++++++++++++++++++++++---------------
 1 file changed, 51 insertions(+), 30 deletions(-)

diff --git a/public_html/js/client.js b/public_html/js/client.js
index 974a5bd..8a19005 100644
--- a/public_html/js/client.js
+++ b/public_html/js/client.js
@@ -4,55 +4,76 @@ class Client {
 	constructor(wsUri) {
 		this.wsUri = wsUri;
 
-		// Create WebSocket and set callbacks
+		// Create WebSocket and set internal 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);
+		this.webSocket.onopen = this._onSocketOpen.bind(this);
+		this.webSocket.onclose = this._onSocketClose.bind(this);
+		this.webSocket.onerror = this._onSocketError.bind(this);
+		this.webSocket.onmessage = this._onSocketMessage.bind(this);
 	}
 
-	// WebSocket event handlers
-	onOpen(evt) {
+	// Internal WebSocket event handlers
+	_onSocketOpen(evt) {
 		console.log("Connected to " + this.wsUri);
 
 		// Send init command containing chat ID and nickname
 		this.sendInit();
 	}
 
-	onClose(evt) {
+	_onSocketClose(evt) {
 		console.log("Connection closed (code " + evt.code + ").");
 	}
 
-	onMessage(evt) {
-		console.log("Received: " + evt.data);
-		this.parseMessage(evt.data);
-	}
-
-	onError(evt) {
+	_onSocketError(evt) {
 		console.error("Connection error: ", evt);
 	}
 
-	// Command senders
-	sendInit() {
-		// Define command as JSON object
-		let initObj = {
-			action: "init",
-			chat_id: "42",
-			nickname: "binaryDiv"
-		};
-
-		// Send command as JSON string
-		let initJson = JSON.stringify(initObj);
-		console.log("Sending init: " + initJson);
-		this.webSocket.send(initJson);
+	_onSocketMessage(evt) {
+		console.log("Received: " + evt.data);
+		this._parseMessage(evt.data);
 	}
 
-	// Message parsing
-	parseMessage(msgString) {
+	/**
+	 * Sends an arbitrary command as JSON.
+	 *
+	 * commandObj: The command as an object ('action' specifies type of command).
+	 */
+	sendCommand(commandObj) {
+		const commandJson = JSON.stringify(commandObj);
+		console.log("Sending command: " + commandJson);
+		this.webSocket.send(commandJson);
+	}
+
+	/**
+	 * Sends the 'init' command which sets up the session. Also sets the chat ID and nickname.
+	 */
+	sendInit() {
+		this.sendCommand({
+			action: "init",
+			chat_id: "42",
+			nickname: "binaryDiv",
+		});
+	}
+
+	/**
+	 * Sends the 'message' command which sends a chat message to the chat.
+	 *
+	 * msgText: The text of the chat message.
+	 */
+	sendChatMessage(msgText) {
+		this.sendCommand({
+			action: "message",
+			text: msgText,
+		});
+	}
+
+	/**
+	 * Parses an incoming JSON message and dispatches specific events.
+	 */
+	_parseMessage(msgString) {
 		try {
-			let msg = JSON.parse(msgString);
+			const msg = JSON.parse(msgString);
 
 			switch (msg.type) {
 				// Response to "init" command

From 36ba716ad808fa946ce3e724384cd7a50de3ea2e Mon Sep 17 00:00:00 2001
From: binaryDiv <binarydiv@gmail.com>
Date: Sun, 20 Jan 2019 05:01:58 +0100
Subject: [PATCH 2/2] Client: add ui.js; create Client object from ui.js

---
 public_html/index.html     |  3 ++-
 public_html/js/client.js   |  6 ------
 public_html/js/settings.js |  5 ++++-
 public_html/js/ui.js       | 10 ++++++++++
 4 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 public_html/js/ui.js

diff --git a/public_html/index.html b/public_html/index.html
index c4cf468..0c9aec9 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -5,7 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>InstantChat</title>
 	<link rel="stylesheet" href="css/style.css">
-	<script src="js/jquery-3.3.1.js"></script>
+	<!-- <script src="js/jquery-3.3.1.js"></script> -->
 </head>
 <body>
 
@@ -13,6 +13,7 @@
 
 <script src="js/settings.js"></script>
 <script src="js/client.js"></script>
+<script src="js/ui.js"></script>
 
 </body>
 </html>
diff --git a/public_html/js/client.js b/public_html/js/client.js
index 8a19005..5b90372 100644
--- a/public_html/js/client.js
+++ b/public_html/js/client.js
@@ -99,9 +99,3 @@ class Client {
 		}
 	}
 }
-
-// Run script after page is loaded
-$(function() {
-	const wsUri = AppSettings.serverWsUri;
-	let client = new Client(wsUri);
-});
diff --git a/public_html/js/settings.js b/public_html/js/settings.js
index eec7552..1d61ebc 100644
--- a/public_html/js/settings.js
+++ b/public_html/js/settings.js
@@ -1,7 +1,10 @@
 "use strict";
 
-// Global settings object
+/**
+ * Global settings object.
+ */
 const AppSettings = {
+    // Alternative WebSocket URI for local testing:
     // serverWsUri: "ws://localhost:32715",
     serverWsUri: "wss://chat.glitch-in.space:443/ws/",
 };
diff --git a/public_html/js/ui.js b/public_html/js/ui.js
new file mode 100644
index 0000000..1afd0d0
--- /dev/null
+++ b/public_html/js/ui.js
@@ -0,0 +1,10 @@
+"use strict";
+
+// Global object for debugging purposes
+let client;
+
+// Execute this on start (wrapped in an anonymous function)
+(function() {
+	const wsUri = AppSettings.serverWsUri;
+	client = new Client(wsUri);
+})();