zoeissleeping/noctis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

various fixes and additions, files, but fixed, code cleanup etc

Browse Source
This commit is contained in:
Zoe
2025-09-02 23:36:13 -05:00
parent a89754f070
commit 2357e44923
3 changed files with 101 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
server/websocketHandler.ts
View File

@@ -1,4 +1,3 @@
import { json } from "@sveltejs/kit";
import { WebSocketServer } from "ws";
import type { WebSocket } from "ws";
@@ -6,14 +5,20 @@ import type { WebSocket } from "ws";
const rooms = new Map<string, WebSocket[]>();
enum MessageType {
// requests
CREATE_ROOM = 'create',
JOIN_ROOM = 'join',
// responses
ROOM_CREATED = 'created',
ROOM_JOINED = 'joined',
ROOM_READY = 'ready',
// webrtc
ICE_CANDIDATE = 'ice-candidate',
OFFER = 'offer',
ANSWER = 'answer',
ERROR = 'error',
}
@@ -24,27 +29,50 @@ type Message = {
function createRoom(socket: WebSocket): string {
let roomId = Math.random().toString(36).substring(2, 10);
rooms.set(roomId, [socket]);
rooms.set(roomId, []);
socket.send(JSON.stringify({ type: MessageType.ROOM_CREATED, data: roomId }));
joinRoom(roomId, socket);
return roomId;
}
function joinRoom(roomId: string, socket: WebSocket) {
const room = rooms.get(roomId);
let room = rooms.get(roomId);
console.log(room?.length);
// should be unreachable
if (!room) {
throw new Error(`Room ${roomId} does not exist`);
}
if (room.length == 2) {
socket.send(JSON.stringify({ type: MessageType.ERROR, data: 'Room is full' }));
return;
}
// notify all clients in the room of the new client, except the client itself
room.forEach(client => {
client.send(JSON.stringify({ type: MessageType.JOIN_ROOM, data: roomId }));
});
room.push(socket);
// the client is now in the room and the peer knows about it
socket.send(JSON.stringify({ type: MessageType.ROOM_JOINED, data: null }));
socket.addEventListener('close', (ev) => {
room = rooms.get(roomId)
if (!room) {
return;
}
// for some reason, when you filter the array when the length is 1 it stays at 1, but we *know* that if its 1
// then when this client disconnects, the room should be deleted since the room is empty
if (room.length === 1) {
deleteRoom(roomId);
return;
}
rooms.set(roomId, room.filter(client => client !== ev.target));
});
// TODO: consider letting rooms get larger than 2 clients
if (room.length == 2) {
@@ -63,8 +91,6 @@ export function confgiureWebsocketServer(ws: WebSocketServer) {
ws.on('connection', socket => {
// Handle messages from the client
socket.on('message', event => {
console.log(event, typeof event);
let message;
if (event instanceof Buffer) { // Assuming JSON is sent as a string
@@ -92,8 +118,7 @@ export function confgiureWebsocketServer(ws: WebSocketServer) {
switch (type) {
case MessageType.CREATE_ROOM:
// else, create a new room
const roomId = createRoom(socket);
socket.send(JSON.stringify({ type: MessageType.ROOM_CREATED, data: roomId }));
createRoom(socket);
break;
case MessageType.JOIN_ROOM:
// if join message has a roomId, join the room
@@ -109,6 +134,9 @@ export function confgiureWebsocketServer(ws: WebSocketServer) {
}
joinRoom(message.data, socket);
// the client is now in the room and the peer knows about it
socket.send(JSON.stringify({ type: MessageType.ROOM_JOINED, data: null }));
break;
case MessageType.OFFER:
case MessageType.ANSWER:
@@ -130,10 +158,5 @@ export function confgiureWebsocketServer(ws: WebSocketServer) {
break;
}
});
// Handle client disconnection
socket.on('close', () => {
// TODO: if this client was in a room, remove them from the room
});
});
}

50
src/components/RTCMessage.svelte
View File

@@ -10,6 +10,8 @@
} from "../utils/webrtcUtil";
let inputMessage: Writable<string> = writable("");
let inputFile = writable(null);
let inputFileElement: HTMLInputElement;
function sendMessage() {
if (!$peer) {
@@ -17,13 +19,29 @@
return;
}
if (!$inputFile && !$inputMessage) {
return;
}
if ($inputFile != null && $inputFile[0] !== undefined) {
$messages = [...$messages, `You: ${$inputFile[0].name}`];
$peer.send($inputFile[0]);
$inputFile = null;
}
if ($inputMessage) {
$messages = [...$messages, `You: ${$inputMessage}`];
$peer.send($inputMessage);
$inputMessage = "";
}
}
function pickFile() {
inputFileElement.click();
}
</script>
{#if $room && $connected}
{#if $room !== null && $connected === true}
{#if !$isRTCConnected}
<p>Waiting for peer to connect...</p>
{:else if !$dataChannelReady}
@@ -34,7 +52,12 @@
<p>{msg}</p>
{/each}
</div>
<input
type="file"
bind:files={$inputFile}
bind:this={inputFileElement}
class="absolute opacity-0 -top-[9999px] -left-[9999px]"
/>
<div class="flex gap-2">
<input
type="text"
@@ -43,6 +66,27 @@
placeholder="Type your message..."
class="flex-grow p-2 rounded bg-gray-700 border border-gray-600 text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
on:click={pickFile}
disabled={!dataChannelReady}
aria-label="Pick file"
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded disabled:opacity-50 disabled:cursor-not-allowed"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE --><path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3L18 10a3 3 0 0 0-6-6l-6.5 6.5a4.5 4.5 0 0 0 9 9L21 13"
/></svg
>
</button>
<button
on:click={sendMessage}
disabled={!dataChannelReady}
@@ -52,6 +96,4 @@
</button>
</div>
{/if}
{:else}
<p>Waiting for peer to connect...</p>
{/if}

17
src/utils/webrtcUtil.ts
View File

@@ -15,8 +15,23 @@ const callbacks = {
console.log("Connected to peer");
isRTCConnected.set(true);
},
//! TODO: come up with a more complex room system. This is largely for testing purposes
onMessage: (message: string | ArrayBuffer) => {
console.log("Received message:", message);
if (typeof message === 'object' && message instanceof Blob) {
// download the file
const url = URL.createObjectURL(message);
const a = document.createElement('a');
a.href = url;
a.download = message.name;
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 100);
}
messages.set([...get(messages), `Peer: ${message}`]);
},
onDataChannelOpen: () => {
@@ -67,8 +82,6 @@ export async function handleMessage(event: MessageEvent) {
await get(peer)?.createOffer();
}
return;
default:
console.warn(`Unknown message type: ${message.type}`);
}
if (!get(peer)) {