SkribblServer- und SkribblClient-Klassen angelegt

client/SkribblClient.js

+import DataChannel from "./networking/DataChannel.js";
+import Signaler from "./networking/Signaler.js";
+
+export default class SkribblClient {
+	/**
+	 * Constructs a new client for a given game ID or DataChannel.
+	 * @param {string|DataChannel} idOrDataChannel
+	 */
+	constructor(idOrDataChannel){
+		this._readyPromise = (async()=>{
+			this._dataChannel = idOrDataChannel instanceof DataChannel?idOrDataChannel:await Signaler.join(idOrDataChannel);
+			await this._dataChannel.waitUntilReady();
+			this._dataChannel.send("Hi there :3");
+			this._dataChannel.onMessage(message=>{
+				console.log(`message from server: "${message}"`);
+			})
+		})();
+	}
+
+	/**
+	 * Waits until the connection to the server is ready.
+	 */
+	async waitUntilReady(){
+		return this._readyPromise;
+	}
+}
\ No newline at end of file

client/SkribblServer.js

+import DataChannel from "./networking/DataChannel.js";
+import Signaler from "./networking/Signaler.js";
+
+/**
+ * A local server. Handles all the important game logic, and communicates with clients via DataChannels.
+ */
+export default class SkribblServer {
+	/**
+	 * Starts a new SkribblServer.
+	 */
+	constructor(){
+		this._readyPromise = (async()=>{
+			this._id = await Signaler.host(dataChannel=>{
+				this.connect(dataChannel);
+			});
+		})();
+	}
+
+	/**
+	 * Waits until the server is ready.
+	 */
+	async waitUntilReady(){
+		return this._readyPromise;
+	}
+
+	/**
+	 * The ID others can use to connect to this server.
+	 * @readonly
+	 */
+	get id(){
+		return this._id;
+	}
+
+	/**
+	 * Returns the full url others can use to connect to this server.
+	 * @readonly
+	 */
+	get url(){
+		return document.location.host+document.location.pathname+"#"+this._id;
+	}
+
+	/**
+	 * Adds an incoming connection as a client.
+	 * @param {DataChannel} dataChannel
+	 */
+	connect(dataChannel){
+		dataChannel.onMessage(message=>{
+			console.log(`message from client: "${message}"`);
+			dataChannel.send("Got your message :D");
+		});
+	}
+}
\ No newline at end of file

client/DataChannel.js → client/networking/DataChannel.js

@@ -40,6 +40,8 @@ export default class DataChannel {
 
 	/**
 	 * Sends the given message to the other endpoint of the connection.
+	 * 
+	 * If the connection isn't ready already, waits until it is before sending the message and then returns.
 	 * @param {string} message
 	 */
 	async send(message){

client/script.js

-import Signaler from "./Signaler.js";
+import SkribblClient from "./SkribblClient.js";
 import SkribblContainer from "./SkribblContainer.js";
+import SkribblServer from "./SkribblServer.js";
 
 document.addEventListener("DOMContentLoaded",async()=>{
 	if (document.location.hash){
 		document.body.innerHTML = "";
 		const gameID = document.location.hash.substring(1);
-		const dataChannel = await Signaler.join(gameID);
-		console.group("Joined game "+gameID+"!");
-		console.log("dataChannel:",dataChannel);
-		console.groupEnd();
-		dataChannel.onMessage(message=>{
-			console.log("Message through DataChannel:",message);
-			dataChannel.send("Got ya message, many thanks <3");
-		});
+		const client = new SkribblClient(gameID);
 	}else{
 		/** @type {HTMLButtonElement} *///@ts-ignore
 		const button = document.getElementById("button");
@@ -20,17 +14,9 @@ document.addEventListener("DOMContentLoaded",async()=>{
 			button.disabled = true;
 			resolve();
 		})});
-		let id = await Signaler.host(async dataChannel=>{
-			console.group("New connection!");
-			console.log("dataChannel:",dataChannel);
-			console.groupEnd();
-			dataChannel.onMessage(message=>{
-				console.log("Message through DataChannel:",message);
-			});
-			await dataChannel.waitUntilReady();
-			dataChannel.send("Oh hello there :3");
-		});
-		alert(document.location.host+document.location.pathname+"#"+id);
+		const server = new SkribblServer();
+		await server.waitUntilReady();
+		console.log(server.url);
 	}
 	const game = new SkribblContainer();
 	document.body.innerHTML = "";