All Demos
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import express from "express";
import { createServer } from "http";
import { WebSocketServer } from "ws";

const app = express();
const server = createServer(app);
const wss = new WebSocketServer({ server });

"color:#6a9955">// Configuration
const PORT = process.env.PORT || 3000;
const MAX_CONNECTIONS = 100;

interface Client {
  id: string;
  name: string;
  socket: WebSocket;
  joinedAt: Date;
}

const clients: Map<string, Client> = new Map();

"color:#6a9955">// Generate unique ID
function generateId(): string {
  return Math.random().toString(36).substring(2, 9);
}

"color:#6a9955">// Broadcast to all connected clients
function broadcast(message: object, exclude?: string) {
  const data = JSON.stringify(message);
  for (const [id, client] of clients) {
    if (id !== exclude) {
      client.socket.send(data);
    }
  }
}

wss.on("connection", (socket) => {
  if (clients.size >= MAX_CONNECTIONS) {
    socket.close(1013, "Server is full");
    return;
  }

  const id = generateId();
  const client: Client = {
    id,
    name: `User ${clients.size + 1}`,
    socket: socket as unknown as WebSocket,
    joinedAt: new Date(),
  };

  clients.set(id, client);
  console.log(`Client connected: ${id}`);

  "color:#6a9955">// Welcome message
  socket.send(JSON.stringify({
    type: "welcome",
    clientId: id,
    online: clients.size,
  }));

  broadcast({ type: "join", clientId: id }, id);

  socket.on("message", (raw) => {
    try {
      const msg = JSON.parse(raw.toString());
      broadcast({ ...msg, from: id }, id);
    } catch {
      "color:#6a9955">// Invalid JSON, ignore
    }
  });

  socket.on("close", () => {
    clients.delete(id);
    broadcast({ type: "leave", clientId: id });
  });
});

app.get("/health", (_, res) => {
  res.json({ status: "ok", connections: clients.size });
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});
Ln 1, Col 1TypeScriptUTF-8
84 lines
View Prompt

Create a code editor with syntax highlighting for JavaScript/TypeScript. Include: line numbers, a file tab bar with multiple open files, a minimap-style scrollbar, bracket matching highlights, a bottom status bar showing line/col/language/encoding, and a command palette triggered by Ctrl+K. Support multiple themes (light/dark/monokai). Render syntax highlighting using regex tokenization. Use monospace font, no external libraries.

Built with Claude Opus 4.6