sockette-component
A (367 byte gzip) Sockette component for React and Preact
Note: This is a component factory for binding Lukeed's sockette library to react and preact.
This is a very light component that exposes sockette
's API via component properties.
Please note that (1) nothing is rendered to the DOM and (2) the WebSocket
is closed before unmounting!
This module exposes three module definitions:
- ES Module:
dist/sockette-component.es.js
- CommonJS:
dist/sockette-component.js
- UMD:
dist/sockette-component.min.js
If using the UMD bundle, the library is exposed as socketteComponent
globally.
Install
$ npm install --save sockette-component
Usage
Quick example that wraps Sockette within a custom component.
Using with React
;; const Socket = ; state = socket: null ; { console; }; { console; }; { console; }; { // WebSocket available in state! thissttews; }; { return <div class="demo"> <button onclick=thissendMessage>SEND</button> <Sockette url="wss://..." getSocket= { this; } maxAttempts=25 onopen=thisonOpen onmessage=thisonMessage onreconnect=thisonReconnect /> </div> ; }
Using with Preact
;; const Socket = ; state = socket: null ; { console; }; { console; }; { console; }; { // WebSocket available in state! thisstatews; }; { return <div class="demo"> <button onclick=thissendMessage>SEND</button> <Sockette url="wss://..." getSocket= { this; } maxAttempts=25 onopen=thisonOpen onmessage=thisonMessage onreconnect=thisonReconnect /> </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 sent on mount of Socket component by calling getSocket
prop callback. You can save it by any means via providing a getSocket
prop as shown in the example above. 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()
).
License
MIT © Farzad YZ