mirror of
https://github.com/Nezumi-2711/websocket-demo.git
synced 2026-09-22 05:41:47 +00:00
140 lines
3.2 KiB
Markdown
140 lines
3.2 KiB
Markdown
# 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).
|