Make WebSocket URL configurable using data attributes

[Copilot]

The WebSocket URL in ChatPage.ts was hardcoded to ws://localhost:3000/ws, which only worked in development environments. This change makes the WebSocket URL configurable to support deployment in different environments (development, staging, production).

Changes Made

Server-side (ChatPage.tsx):

• Added optional wsUrl parameter to ChatPage component
• Added data-ws-url attribute to pass WebSocket URL from server to client
• Falls back to default ws://localhost:3000/ws for backward compatibility

Route handler (index.tsx):

• Modified index route to construct appropriate WebSocket URL based on request
• Automatically detects protocol: ws:// for HTTP requests, wss:// for HTTPS requests
• Preserves host and port from the original request

Client-side (ChatPage.ts):

• Updated to read WebSocket URL from data-ws-url attribute instead of hardcoded value
• Follows existing pattern used for CSS classes

Technical Implementation

The solution uses the existing data attribute pattern for consistency with the current architecture:

// Server-side: construct URL based on request
const url = new URL(c.req.url);
const protocol = url.protocol === "https:" ? "wss:" : "ws:";
const wsUrl = `${protocol}//${url.host}/ws`;

// Client-side: read from data attribute
const wsUrl = container.getAttribute("data-ws-url") as string;
const ws = new WebSocket(wsUrl);

Environment Support

This change enables the application to work across different deployment scenarios:

• Development: ws://localhost:3000/ws
• Staging: ws://staging.myapp.com/ws
• Production: wss://myapp.com/ws (automatically uses secure WebSocket for HTTPS)

Testing

• ✅ All existing tests pass (17/17)
• ✅ Added comprehensive tests for WebSocket URL configuration
• ✅ Manual testing confirms WebSocket connection works correctly
• ✅ Verified message sending/receiving functionality


The screenshot shows the chat interface with a successful WebSocket connection (green "Connected" status), demonstrating that the configurable WebSocket URL works correctly.

Fixes #40.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.