preact-sockette v1.0.0
preact-sockette
A (303 byte gzip) Sockette component for Preact
This is a very light component that exposes sockette
's API via component properties.
Please note that (1) context.ws
is the active WebSocket
, (2) nothing is rendered to the DOM and (2) the WebSocket
is closed before unmounting!
This module exposes three module definitions:
- ES Module:
dist/preact-sockette.es.js
- CommonJS:
dist/preact-sockette.js
- UMD:
dist/preact-sockette.min.js
If using the UMD bundle, the library is exposed as preactSockette
globally.
Install
$ npm install --save preact-sockette
Usage
Quick example that wraps Sockette within a custom component.
import { h, Component } from 'preact';
import Sockette from 'preact-sockette';
class Foobar extends Component {
onOpen = ev => {
console.log('> Connected!', ev);
}
onMessage = ev => {
console.log('> Received:', ev.data);
}
onReconnect = ev => {
console.log('> Reconnecting...', ev);
}
sendMessage = _ => {
// WebSocket available in context!
this.context.ws.send('Hello, world!');
}
render() {
return (
<div class="demo">
<button onclick={ this.sendMessage }>SEND</button>
<Sockette
url="wss://..."
maxAttempts={ 25 }
onopen={ this.onOpen }
onmessage={ this.onMessage }
onreconnect={ this.onReconnect }
/>
</div>
);
}
}
Properties
Please see Sockette's Options — all props
are passed directly to sockette
.
url
Type: String
The URL you want to connect to — see Sockette's docs.
Context
The active WebSocket
is mounted to your component's context
as context.ws
. This means that you can programmatically interact with Sockette's API, including close()
, reconnect()
, send()
, etc.
When <Sockette/>
is unmounted, the WebSocket
is closed (ws.close()
) but the context.ws
instance is still populated. Dependning on your application, this may be useful for recycling callbacks — otherwise it can be safely ignored!
License
MIT © Luke Edwards
6 years ago