Private
Public Access
ksmithandClaude Sonnet 5
f43cf61ddd
React StrictMode double-invokes the effect that opens the chat WebSocket in dev (mount -> cleanup -> mount again, on purpose, to catch exactly this class of bug). The first socket gets abandoned in cleanup, but its onclose still fires asynchronously afterward -- and unconditionally ran `socketRef.current = null`, even after the second (real) socket had already taken over. That silently orphaned a perfectly live connection: still open and receiving broadcasts fine, but nothing left holding a reference to send on, so outgoing messages/edits went nowhere with no visible error. Found via manual testing: messages sent through the UI weren't appearing, but a raw WebSocket opened by hand (bypassing React entirely) joined and sent a message successfully, isolating the bug to the reconnect logic rather than the backend. Fix: each socket's onopen/onclose now checks it's still the one referenced by socketRef before mutating shared state, so a stale/superseded socket's events are inert instead of clobbering whatever socket is actually current. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
KeepItTalking frontend (Phase 1)
React + Vite PWA. Login, room list, and chat views wired to the backend's
REST API and /ws/chat WebSocket endpoint. See ../README.md
and ../backend/README.md for full local setup.
Dev
npm install
npm run dev
The dev server proxies /api and /ws to http://localhost:8000 (see
vite.config.ts), so the backend must be running for anything beyond the
login page to work.
Build
npm run build
Generates the PWA manifest and service worker via vite-plugin-pwa into dist/.
Layout
src/
main.tsx, App.tsx routes: /login, /rooms, /rooms/:roomId
api/ fetch wrappers (client, auth, rooms)
ws/useChatSocket.ts WebSocket hook (join/send/receive)
context/AuthContext.tsx current-user state, hydrated via GET /api/auth/me
components/ ProtectedRoute, RoomListItem, MessageList, MessageInput
pages/ LoginPage, RoomListPage, ChatRoomPage