fusion-plugin-socket-io
v0.1.1
Published
Socket.io implementation for FusionJS.
Downloads
12
Maintainers
Readme
fusion-plugin-socket-io
Socket.io implementation for fusion apps.
You are welcome to contribute in following:
- Unit Testing
- Integration Testing
- Flow Types
- Opening issues
- Any other improvements
Table of contents
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:
- an emitter function as given key in socketOptions.
- listener payload as given key in socketOptions.
- socket client instance as socketClient.
Types
type SocketIOOptions = { listener: string, emitter: string }