WebSocketWrapper

A Service class for managing WebSocket connections with promise-based operations and automatic lifecycle management. Perfect for real-time communication, live updates, and bidirectional data exchange in web applications.

Features

• Promise-based API: Modern async/await compatible interface
• Automatic Connection Management: Built-in connection state tracking
• Error Handling: Comprehensive error catching and logging
• Interactive Logging: Console feedback for debugging
• Connection Validation: URL validation and connection state checks
• Clean Resource Management: Proper connection cleanup and disposal

Service Reference

WebSocketWrapper Methods

The wrapper provides a complete set of methods for WebSocket lifecycle management:

ws.setURL(url: string): void
ws.init(): Promise<WebSocketWrapper>
ws.onMessage(callback: (message: string) => void): Promise<WebSocketWrapper>
ws.sendMessage(message: string): Promise<void>
ws.close(): void
ws.getConnectionStatus(): boolean

Method Parameters

Method	Parameters	Returns	Description
setURL	url: string	void	Sets the WebSocket connection URL
init	-	Promise<WebSocketWrapper>	Initializes and establishes connection
onMessage	callback: (message: string) => void	Promise<WebSocketWrapper>	Sets up message handler
sendMessage	message: string	Promise<void>	Sends message through connection
close	-	void	Closes connection and cleans up
getConnectionStatus	-	boolean	Returns current connection status

Usage Examples

Basic WebSocket Connection

import WebSocketWrapper from './WebSocketWrapper';

const ws = new WebSocketWrapper();

// Establish connection
ws.setURL('ws://localhost:8080');
ws.init()
  .then(() => {
    console.log('WebSocket ready!');
  })
  .catch((error) => {
    console.error('Connection failed:', error);
  });

Message Handling

// Set up message handler
ws.onMessage((message) => {
  console.log('Received:', message);
  
  // Handle JSON messages
  try {
    const data = JSON.parse(message);
    processIncomingData(data);
  } catch (error) {
    console.log('Plain text message:', message);
  }
});

// Send messages
ws.sendMessage('Hello, server!')
  .then(() => console.log('Message sent'))
  .catch((error) => console.error('Send failed:', error));

Method Chaining

const ws = new WebSocketWrapper();

ws.setURL('wss://api.example.com/ws');
ws.init()
  .then(() => ws.onMessage(handleMessage))
  .then(() => ws.sendMessage(JSON.stringify({ type: 'connect', user: 'john' })))
  .catch(console.error);

function handleMessage(message: string) {
  const data = JSON.parse(message);
  updateUI(data);
}

Connection Status Monitoring

// Check connection before sending
if (ws.getConnectionStatus()) {
  ws.sendMessage('Status update');
} else {
  console.log('Cannot send - not connected');
}

// Periodic status check
setInterval(() => {
  const status = ws.getConnectionStatus() ? 'Connected' : 'Disconnected';
  console.log(`WebSocket Status: ${status}`);
}, 5000);

Error Types

• URL Not Set: Attempting to connect without setting URL
• Already Initialized: Multiple initialization attempts
• Connection Failed: Network or server issues
• Send Without Connection: Message sent while disconnected
• Invalid Message: Transmission errors

Best Practices

• Always set URL before initializing connection
• Handle promise rejections for all async operations
• Check connection status before sending messages
• Set up message handlers before sending data
• Close connections when component unmounts
• Implement reconnection logic for production apps