fusion-plugin-socket-io

Socket.io implementation for fusion apps.

You are welcome to contribute in following:

1. Unit Testing
2. Integration Testing
3. Flow Types
4. Opening issues
5. Any other improvements

---

Table of contents

• Installation
• Setup
• API
  • Registration API
  • Dependencies
• withSocket (HOC)

---

Installation

yarn add fusion-plugin-socket-io

---

Setup

// src/main.js
import React from 'react';
import App from 'fusion-core';
import SocketIO, {
  SocketIOConfigToken,
  SocketIOHandlersToken
} from 'fusion-plugin-socket-io';

// Define your socket listeners and methods server side
const handlers = __NODE__ && {
  chat: (data, socket) => {
    socket.emit('some-event', {some: 'data' + data})
  },
  something: (data, socket) => {
    doSomething()
    ...
  },
};

export default () => {
  const app = new App(<div />);

  app.register(SocketIO);
  app.register(SocketIOConfigToken, { port: 4500 });
  __NODE__ && app.register(SocketIOHandlersToken, handlers)

  return app;
};

---

API

Registration API

SocketIO

import SocketIO from 'fusion-plugin-socket-io'

The Socket.io plugin. Registers socket.io on both client and server.

Dependencies

SocketIOHandlersToken

import { SocketIOHandlersToken } from 'fusion-plugin-socket-io'

Configures what Socket.io listeners handlers exist. Required. Server-only.

Types

type SocketIOHandlers = Object<string, (data: any, socket: Socket) => void>

You can register a value of type SocketIOHandlers or a Plugin that provides a value of type SocketIOHandlers.

SocketIOConfigToken

import { SocketIOConfigToken } from 'fusion-plugin-socket-io'

Configures Socket.io port and origins. Optional.

Types

type SocketIOConfig = { port: number, origin: string | Array<string> }

---

withSocket (HOC)

A higher order component to configure socket.io on client.

Usage

import { withSocket } from 'fusion-plugin-socket-io'

const SomeComponent = ({ listenerPayload, emitter, socketClient }) => (
  <div>
    <button onClick={() => emitter('Hello World!')}>Click to emit</button>
    <p>{listenerPayload}</p>
    <p>{socketClient.id}</p>
  </div>
)
const options = { listener: 'listenerPayload', emitter: 'emitter' }

withSocket(options)(SomeComponent)

withSocket injects:

1. an emitter function as given key in socketOptions.
2. listener payload as given key in socketOptions.
3. socket client instance as socketClient.

Types

type SocketIOOptions = { listener: string, emitter: string }