Home

Awesome

Cycle Net

Driver and router component for manage HTT(P)/WS(S)/socket.io services with Cycle.js

Installation with NPM

npm i cycle-net --save

HTTP/HTTPS Driver

makeNetDriver(httpServer(config))

Create the driver

Arguments

Basic usage


const {run} = require('@cycle/run');
const { makeNetDriver, httpServer } = require('cycle-net');

function main(sources){

  const {httpServer} = sources;

  const sinks = {

  }
  return sinks;
}

const drivers = {
  httpServer: makeNetDriver(httpServer())
}

run(main,drivers)

Create a HTTP Server Instance

To create a server instance, we need to send a config stream to the httpServer output. Like this :

    const httpCreate$ = xs.of({
        id: 'http',
        action: 'create',
        config:{
            port: 1983
        }
    });

    const sinks = {
       httpServer: httpCreate$
    }

create action config:

Basic example with HTTPS

     const securedConfig = {
        key: fs.readFileSync(`${__dirname}/certs/key.pem`),
        cert: fs.readFileSync(`${__dirname}/certs/cert.pem`)
    };

    const httpsCreate$ = xs.of({
        id: 'https',
        action: 'create',
        config:{
            port: 1984
        },
        secured: true,
        securedConfig
    });

Close server instance

To close a server instance we need to send a config stream to the httpServer output.

    const httpClose$ = xs.of({
        action: 'close',
        id: 'http',
    });

    const sinks = {
       httpServer: httpClose$
    }

create action config:

Select a server stream with select(id)

Select the server width this specific id

Return Object

   const http = httpServer.select('http');

Get events with event(name)

Get event with name stream from a httpobject.

   const http = httpServer.select('http');
   const httpReady$ = http.events('ready');
   const httpRequest$ = http.events('request');

Return Stream

Event ready

Dispatched when the server is ready to listen.

Returned values :

Event request

Dispatched when the server received a request. See Request object above.

Request object

Properties

Responseobject

Methods

send()

Format response for driver output.

Arguments

Return formatted object for driver output

json()

Format response in json. See send()

text()

Format response in plain text. See send()

html()

Format response in html. See send()

render()

Format response with the render engine defined in makeHttpServerDriver() options.

redirect()

Format response redirection for driver output.

Arguments

Return formatted object for driver output

Basic Usage


const {run} = require('@cycle/run');
const { makeNetDriver, httpServer } = require('cycle-net');


function main(sources){

  const {httpServer} = sources;

  // get http source
  const http = httpServer.select('http');
  // get requests
  const serverRequest$ = http.events('request');

  // create the http server
  const httpCreate$ = xs.of({
    id: 'http',
    action: 'create',
    config:{
        port: 1983
    }
  });

  // response formated with a helper response object
  // Response in text format : 'covfefe'
  const response$ = serverRequest$.map( req => req.response.text('covfefe') );

  const sinks = {
    httpServer: xs.merge(httpCreate$,response$)
  }
  return sinks;
}

const drivers = {
    httpServer: makeNetDriver(httpServer())
}

run(main,drivers)

Routing

A Router component using switch-path

Arguments

Router(sources,routes)

Return stream

Example

    const { makeNetDriver, httpServer, httpRouter } = require('cycle-net');

    function main(sources) {
        const { httpServer } = sources;

        // get http source
        const http = httpServer.select('http');

        // create the http server
        const httpCreate$ = xs.of({
            id: 'http',
            action: 'create',
            config:{
                port: 1983
            }
        });

        // get requests
        const httpsServerRequest$ = https.events('request');

        const httpsRouter$ = httpRouter({ ...sources, request$: httpsServerRequest$ }, {
            '/': sources => Page({ ...sources, props$: xs.of({ desc: 'home' }) }),
            '/user/:id': id => sources => Page(Object.assign({}, sources, { props$: xs.of({ desc: `user/${id}` }) })),
        });

        const sinks = {
            httpServer: xs.merge(httpCreate$, router$.map(c => c.httpServer).flatten()),
        };
        return sinks;
    }

     function Page(sources) {
        const { request$, props$ = xs.of({ appPath: null }) } = sources;
        const sinks = {
            httpResponse:  xs.combine(props$, request$).map(([props, req]) => req.response.text(props.desc))
        }
        return sinks;
    }

Cooking with middlewares

Here are discribed two usefull express middlewares.

serveStatic

It is used to serve static files ( images, css, etc... )

Basic usage

const serveStatic = require('serve-static');
const { makeNetDriver, httpServer } = require('cycle-net');

const drivers = {
  httpServer: makeNetDriver(httpServer({middlewares:[serveStatic('./public')]})
}

bodyParser

It is used to parse request body and return a full formated body.

Basic usage

const bodyParser = require('body-parser');
const { makeNetDriver, httpServer } = require('cycle-net');

const drivers = {
  httpServer: makeNetDriver(httpServer({
      middlewares: [
          // two parsers used to format body POST request in json
          bodyParser.urlencoded({ extended: true }),
          bodyParser.json()
      ]
  })
}

Using Snabbdom

Snabbdom is the Virtual DOM using by @cycle/dom. It's possible to use it in server side with snabbdom-to-html.

A small helper to use snabbdom with cycle-node-http-server

  const snabbdomInit = require('snabbdom-to-html/init');
  const snabbdomModules = require('snabbdom-to-html/modules');
  const { makeNetDriver, httpServer } = require('cycle-net');

  export default function vdom(modules=[
          snabbdomModules.class,
          snabbdomModules.props,
          snabbdomModules.attributes,
          snabbdomModules.style
      ]){
      return snabbdomInit(modules);
  }

  const drivers = {
    httpServer: makeNetDriver(httpServer({
        render: vdom()
    })
  }

In main function, snabbdom used with JSX

  const response$ = request$.map( req => req.response.render(
    <div>
      Pouet
    </div>
  ))

More examples

at https://github.com/mrpierrot/cycle-net/tree/master/test

Socket.io examples

at https://github.com/mrpierrot/cycle-net/blob/master/test/io.spec.js

Websocket examples

at https://github.com/mrpierrot/cycle-net/blob/master/test/ws.spec.js

License

MIT