aethex.live/docs/WEBSOCKET_EXAMPLE.ts

72 lines
1.9 KiB
TypeScript

// Example: WebSocket Chat for Real-Time Messages
// This example uses socket.io which works great on Railway
import { Server as HTTPServer } from 'http';
import { Socket as ServerSocket } from 'socket.io';
import { createServer } from 'http';
interface Message {
id: string;
username: string;
message: string;
timestamp: string;
}
let messages: Message[] = [];
const maxMessages = 1000;
export async function initializeWebSocket(server: HTTPServer) {
const io = new (await import('socket.io')).Server(server, {
cors: {
origin: process.env.NODE_ENV === 'production'
? process.env.NEXT_PUBLIC_APP_URL || 'https://aethex.live'
: 'http://localhost:3000',
methods: ['GET', 'POST'],
},
});
io.on('connection', (socket: ServerSocket) => {
console.log(`User connected: ${socket.id}`);
// Send recent messages to new user
socket.emit('load-messages', messages);
// Handle incoming messages
socket.on('send-message', (data: { username: string; message: string }) => {
const { username, message } = data;
if (!username || !message || message.length > 500) {
socket.emit('error', 'Invalid message');
return;
}
const newMessage: Message = {
id: Math.random().toString(36).substring(7),
username,
message,
timestamp: new Date().toISOString(),
};
messages.push(newMessage);
if (messages.length > maxMessages) {
messages = messages.slice(-maxMessages);
}
// Broadcast to all connected users
io.emit('new-message', newMessage);
});
// Handle user disconnect
socket.on('disconnect', () => {
console.log(`User disconnected: ${socket.id}`);
});
});
return io;
}
// To use this:
// 1. Install: npm install socket.io
// 2. Create next.config.ts with WebSocket support
// 3. Create a WebSocket server in pages/api/socket.ts
// 4. In client, use socket.io-client to connect