antrean-anjungan/examples/nuxt3-websocket-client

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:

npm install

2. Start the development server:

npm run dev

3. Open your browser and navigate to http://localhost:3000

Configuration

The WebSocket URL can be configured in nuxt.config.ts:

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:

{
  "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