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

initial commit

Browse Source
This commit is contained in:
Zoe
2025-09-02 22:12:07 -05:00
commit a89754f070
25 changed files with 1243 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app.css Normal file
View File

@@ -0,0 +1,9 @@
@import 'tailwindcss';
body, html {
@apply bg-neutral-950 text-white font-sans min-h-screen;
}
a {
@apply text-pink-600 underline hover:no-underline;
}

13
src/app.d.ts vendored Normal file
View File

@@ -0,0 +1,13 @@
// See https://svelte.dev/docs/kit/types#app.d.ts
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};

11
src/app.html Normal file
View File

@@ -0,0 +1,11 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

57
src/components/RTCMessage.svelte Normal file
View File

@@ -0,0 +1,57 @@
<script lang="ts">
import { writable, type Writable } from "svelte/store";
import { room } from "../stores/roomStore";
import { connected } from "../stores/websocketStore";
import {
isRTCConnected,
dataChannelReady,
messages,
peer,
} from "../utils/webrtcUtil";
let inputMessage: Writable<string> = writable("");
function sendMessage() {
if (!$peer) {
console.error("Peer not initialized");
return;
}
$messages = [...$messages, `You: ${$inputMessage}`];
$peer.send($inputMessage);
$inputMessage = "";
}
</script>
{#if $room && $connected}
{#if !$isRTCConnected}
<p>Waiting for peer to connect...</p>
{:else if !$dataChannelReady}
<p>Establishing data channel...</p>
{:else}
<div class="flex-grow overflow-y-auto mb-4 p-2 bg-gray-800 rounded">
{#each $messages as msg}
<p>{msg}</p>
{/each}
</div>
<div class="flex gap-2">
<input
type="text"
bind:value={$inputMessage}
on:keyup={(e) => e.key === "Enter" && sendMessage()}
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={sendMessage}
disabled={!dataChannelReady}
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded disabled:opacity-50 disabled:cursor-not-allowed"
>
Send
</button>
</div>
{/if}
{:else}
<p>Waiting for peer to connect...</p>
{/if}

1
src/lib/assets/favicon.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
src/lib/index.ts Normal file
View File

@@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

186
src/lib/webrtc.ts Normal file
View File

@@ -0,0 +1,186 @@
import { get } from 'svelte/store';
import { ws } from '../stores/websocketStore';
interface WebRTCPeerCallbacks {
onConnected: () => void;
onMessage: (message: string | ArrayBuffer) => void;
onDataChannelOpen: () => void;
onNegotiationNeeded: () => void;
onError: (error: any) => void;
}
export class WebRTCPeer {
private peer: RTCPeerConnection | null = null;
private dataChannel: RTCDataChannel | null = null;
private isInitiator: boolean;
private roomId: string;
private callbacks: WebRTCPeerCallbacks;
private iceServers = [
{ urls: 'stun:stun.l.google.com:19302' },
{ urls: 'stun:stun1.l.google.com:19302' },
];
constructor(roomId: string, isInitiator: boolean, callbacks: WebRTCPeerCallbacks) {
this.roomId = roomId;
this.isInitiator = isInitiator;
this.callbacks = callbacks;
}
private sendIceCandidate(candidate: RTCIceCandidate) {
get(ws).send(JSON.stringify({
type: 'ice-candidate',
data: {
roomId: this.roomId,
candidate: candidate,
},
}))
}
public async initialize() {
// dont initialize twice
if (this.peer) return;
this.peer = new RTCPeerConnection({
iceServers: this.iceServers,
});
// 1. Initialize ICE candidates
this.peer.onicecandidate = (event) => {
if (event.candidate) {
this.sendIceCandidate(event.candidate);
}
}
this.peer.oniceconnectionstatechange = () => {
console.log('ICE connection state changed to:', this.peer?.iceConnectionState);
if (this.peer?.iceConnectionState === 'connected' || this.peer?.iceConnectionState === 'completed') {
this.callbacks.onConnected();
} else if (this.peer?.iceConnectionState === 'failed') {
this.callbacks.onError('ICE connection failed');
}
};
this.peer.onnegotiationneeded = () => {
this.callbacks.onNegotiationNeeded();
};
// 2. Create data channel
if (this.isInitiator) {
this.dataChannel = this.peer.createDataChannel('data-channel');
this.setupDataChannelEvents(this.dataChannel);
console.log('created data channel');
} else {
this.peer.ondatachannel = (event) => {
this.dataChannel = event.channel;
this.setupDataChannelEvents(this.dataChannel);
console.log('received data channel');
};
}
}
private setupDataChannelEvents(channel: RTCDataChannel) {
channel.onopen = () => {
console.log('data channel open');
this.callbacks.onDataChannelOpen();
};
channel.onmessage = (event) => {
console.log('data channel message:', event.data);
this.callbacks.onMessage(event.data);
};
channel.onclose = () => {
console.log('data channel closed');
};
channel.onerror = (error) => {
console.error('data channel error:', error);
this.callbacks.onError(error);
};
}
// SDP exchange
public async createOffer() {
if (!this.peer) throw new Error('Peer not initialized');
try {
const offer = await this.peer.createOffer();
await this.peer.setLocalDescription(offer);
get(ws).send(JSON.stringify({
type: 'offer',
data: {
roomId: this.roomId,
sdp: offer,
},
}));
} catch (error) {
console.error('Error creating offer:', error);
this.callbacks.onError(error);
}
}
// both peers call this to set the remote SDP
public async setRemoteDescription(sdp: RTCSessionDescriptionInit) {
if (!this.peer) throw new Error('Peer not initialized');
try {
await this.peer.setRemoteDescription(sdp);
} catch (error) {
console.error('Error setting remote description:', error);
this.callbacks.onError(error);
}
}
public async createAnswer() {
if (!this.peer) throw new Error('Peer not initialized');
try {
const answer = await this.peer.createAnswer();
await this.peer.setLocalDescription(answer);
get(ws).send(JSON.stringify({
type: 'answer',
data: {
roomId: this.roomId,
sdp: answer,
},
}));
} catch (error) {
console.error('Error creating answer:', error);
this.callbacks.onError(error);
}
}
public async addIceCandidate(candidate: RTCIceCandidateInit) {
if (!this.peer) throw new Error('Peer not initialized');
try {
await this.peer.addIceCandidate(new RTCIceCandidate(candidate));
} catch (error) {
console.error('Error adding ICE candidate:', error);
this.callbacks.onError(error);
}
}
public send(data: string | ArrayBuffer) {
if (!this.dataChannel || this.dataChannel.readyState !== 'open') throw new Error('Data channel not initialized');
this.dataChannel.send(data);
}
public close() {
if (this.dataChannel) {
this.dataChannel.close();
}
if (this.peer) {
this.peer.close();
}
this.peer = null;
this.dataChannel = null;
}
}

12
src/routes/+layout.svelte Normal file
View File

@@ -0,0 +1,12 @@
<script lang="ts">
import '../app.css';
import favicon from '$lib/assets/favicon.svg';
let { children } = $props();
</script>
<svelte:head>
<link rel="icon" href={favicon} />
</svelte:head>
{@render children?.()}

43
src/routes/+page.svelte Normal file
View File

@@ -0,0 +1,43 @@
<script lang="ts">
import { ws, connected } from "../stores/websocketStore";
import { room } from "../stores/roomStore";
import { browser } from "$app/environment";
import { peer, handleMessage } from "../utils/webrtcUtil";
import { onDestroy, onMount } from "svelte";
import RtcMessage from "../components/RTCMessage.svelte";
onMount(async () => {
$ws.addEventListener("message", handleMessage);
});
onDestroy(() => {
if ($ws) {
$ws.removeEventListener("message", handleMessage);
}
if ($peer) {
$peer.close();
}
});
</script>
<div class="p-4">
<h1>Welcome to Wormhole!</h1>
{#if $connected}
<button
on:click={() => {
$ws.send(JSON.stringify({ type: "create" })); // send a message when the button is clicked
}}>Create Room</button
>
{:else}
<p>Connecting to server...</p>
{/if}
{#if $room && browser}
<p>Room created!</p>
<p>Share this link with your friend:</p>
<a href={`${location.origin}/${$room}`}>{location.origin}/{$room}</a>
{/if}
<RtcMessage />
</div>

40
src/routes/[roomId]/+page.svelte Normal file
View File

@@ -0,0 +1,40 @@
<script lang="ts">
import { page } from "$app/state";
import { onDestroy, onMount } from "svelte";
import { room } from "../../stores/roomStore";
import { error, handleMessage, peer } from "../../utils/webrtcUtil";
import { ws } from "../../stores/websocketStore";
import RtcMessage from "../../components/RTCMessage.svelte";
if (!page.params.roomId) {
throw new Error("Room ID not provided");
}
// subscribe to the websocket store
room.set(page.params.roomId);
onMount(async () => {
$ws.addEventListener("message", handleMessage);
$ws.onopen = () => {
$ws.send(JSON.stringify({ type: "join", data: $room }));
};
});
onDestroy(() => {
if ($ws) {
$ws.close();
}
if ($peer) {
$peer.close();
}
});
</script>
<div class="p-4">
{#if $error}
<p>Whoops! That room doesn't exist.</p>
{:else}
<RtcMessage />
{/if}
</div>

3
src/stores/roomStore.ts Normal file
View File

@@ -0,0 +1,3 @@
import { writable, type Writable } from 'svelte/store';
export let room: Writable<string | null> = writable(null);

32
src/stores/websocketStore.ts Normal file
View File

@@ -0,0 +1,32 @@
import { writable } from 'svelte/store';
import { browser } from '$app/environment';
let socket: WebSocket | null = null;
export const connected = writable(false);
function createSocket(): WebSocket {
if (!browser) {
return null;
}
if (socket) {
return socket;
}
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
socket = new WebSocket(`${protocol}//${location.host}/`);
socket.addEventListener('open', () => {
connected.set(true);
console.log('Connected to websocket server');
});
socket.addEventListener('close', () => {
connected.set(false);
console.log('Disconnected from websocket server');
});
return socket;
}
export const ws = writable(createSocket());

102
src/utils/webrtcUtil.ts Normal file
View File

@@ -0,0 +1,102 @@
import { onDestroy, onMount } from "svelte";
import { writable, get, type Writable } from "svelte/store";
import { WebRTCPeer } from "$lib/webrtc";
import { connected, ws } from "../stores/websocketStore";
import { room } from "../stores/roomStore";
export const error = writable(null);
export let peer: Writable<WebRTCPeer | null> = writable(null);
export let messages: Writable<string[]> = writable([]);
export let isRTCConnected: Writable<boolean> = writable(false);
export let dataChannelReady: Writable<boolean> = writable(false);
const callbacks = {
onConnected: () => {
console.log("Connected to peer");
isRTCConnected.set(true);
},
onMessage: (message: string | ArrayBuffer) => {
console.log("Received message:", message);
messages.set([...get(messages), `Peer: ${message}`]);
},
onDataChannelOpen: () => {
console.log("Data channel open");
dataChannelReady.set(true);
},
onNegotiationNeeded: async () => {
console.log("Negotiation needed");
await get(peer)?.createOffer();
},
onError: (error: any) => {
console.error("Error:", error);
messages.set([...get(messages), `Error: ${error}`]);
},
};
export async function handleMessage(event: MessageEvent) {
console.log("Message received:", event.data);
const message = JSON.parse(event.data);
switch (message.type) {
case "created":
console.log("Room created:", message.data);
room.set(message.data);
return;
case "joined":
console.log("Joined room:", message.data);
return;
case "error":
console.error("Error:", message.data);
error.set(message.data);
return;
case "ready":
const roomId = get(room);
if (!roomId) {
console.error("Room not set");
return;
}
peer.set(new WebRTCPeer(
roomId,
message.data.isInitiator,
callbacks,
));
await get(peer)?.initialize();
if (message.data.isInitiator) {
await get(peer)?.createOffer();
}
return;
default:
console.warn(`Unknown message type: ${message.type}`);
}
if (!get(peer)) {
console.error("Unknown message type:", message.type);
return;
}
switch (message.type) {
case "offer":
console.log("Received offer");
await get(peer)?.setRemoteDescription(
new RTCSessionDescription(message.data.sdp),
);
await get(peer)?.createAnswer();
return;
case "answer":
console.log("Received answer");
await get(peer)?.setRemoteDescription(
new RTCSessionDescription(message.data.sdp),
);
return;
case "ice-candidate":
console.log("Received ICE candidate");
await get(peer)?.addIceCandidate(message.data.candidate);
return;
default:
console.warn(
`Unknown message type: ${message.type} from ${get(room)}`,
);
}
}

34
src/websocket.ts Normal file
View File

@@ -0,0 +1,34 @@
import { WebSocketServer } from "ws";
import { confgiureWebsocketServer } from '../server/websocketHandler.ts';
import type { ViteDevServer } from "vite";
function createWebsocketViteWrapper(server: ViteDevServer) {
if (!server.httpServer) {
throw new Error("No httpServer found");
}
const result = new WebSocketServer({
noServer: true,
});
server.httpServer.on("upgrade", (req, socket, head) => {
// almost definitely HMR stuff, bail out before everything explodes
if (req.headers['sec-websocket-protocol']?.startsWith('vite')) {
return;
}
result.handleUpgrade(req, socket, head, (ws) => {
result.emit("connection", ws, req);
});
});
return result;
}
export const webSocketServer = {
name: "websocket",
configureServer: (server: ViteDevServer) => {
confgiureWebsocketServer(createWebsocketViteWrapper(server));
},
};