From 758fa1ed3f2990a6b02f588fd1d3e081bc6479bd Mon Sep 17 00:00:00 2001
From: Ben Eltschig <43812953+peabrainiac@users.noreply.github.com>
Date: Thu, 4 Mar 2021 20:43:27 +0100
Subject: [PATCH] SkribblServer- und SkribblClient-Klassen angelegt
---
client/SkribblClient.js | 26 +++++++++++++
client/SkribblServer.js | 52 ++++++++++++++++++++++++++
client/{ => networking}/DataChannel.js | 2 +
client/{ => networking}/Signaler.js | 0
client/script.js | 26 +++----------
5 files changed, 86 insertions(+), 20 deletions(-)
create mode 100644 client/SkribblClient.js
create mode 100644 client/SkribblServer.js
rename client/{ => networking}/DataChannel.js (98%)
rename client/{ => networking}/Signaler.js (100%)
diff --git a/client/SkribblClient.js b/client/SkribblClient.js
new file mode 100644
index 0000000..6b9e8f4
--- /dev/null
+++ b/client/SkribblClient.js
@@ -0,0 +1,26 @@
+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
diff --git a/client/SkribblServer.js b/client/SkribblServer.js
new file mode 100644
index 0000000..34f20eb
--- /dev/null
+++ b/client/SkribblServer.js
@@ -0,0 +1,52 @@
+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
diff --git a/client/DataChannel.js b/client/networking/DataChannel.js
similarity index 98%
rename from client/DataChannel.js
rename to client/networking/DataChannel.js
index c857837..3a7e6a3 100644
--- a/client/DataChannel.js
+++ b/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){
diff --git a/client/Signaler.js b/client/networking/Signaler.js
similarity index 100%
rename from client/Signaler.js
rename to client/networking/Signaler.js
diff --git a/client/script.js b/client/script.js
index aa11a81..af81585 100644
--- a/client/script.js
+++ b/client/script.js
@@ -1,18 +1,12 @@
-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 = "";
--
GitLab