Create WebSocket Server

- Created a WebSocket server with connection handling and message broadcasting
- Added frontend files including HTML, TypeScript, and CSS for a WebSocket test client
- Configured package.json for both server and frontend with necessary scripts and dependencies
- Introduced Prettier configuration for code formatting
- Established a basic structure for handling WebSocket connections and messages
This commit is contained in:
2025-09-05 23:44:28 -04:00
parent 7733ef2488
commit d8fe4a9dc6
23 changed files with 2180 additions and 39 deletions

13
frontend/web/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

15
frontend/web/package.json Normal file
View File

@@ -0,0 +1,15 @@
{
"name": "web",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"devDependencies": {
"typescript": "~5.8.3",
"vite": "^7.1.2"
}
}

13
frontend/web/src/main.ts Normal file
View File

@@ -0,0 +1,13 @@
const webSocket = new WebSocket('http://localhost:3000');
webSocket.onerror = (e: Event) => {
console.error(`${new Date().toISOString()} [WebSocket] error [%o]`, e);
};
webSocket.onopen = () => {
console.log(`${new Date().toISOString()} [WebSocket] open`);
};
webSocket.onmessage = () => {
console.log(`${new Date().toISOString()} [WebSocket] message!`);
};

View File

@@ -0,0 +1,4 @@
body {
margin: 0px;
padding: 0px;
}

1
frontend/web/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

View File

@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2022",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}