first commit

2026-09-22 20:02:29 +00:00 · 2025-08-20 16:33:11 +07:00
commit 13caefcbb3
20 changed files with 4218 additions and 0 deletions
@@ -0,0 +1,139 @@
+# WebSocket Demo with Next.js
+
+This project demonstrates real-time communication using WebSocket with a Next.js frontend and a standalone WebSocket server.
+
+## Features
+
+- Real-time messaging between multiple clients
+- Connection status indicator
+- Message history with timestamps
+- Sender name customization
+- Responsive design with Tailwind CSS
+
+## Project Structure
+
+```
+src/
+├── app/
+│   ├── page.tsx          # Main page component
+│   └── layout.tsx        # App layout
+├── components/
+│   └── WebSocketDemo.tsx # WebSocket client component
+server/
+└── websocket.js          # WebSocket server
+```
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js (version 18 or higher)
+- pnpm (recommended) or npm
+
+### Installation
+
+1. Install dependencies:
+```bash
+pnpm install
+```
+
+### Running the Application
+
+#### Option 1: Run both servers simultaneously (Recommended)
+```bash
+pnpm run dev:all
+```
+
+This will start:
+- Next.js development server on http://localhost:3000
+- WebSocket server on ws://localhost:8080
+
+#### Option 2: Run servers separately
+
+1. Start the WebSocket server:
+```bash
+pnpm run ws-server
+```
+
+2. In another terminal, start the Next.js development server:
+```bash
+pnpm run dev
+```
+
+### Usage
+
+1. Open [http://localhost:3000](http://localhost:3000) in your browser
+2. Enter your name (optional)
+3. Click "Connect" to establish WebSocket connection
+4. Start sending messages
+5. Open multiple browser tabs/windows to test real-time messaging between clients
+
+## WebSocket Server Details
+
+The WebSocket server (`server/websocket.js`) provides:
+
+- Connection management for multiple clients
+- Message broadcasting to all connected clients
+- Welcome messages for new connections
+- Error handling and logging
+
+### Message Format
+
+Messages sent between client and server follow this JSON structure:
+
+```json
+{
+  "type": "broadcast",
+  "message": "Hello, World!",
+  "sender": "John Doe",
+  "timestamp": "2025-08-20T10:30:00.000Z"
+}
+```
+
+## Technologies Used
+
+- **Next.js 15** - React framework
+- **React 19** - UI library
+- **TypeScript** - Type safety
+- **Tailwind CSS** - Styling
+- **ws** - WebSocket library
+- **WebSocket API** - Browser WebSocket implementation
+
+## Development
+
+### Scripts
+
+- `pnpm run dev` - Start Next.js development server
+- `pnpm run build` - Build for production
+- `pnpm run start` - Start production server
+- `pnpm run ws-server` - Start WebSocket server
+- `pnpm run dev:all` - Start both servers simultaneously
+- `pnpm run lint` - Run ESLint
+
+### Customization
+
+You can customize the WebSocket server by modifying `server/websocket.js`:
+
+- Change the port (default: 8080)
+- Add authentication
+- Implement different message types
+- Add message persistence
+- Implement rooms/channels
+
+## Troubleshooting
+
+### Connection Issues
+
+If you can't connect to the WebSocket server:
+
+1. Ensure the WebSocket server is running on port 8080
+2. Check if the port is already in use by another application
+3. Verify firewall settings allow connections on port 8080
+
+### CORS Issues
+
+If running in production, you may need to configure CORS settings for the WebSocket server.
+
+## License
+
+This project is open source and available under the [MIT License](LICENSE).