various fixes and additions, files, but fixed, code cleanup etc
This commit is contained in:
@@ -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
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
$messages = [...$messages, `You: ${$inputMessage}`];
|
||||
$peer.send($inputMessage);
|
||||
$inputMessage = "";
|
||||
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}
|
||||
|
||||
@@ -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)) {
|
||||
|
||||
Reference in New Issue
Block a user