WebSocketWrapper Service

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(onError?: (error: Event) => void): 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	onError?: (error: Event) => void	Promise<WebSocketWrapper>	Initializes and establishes connection, with optional error callback
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