basic Websocket client-server

src/client/ws.ts

@@ -0,0 +1,81 @@
+
+import * as g from "./pong.js"
+import {startGame} from "./pong.js";
+
+const wsPort = 8042;
+const wsUrl = "ws://" + document.location.hostname + ":" + wsPort + "/pong";
+const socket = new WebSocket(wsUrl, "json");
+
+enum EventTypes {
+	gameUpdate = 1,
+	start,
+	pause,
+	resume
+}
+
+interface EventData {
+	type: EventTypes;
+}
+
+class EventGameUpdate implements EventData {
+	type: EventTypes = EventTypes.gameUpdate;
+	player1 = {y: 0};
+	player2 = {y: 0};
+	ball = {x: 0, y: 0, speed: 0};
+}
+
+socket.addEventListener("message", logListener);
+socket.addEventListener("message", matchmakingListener);
+
+
+function logListener(event: MessageEvent) {
+	console.log("data: " + event.data + " | [" + Date.now() + "]");
+}
+
+function matchmakingListener(event: MessageEvent)
+{
+	console.log("matchmakingListener");
+	const data: EventData = JSON.parse(event.data);
+	if (data.type == EventTypes.start)
+	{
+		console.log("Event type = start");
+		socket.removeEventListener("message", matchmakingListener);
+		socket.addEventListener("message", inGameListener);
+		startGame();
+	}
+}
+
+function inGameListener(event: MessageEvent)
+{
+	console.log("inGameListener");
+	const data: EventData = JSON.parse(event.data);
+	switch (data.type) {
+		case EventTypes.gameUpdate:
+			console.log("Event type = gameUpdate");
+			serverGameUpdate(data as EventGameUpdate);
+			break;
+		case EventTypes.pause:
+			console.log("Event type = pause");
+			break;
+		case EventTypes.resume:
+			console.log("Event type = resume");
+			break;
+	}
+}
+
+function serverGameUpdate(data: EventGameUpdate)
+{
+	g.player1.clear();
+	g.player1.pos.y = Math.floor(data.player1.y);
+	g.player1.update();
+	
+	g.player2.clear();
+	g.player2.pos.y = Math.floor(data.player2.y);
+	g.player2.update();
+}
+
+// socket.addEventListener("open", (event) => {
+// 	console.log("socket state %i", socket.readyState);
+// });
+
+export {socket}