https://github.com/mesteche/react-socket
A react-redux inspired library to deal with websocket.
https://github.com/mesteche/react-socket
react redux socket websocket websockets
Last synced: about 1 year ago
JSON representation
A react-redux inspired library to deal with websocket.
- Host: GitHub
- URL: https://github.com/mesteche/react-socket
- Owner: mesteche
- License: mit
- Created: 2017-03-19T18:04:19.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-26T20:54:11.000Z (about 9 years ago)
- Last Synced: 2025-03-08T09:35:42.402Z (over 1 year ago)
- Topics: react, redux, socket, websocket, websockets
- Language: JavaScript
- Homepage:
- Size: 20.5 KB
- Stars: 25
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# react-socket
[](https://travis-ci.org/mesteche/react-socket)
[]()
[](https://coveralls.io/github/mesteche/react-socket?branch=master)
[](https://discord.gg/bTujxkY)
A react-redux inspired library to deal with websocket.
## Installation
### Using npm
`npm i --save @mesteche/react-socket`
### Using yarn
`yarn add @mesteche/react-socket`
## API
### ``
Makes the socket available to the children, anywhere below in the tree.
An open `` is required for being able to use `connect()` on sub-components.
#### Props
- `children` the component down the tree. Must be an only child, if you need to have siblings, wrap them in a single component.
- `id` if you want to have multiple socket connected at once, you must give them an id that will be used by `connect()` to identify the right socket.
If you want to instanciate the connection outside of the `` component, you should pass the `WebSocket` instance as a prop:
- `socket` An instance of WebSocket
Else the `` component can create it with the following parameters as props:
- `url` The url to connect to
- `protocol` The protocol to use
- `onopen` A function to call when the connection is established
- `onerror` A function to call if an errors occurs
- `onmessage` A function to call when a message is recieved (the message will be passed as an argument)
See [WebSocket documentation](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket)
#### Example
```jsx
// main.js
import React from 'react'
import {render} from 'react-dom'
import Socket from 'react-socket'
/* See connect() documentation below */
import Demo from './Demo.js'
render(
console.info('message recieved', msg)}>
Send Message
,
document.querySelector('#app')
)
```
### `connect(mapSendToProps)`
Connects a React component to a `WebSocket`.
Similarly to react-redux's `connect()`, it doesn't modify the component passed to it but returns a new component connected to the `WebSocket` instead.
In addition to connect the component's props to the socket's `send()` method, the new component will expose a `onWsMessage` and `socketId` prop, for you to register a callback when a message is recieved from the server and to select the socket you want to connect to.
For instance, if you already use react-redux, you can use use react-redux's `connect()` on this new component to dispatch an action when a message arrives.
#### Arguments
- `mapSendToProps`(Object or Function):
- If an object is passed, each key is assumed to be a prop of the component, and the correspondign values are assumed to be functions that returns the data to be sent to the server. Each function will be wrapped into a `send()` call to the server.
- If a function is passed, it will be given the `send()` function of the socket.
It is expected that it returns an object containning the props.
It's up to you to use `send()` in these props.
### `connectBase(mapSendToProps, [config]])`
Similar to `connect()`, except instead of exposing `onWsMessage` and `socketId` as props on the returned component, it accepts a `config` argument.
#### Arguments
Same as `connect()` plus :
- `[config]`(Object):
- `[onWsMessage]`(Function): This function will be called when a message is recieved from the server, with the message as parameter.
- `[socketId]`(String or Symbol): The id of the socket you're targetting.
#### Examples
##### `mapSendToProps` as an object
In this example, 'Message' will be sent to the server when the button is clicked.
```jsx
// Demo.js
import React from 'react'
import { connect } from 'react-socket'
// Basic React component
export const Demo = ({sendMessage, children}) => (
{children}
)
const mapSendToProps = {
sendMessage: msg => msg,
}
export default connect(mapSendToProps)(Demo)
```
##### `mapSendToProps` as a function
This Example is similar to the previous one but `mapSendToProps` is used as a function.
```jsx
// Demo.js
import React from 'react'
import { connect } from 'react-socket'
// Basic React component
export const Demo = ({sendMessage, children}) => (
{children}
)
const mapSendToProps = send => ({
sendMessage: msg => send(msg),
})
export default connect(mapSendToProps)(Demo)
```
##### usage with react-redux's `connect`
In this example, we use the `onWsMessage` prop of the connected component to listen to the server.
We also use react-redux to respond to such event by dispatching an action (see redux and react-redux documentation).
```jsx
// Demo.js
import React from 'react'
import { connect as wsConnect } from 'react-socket'
import { connect as RRConnect } from 'react-redux'
// Basic React component
export const Demo = ({sendMessage, children}) => (
{children}
)
const mapSendToProps = {
sendMessage: msg => msg,
}
const mapDispatchToProps = {
onWsMessage: msg => ({
type: 'SERVER_MESSAGE',
payload: msg.data,
})
}
export default RRConnect(null, mapDispatchToProps)(
wsConnect(mapSendToProps)(Demo)
)
```
[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo
[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package
[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo