cycle-ws-driver's Introduction

Cycle.js WebSocket Driver

A Cycle.js Driver for using WebSockets in the browser (RxJS).

npm install --save cycle-ws-driver

Usage

Basic setup

import { run } from '@cycle/run';
import { makeWebSocketDriver } from 'cycle-ws-driver';

function main({ ws }) {
  ...
}

const drivers = {
  ws: makeWebSocketDriver('ws://localhost:8000')
}

Cycle.run(main, drivers);

Normal usecase (with RxJS)

function main({DOM, ws}) {
  const messages$ = ws.scan((acc, m) => [...acc, m], [])
  // messages$: ---[]--['message 1']--['message 1', 'message 2']-->
  const formSubmit$ = DOM.select('#form').events('submit').do(e => e.preventDefault())
  const messageInput$ = DOM.select('#message').events('input').map(e => e.target.value)
  const sendMessage$ = formSubmit$
    .withLatestFrom(messageInput$, (e, message) => message)

  const vtree$ = messages$
    .startWith([])
    .map(messages =>
      <div>
        <ul>
          { messages && messages.map(message =><li>{message}</li>) }
        </ul>
        <form id="form" action="">
          <input id="message" type="text" placeholder="Type a message..." />
          <input type="submit" value="Send" />
        </form>
      </div>
    )
   
    return {
      DOM: vtree$,
      ws: sendMessage$
    }
}