Connect MCS with WebSocket

Usage no npm install needed!

<script type="module">
  import mcsLiteConnect from '';



Connect MCS with WebSocket.


$ npm i mcs-lite-connect --save


connectSocket is a higher-order components based on recompose and W3CWebSocket. It will handle websocket lifecycle for your React component.

import { connectSocket } from 'mcs-lite-connect';

const Component = connectSocket(
  // 1. urlMapper => (ownerProps: Object) => string
  props =>
    'ws://localhost:8000/deviceId/12345/deviceKey/' + props.key,

  // 2. onMessage => (ownerProps: Object) => datapoint => void
  props =>
    datapoint => props.setDatapoint(props.deviceId, datapoint),

  // 3. propsMapper => state => props
  ({ readyState, send, createWebSocket }) => ({
    isWebSocketClose: readyState.sender === 3,
    reconnect: createWebSocket,


urlMapper => (ownerProps: Object) => string

Set the URL to be connected. There are two connections:

  • Sender : The Send-Only connection via ${URL}.
  • Viewer : The Read-Only connection via ${URL}/viewer.

onMessage => (ownerProps: Object) => datapoint => void

The callback function of Viewer. It will be invoked when receiving messages (datapoint) from the server.

propsMapper => state => props

A function that maps internal state to a new collection of props that are passed to the base component. There are three states:

  • send(payload: String) : Immediately sends the specified payload (datapoint) to server.
  • readyState: Ready state constants.
  • createWebSocket: A convenience function for reconnecting.

Inspired by