https://github.com/t34-dev/ts-ws-client
Robust TypeScript WebSocket client with auto-reconnection for React, Node.js, and web projects. Supports event handling and connection management.
https://github.com/t34-dev/ts-ws-client
node package react starter ts typescript web
Last synced: 6 months ago
JSON representation
Robust TypeScript WebSocket client with auto-reconnection for React, Node.js, and web projects. Supports event handling and connection management.
- Host: GitHub
- URL: https://github.com/t34-dev/ts-ws-client
- Owner: t34-dev
- License: isc
- Created: 2024-07-31T08:59:49.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-05T14:28:29.000Z (almost 2 years ago)
- Last Synced: 2025-03-20T03:03:55.777Z (over 1 year ago)
- Topics: node, package, react, starter, ts, typescript, web
- Language: TypeScript
- Homepage: https://t34-dev.github.io/ts-ws-client/
- Size: 146 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](http://copyfree.org)
# TypeScript WebSocket Client
A robust and flexible WebSocket client implementation in TypeScript, designed for use in React, Node.js, and web projects.
Based on https://github.com/t34-dev/ts-universal-package
- [Demo](https://t34-dev.github.io/ts-ws-client/)
## Features
- Easy-to-use WebSocket client implementation
- Automatic reconnection with exponential backoff
- Event-based architecture for easy integration
- TypeScript support for better developer experience
- Compatible with React, Node.js, and web projects
- Customizable logging and debugging options
## Installation
```bash
npm install @t34-dev/ts-ws-client
```
or
```bash
yarn add @t34-dev/ts-ws-client
```
## Usage
### Basic Example
Here's a basic example of how to use the WebSocket client:
```typescript
import { WebSocketClient } from '@t34-dev/ts-ws-client';
const client = new WebSocketClient({
connectionName: 'MyConnection',
url: 'wss://echo.websocket.org',
debugging: true,
onOpened: (info) => console.log('Connected:', info),
onClosed: (info) => console.log('Disconnected:', info),
onError: (info) => console.error('Error:', info),
onUpdate: (info) => console.log('Received:', info.data),
});
client.open();
// Send a message
client.sendMessage('Hello, WebSocket!');
// Close the connection
client.close();
```
### Node.js Example
Here's an example of how to use the WebSocket client in a Node.js environment:
```typescript
import { WebSocketClient } from '@t34-dev/ts-ws-client';
const client = new WebSocketClient({
connectionName: 'NodeConnection',
url: 'wss://echo.websocket.org',
debugging: true,
onOpened: (info) => {
console.log('Connected:', info);
// Send a message every 5 seconds
setInterval(() => {
client.sendMessage('Ping from Node.js');
}, 5000);
},
onClosed: (info) => console.log('Disconnected:', info),
onError: (info) => console.error('Error:', info),
onUpdate: (info) => console.log('Received:', info.data),
});
client.open();
// Handle process termination
process.on('SIGINT', () => {
console.log('Closing connection...');
client.close();
process.exit();
});
```
### React Example
Here's an example of how to use the WebSocket client in a React component:
```tsx
import React, { useEffect, useState } from 'react';
import { WebSocketClient } from '@t34-dev/ts-ws-client';
const WebSocketComponent: React.FC = () => {
const [client, setClient] = useState(null);
const [messages, setMessages] = useState([]);
useEffect(() => {
const wsClient = new WebSocketClient({
connectionName: 'ReactConnection',
url: 'wss://echo.websocket.org',
debugging: true,
onOpened: (info) => console.log('Connected:', info),
onClosed: (info) => console.log('Disconnected:', info),
onError: (info) => console.error('Error:', info),
onUpdate: (info) => {
setMessages((prevMessages) => [...prevMessages, info.data as string]);
},
});
setClient(wsClient);
wsClient.open();
return () => {
wsClient.close();
};
}, []);
const sendMessage = () => {
if (client) {
client.sendMessage('Hello from React!');
}
};
return (
Send Message
{messages.map((message, index) => (
- {message}
))}
);
};
export default WebSocketComponent;
```
## API
### `WebSocketClient`
The main class for creating and managing WebSocket connections.
#### Constructor
```typescript
new WebSocketClient(options: WebSocketOptions)
```
- `options`: Configuration options for the WebSocket client
#### Methods
- `open()`: Opens the WebSocket connection
- `close()`: Closes the WebSocket connection
- `breakConnection()`: Forcibly breaks the connection
- `sendMessage(data: string)`: Sends a message through the WebSocket
- `subscribe(data: string)`: Subscribes to a topic (stores the request)
- `unsubscribe(data: string)`: Unsubscribes from a topic
- `getInfo()`: Returns current connection information
- `getStoredRequests()`: Returns the set of stored requests
- `clearStoredRequests()`: Clears all stored requests
## Development
To set up the development environment:
1. Clone the repository
2. Install dependencies: `npm install` or `yarn install`
3. Run tests: `npm test` or `yarn test`
4. Build the package: `npm run build` or `yarn build`
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the ISC License.
## Links
- [GitHub Repository](https://github.com/t34-dev/ts-ws-client)
- [npm Package](https://www.npmjs.com/package/@t34-dev/ts-ws-client)
- [Demo](https://t34-dev.github.io/ts-ws-client/)
---
Developed with ❤️ by [T34](https://github.com/t34-dev)