@lawcket/react-websocket

@lawcket/react-websocket

A slim Websocket implementation for React 16+. The libray uses the standard browser WebSocket so 'should' be supported in React-Native.

Installation

npm install --save @lawcket/react-websocket

or

yarn add @lawcket/react-websocket

Usage

Example:

import React, { useState } from 'react';
import Websocket from '@lawcket/react-websocket';

const Messages = () => {
  const [messages, addMessage] = useState([]);
  return (
    <Websocket 
      url='wss://...' 
      retry
      onOpen={({ send }) => console.log('open')}
      onClose={({ code, reason }) => console.log('closed', code, reason)}
      onMessage={({ send, data }) => console.log('message', data)}
      onError={(error) => console.log('error', error)} >
      {({ send, close }) => {
        return (
            <pre>{JSON.stringify(messages, null, 2)}</pre>
        );
      }}
    </Websocket>
  );
}

PropTypes

Name	Type	Description	Default
url	string	The websocket url to connect to
protocol	string	The protocol for the websocket to use
retry	boolean	If an error occurs, should it reconnect	true
onOpen	function	Notifies when the connection has been opened
onMessage	function	Notifies when an incoming message has been received
onClose	function	Notifies the connection was closed
onError	function	Notifies of an error with the connection, will close the connection

onOpen

Parameter	Type	Description
send	function(any)	A function to send data to the server

onMessage

Parameter	Type	Description
data	any	Incoming message (usually stringified JSON data)
send	function(any)	A function to send data to the server

onError

Parameter	Type	Description
error	Error	The error that occured during connection or usage

onClose

Reference: Close codes & reasons

Parameter	Type	Description
code	number	The close code sent by the server
reason	string	The reason the connection was closed