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

improve websocket typing

Browse Source
This commit is contained in:
Zoe
2025-09-16 15:50:12 +00:00
parent cad5d6d98e
commit 80b83a8e93
14 changed files with 426 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/routes/[roomId]/+page.svelte
View File

@@ -2,7 +2,7 @@
import { onMount } from "svelte";
import { room } from "$stores/roomStore";
import { WebsocketConnectionState, ws } from "$stores/websocketStore";
import { WebSocketMessageType } from "$types/websocket";
import { RoomStatusType, WebSocketRequestType, WebSocketResponseType } from "$types/websocket";
import { dataChannelReady, error } from "$lib/webrtcUtil";
import { goto } from "$app/navigation";
import RtcMessage from "$components/RTCMessage.svelte";
@@ -47,10 +47,12 @@
}
ws.send({
type: WebSocketMessageType.JOIN_ROOM,
type: WebSocketRequestType.ROOM_JOIN,
roomId: roomId!,
nonce: challengeResult.nonce,
challenge: challengeResult.challenge,
challenge: {
target: challengeResult.target,
nonce: challengeResult.nonce,
}
});
}
@@ -62,11 +64,7 @@
}
function handleLeave() {
if (
confirm(
"Are you sure you want to leave? The chat history will be deleted.",
)
) {
if (confirm("Are you sure you want to leave? The chat history will be deleted.")) {
// In a real app, this would disconnect the P2P session and redirect.
window.location.href = "/";
}
@@ -85,24 +83,23 @@
let challengeResult = await doChallenge(roomId);
if (challengeResult) {
let unsubscribe = ws.handleEvent(
WebSocketMessageType.ROOM_STATUS,
(value) => {
if (value.status === "found") {
unsubscribe();
roomExists = true;
} else if (value.status === "not-found") {
unsubscribe();
roomExists = false;
}
},
);
let unsubscribe = ws.handleEvent(WebSocketResponseType.ROOM_STATUS, (value) => {
if (value.status === RoomStatusType.OPEN) {
unsubscribe();
roomExists = true;
} else if (value.status === RoomStatusType.NOT_FOUND) {
unsubscribe();
roomExists = false;
}
});
ws.send({
type: WebSocketMessageType.CHECK_ROOM_EXISTS,
type: WebSocketRequestType.ROOM_STATUS,
roomId: roomId,
nonce: challengeResult.nonce,
challenge: challengeResult.challenge,
challenge: {
target: challengeResult.target,
nonce: challengeResult.nonce,
}
});
}
}
@@ -115,32 +112,28 @@
Something went wrong: {$error.toLocaleLowerCase()}
</h2>
<p class="!text-paragraph">
click <a href="/">here</a> to go back to the homepage
click <a href="/">here</a>
to go back to the homepage
</p>
{/if}
{#if !$error}
{#if isHost}
{#if !$room.RTCConnectionReady}
<h2 class="text-3xl font-bold text-white mb-2">
Your secure room is ready.
</h2>
<h2 class="text-3xl font-bold text-white mb-2">Your secure room is ready.</h2>
<p class="text-gray-400 mb-6 text-center">
Share the link below to invite someone to chat directly with
you. Once they join, you will be connected automatically.
Share the link below to invite someone to chat directly with you. Once they
join, you will be connected automatically.
</p>
<div
class="bg-gray-900 rounded-lg p-4 flex items-center justify-between gap-4 border border-gray-600"
>
<span
class="text-accent font-mono text-sm overflow-x-auto whitespace-nowrap"
>{roomLink}</span
>
class="bg-gray-900 rounded-lg p-4 flex items-center justify-between gap-4 border border-gray-600">
<span class="text-accent font-mono text-sm overflow-x-auto whitespace-nowrap">
{roomLink}
</span>
<button
onclick={handleCopyLink}
class="bg-accent hover:bg-accent/80 active:bg-accent/60 cursor-pointer text-gray-900 font-bold py-2 px-4 rounded-md transition-colors whitespace-nowrap"
>
class="bg-accent hover:bg-accent/80 active:bg-accent/60 cursor-pointer text-gray-900 font-bold py-2 px-4 rounded-md transition-colors whitespace-nowrap">
{copyButtonText}
</button>
</div>
@@ -150,35 +143,31 @@
{:else if awaitingJoinConfirmation}
{#if $ws.status !== WebsocketConnectionState.CONNECTED || roomExists === undefined}
<h2 class="text-3xl font-bold text-white mb-2">
<span class="flex items-center"
><LoadingSpinner size="24" /> Connecting to server...</span
>
<span class="flex items-center">
<LoadingSpinner size="24" /> Connecting to server...
</span>
</h2>
<p class="!text-paragraph">
click <a href="/">here</a> to go back to the homepage
click <a href="/">here</a>
to go back to the homepage
</p>
{:else if roomExists === false}
<h2 class="text-3xl font-bold text-white mb-2">
That room does not exist.
</h2>
<h2 class="text-3xl font-bold text-white mb-2">That room does not exist.</h2>
<p class="!text-paragraph">
click <a href="/">here</a> to go back to the homepage
click <a href="/">here</a>
to go back to the homepage
</p>
{:else}
<h2 class="text-3xl font-bold text-white mb-2">
You're invited to chat.
</h2>
<h2 class="text-3xl font-bold text-white mb-2">You're invited to chat.</h2>
<div class="flex flex-row gap-2">
<button
onclick={handleConfirmJoin}
class="bg-accent hover:bg-accent/80 active:bg-accent/60 cursor-pointer text-gray-900 font-bold py-2 px-4 rounded-md transition-colors whitespace-nowrap"
>
class="bg-accent hover:bg-accent/80 active:bg-accent/60 cursor-pointer text-gray-900 font-bold py-2 px-4 rounded-md transition-colors whitespace-nowrap">
Accept
</button>
<button
onclick={handleDeclineJoin}
class="bg-red-400 hover:bg-red-400/80 active:bg-red-400/60 cursor-pointer text-gray-900 font-bold py-2 px-4 rounded-md transition-colors whitespace-nowrap"
>
class="bg-red-400 hover:bg-red-400/80 active:bg-red-400/60 cursor-pointer text-gray-900 font-bold py-2 px-4 rounded-md transition-colors whitespace-nowrap">
Decline
</button>
</div>