tgpholly/t00-multiuser
1
0
Fork 0
Code Issues Pull requests Activity Actions

keep track of cursor position serverside

Browse source
This commit is contained in:
Holly Stubbs 2024-04-19 00:18:12 +01:00
parent bc66f08e4c
commit 91ab64a491
Signed by: tgpholly
GPG key ID: B8583C4B7D18119E
3 changed files with 30 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
client/Terminal-00-Multiuser.user.js
View file

@ -141,6 +141,11 @@ if (!window.TE_ACTIVE) {
this.targetY = y; this.targetY = y;
} }
rawSetPosInit(x, y) {
this.actualX = this.targetX = Math.round(x * window.innerWidth);
this.actualY = this.targetY = y;
}
updateCursor() { updateCursor() {
const x = Math.round(this.actualX); const x = Math.round(this.actualX);
const y = Math.round(this.actualY); const y = Math.round(this.actualY);
@ -227,7 +232,7 @@ if (!window.TE_ACTIVE) {
function doConnect() { function doConnect() {
const Buffer = getBufferClass(); const Buffer = getBufferClass();
ws = new WebSocket("wss://ws.eusv.net/t00mp"); ws = new WebSocket(window.location.href.includes("localhost") ? "ws://localhost:38195" : "wss://ws.eusv.net/t00mp");
let keepAliveInterval; let keepAliveInterval;
ws.onopen = () => { ws.onopen = () => {
const currentPage = window.location.href.split("/").slice(3).join("/"); const currentPage = window.location.href.split("/").slice(3).join("/");
@ -246,7 +251,9 @@ if (!window.TE_ACTIVE) {
for (let i = 0; i < clientCount; i++) { for (let i = 0; i < clientCount; i++) {
const clientId = reader.readUInt(); const clientId = reader.readUInt();
const clientName = reader.readShortString(); const clientName = reader.readShortString();
remoteClients.set(clientId, new RemoteClient(clientName)); const clientX = reader.readFloat();
const clientY = reader.readInt();
remoteClients.set(clientId, new RemoteClient(clientName)).rawSetPosInit(clientX, clientY);
} }
ready = true; ready = true;
break; break;
@ -336,9 +343,13 @@ if (!window.TE_ACTIVE) {
buttons.style.marginTop = "1rem"; buttons.style.marginTop = "1rem";
dialog.appendChild(buttons); dialog.appendChild(buttons);
const submitButton = document.createElement("button"); const submitButton = document.createElement("button");
submitButton.innerText = "Connect"; submitButton.innerText = localStorage["t00mp_username"] !== "" ? "Connect" : "Change Username";
submitButton.onclick = () => submitFunction(null); submitButton.onclick = () => submitFunction(null);
buttons.appendChild(submitButton); buttons.appendChild(submitButton);
if (localStorage["t00mp_username"] !== "") {
const disconnectButton = document.createElement("button");
disconnectButton.innerText = "Disconnect";
}
const doNotButton = document.createElement("button"); const doNotButton = document.createElement("button");
doNotButton.innerText = "Close"; doNotButton.innerText = "Close";
doNotButton.onclick = () => bg.remove(); doNotButton.onclick = () => bg.remove();

22
server/index.ts
View file

@ -19,6 +19,14 @@ function sendToAllButSelf(user:User, data:Buffer) {
}); });
} }
function sendToAll(user:User, data:Buffer) {
users.forEach(otherUser => {
if (otherUser.currentURL === user.currentURL) {
otherUser.send(data);
}
});
}
server.on("connection", (socket) => { server.on("connection", (socket) => {
const myUUID = crypto.randomUUID(); const myUUID = crypto.randomUUID();
let user:User; let user:User;
@ -54,9 +62,9 @@ server.on("connection", (socket) => {
await users.forEach(otherUser => { await users.forEach(otherUser => {
lengthOfUsernames += otherUser.username.length + 1; // + 1 for length byte lengthOfUsernames += otherUser.username.length + 1; // + 1 for length byte
}); });
const usersToSend = createWriter(Endian.LE, 3 + (users.length * 4) + lengthOfUsernames).writeByte(MessageType.Clients).writeUShort(users.length); const usersToSend = createWriter(Endian.LE, 3 + (users.length * 12) + lengthOfUsernames).writeByte(MessageType.Clients).writeUShort(users.length);
await users.forEach(otherUser => { await users.forEach(otherUser => {
usersToSend.writeUInt(otherUser.id).writeShortString(otherUser.username); usersToSend.writeUInt(otherUser.id).writeShortString(otherUser.username).writeFloat(otherUser.cursorX).writeInt(otherUser.cursorY);
}); });
user = users.set(myUUID, new User(socket, username, page)); user = users.set(myUUID, new User(socket, username, page));
sendToAllButSelf(user, createWriter(Endian.LE, 6 + username.length).writeByte(MessageType.ClientJoined).writeUInt(user.id).writeShortString(username).toBuffer()); sendToAllButSelf(user, createWriter(Endian.LE, 6 + username.length).writeByte(MessageType.ClientJoined).writeUInt(user.id).writeShortString(username).toBuffer());
@ -67,9 +75,9 @@ server.on("connection", (socket) => {
if (user === undefined) { if (user === undefined) {
return; return;
} }
const cursorX = reader.readFloat(); user.cursorX = reader.readFloat();
const cursorY = reader.readInt(); user.cursorY = reader.readInt();
sendToAllButSelf(user, createWriter(Endian.LE, 13).writeByte(MessageType.CursorPos).writeUInt(user.id).writeFloat(cursorX).writeInt(cursorY).toBuffer()); sendToAllButSelf(user, createWriter(Endian.LE, 13).writeByte(MessageType.CursorPos).writeUInt(user.id).writeFloat(user.cursorX).writeInt(user.cursorY).toBuffer());
break; break;
} }
case MessageType.Ping: case MessageType.Ping:
@ -77,9 +85,7 @@ server.on("connection", (socket) => {
const cursorX = reader.readFloat(); const cursorX = reader.readFloat();
const cursorY = reader.readInt(); const cursorY = reader.readInt();
const packet = createWriter(Endian.LE, 9).writeByte(MessageType.Ping).writeFloat(cursorX).writeInt(cursorY).toBuffer(); const packet = createWriter(Endian.LE, 9).writeByte(MessageType.Ping).writeFloat(cursorX).writeInt(cursorY).toBuffer();
users.forEach(otherUser => { sendToAll(user, packet);
otherUser.send(packet);
});
break; break;
} }
} }

2
server/objects/User.ts
View file

@ -7,6 +7,8 @@ export default class User {
public readonly id:number; public readonly id:number;
public readonly username:string; public readonly username:string;
public readonly currentURL:string; public readonly currentURL:string;
public cursorX:number = 0;
public cursorY:number = 0;
constructor(socket:WebSocket, username:string, currentURL:string) { constructor(socket:WebSocket, username:string, currentURL:string) {
this.socket = socket; this.socket = socket;