61 lines
1.1 KiB
Markdown
61 lines
1.1 KiB
Markdown
# Nuxt 3 WebSocket Client Example
|
|
|
|
This is an example Nuxt 3 application that demonstrates how to connect to and communicate with the Go WebSocket server.
|
|
|
|
## Setup
|
|
|
|
1. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Start the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
3. Open your browser and navigate to `http://localhost:3000`
|
|
|
|
## Configuration
|
|
|
|
The WebSocket URL can be configured in `nuxt.config.ts`:
|
|
|
|
```typescript
|
|
runtimeConfig: {
|
|
public: {
|
|
websocketUrl: process.env.WEBSOCKET_URL || 'ws://localhost:8080/api/v1/ws'
|
|
}
|
|
}
|
|
```
|
|
|
|
You can also set the `WEBSOCKET_URL` environment variable.
|
|
|
|
## Usage
|
|
|
|
The example page (`pages/index.vue`) shows:
|
|
|
|
- Connection status
|
|
- Sending messages to the server
|
|
- Receiving and displaying messages from the server
|
|
|
|
## WebSocket Message Format
|
|
|
|
Messages are sent and received in JSON format:
|
|
|
|
```json
|
|
{
|
|
"type": "message",
|
|
"data": "Your message content",
|
|
"timestamp": "2024-01-01T00:00:00Z",
|
|
"client_id": "unique-client-id"
|
|
}
|
|
```
|
|
|
|
## Features
|
|
|
|
- Automatic connection on page load
|
|
- Real-time message display
|
|
- Connection status indicator
|
|
- Error handling
|
|
- Clean disconnection on page unload
|