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

import { Component, createElement } from "react";
import createSocket from "sockette-component";

const Sockette = createSocket({
  Component,
  createElement
});

class Foobar extends Component {
  state = {
    socket: null
  };

  onOpen = ev => {
    console.log("> Connected!", ev);
  };

  onMessage = ev => {
    console.log("> Received:", ev.data);
  };

  onReconnect = ev => {
    console.log("> Reconnecting...", ev);
  };

  sendMessage = _ => {
    // WebSocket available in state!
    this.state.ws.send("Hello, world!");
  };

  render() {
    return (
      <div class="demo">
        <button onClick={this.sendMessage}>SEND</button>

        <Sockette
          url="wss://..."
          getSocket={socket => {
            this.setState({socket});
          }}
          maxAttempts={25}
          onopen={this.onOpen}
          onmessage={this.onMessage}
          onreconnect={this.onReconnect}
        />
      </div>
    );
  }
}

Using with Preact

import { h, Component } from "preact";
import Sockette from "sockette-component";

const Sockette = createSocket({
  Component,
  createElement: h
});

class Foobar extends Component {
  state = {
    socket: null
  };

  onOpen = ev => {
    console.log("> Connected!", ev);
  };

  onMessage = ev => {
    console.log("> Received:", ev.data);
  };

  onReconnect = ev => {
    console.log("> Reconnecting...", ev);
  };

  sendMessage = _ => {
    // WebSocket available in state!
    this.state.ws.send("Hello, world!");
  };

  render() {
    return (
      <div class="demo">
        <button onClick={this.sendMessage}>SEND</button>

        <Sockette
          url="wss://..."
          getSocket={socket => {
            this.setState(socket);
          }}
          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 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()).