charleslxh / react-socket-io Goto Github PK

View Code? Open in Web Editor NEW

126.0 8.0 31.0 918 KB

A react provider for socket.io, http://socket.io/

License: Apache License 2.0

JavaScript 86.50% HTML 2.93% CSS 10.58%

socket socketio react provider

react-socket-io's Introduction

react-socket-io

A react provider for socket.io, http://socket.io/

react-socket-io is compatible with browserify.

Installation

npm install react-socket-io --save-dev

How to use

In app container file:

import React from 'react';
import { Socket } from 'react-socket-io';

const uri = 'http://localhost/test';
const options = { transports: ['websocket'] };

export default class AppContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Socket uri={uri} options={options}> 
                { this.props.children }
            </Socket>
        );
    }
}

In other files:

import React from 'react';
import { Event } from 'react-socket-io';

export default class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.onMessage = this.onMessage.bind(this);
    }

    onMessage(message) {
        console.log(message);
    }

    render() {
        return (
            <div>
                <h1>My React SocketIO Demo.</h1>
                <Event event='eventName' handler={this.onMessage} />
            </div>
        );
    }
}

Related Props

Socket Component Props

uri

Server socket.io uri you want to connect. If you use namespace, refer to socket.io documentation

options

reconnection whether to reconnect automatically (true)
reconnectionAttempts (Infinity) before giving up
reconnectionDelay how long to initially wait before attempting a new reconnection (1000). Affected by +/- randomizationFactor, for example the default initial delay will be between 500 to 1500ms.
reconnectionDelayMax maximum amount of time to wait between reconnections (5000). Each attempt increases the reconnection delay by 2x along with a randomization as above
randomizationFactor (0.5), 0 <= randomizationFactor <= 1
timeout connection timeout before a connect_error and connect_timeout events are emitted (20000)
autoConnect by setting this false, you have to call manager.open whenever you decide it's appropriate
transports (Array): a list of transports to try (in order). Defaults to ['polling', 'websocket']. Engine always attempts to connect directly with the first one, provided the feature detection test for it passes.
rememberUpgrade (Boolean): defaults to false. If true and if the previous websocket connection to the server succeeded, the connection attempt will bypass the normal upgrade process and will initially try websocket. A connection attempt following a transport error will use the normal upgrade process. It is recommended you turn this on only when using SSL/TLS connections, or if you know that your network does not block websockets.
rejectUnauthorized (Boolean): If true, the server certificate is verified against the list of supplied CAs. An 'error' event is emitted if verification fails. Verification happens at the connection level, before the HTTP request is sent. Can be used in Node.js client environment to manually specify certificate information.

Event Component Props

event

The event name you want to listen.

handler

A event handler for that event.

Run Example

The example folder contain a basic socket.io server , run npm run-script example to start server, and then visit localhost:8090.

As a contributer.

Clone this project.

git clone [email protected]:charleslxh/react-socket-io.git

Install third party packages
```
npm install
```
Run gulp
```
gulp
```
If you don't have gulp command, Install it globally.

react-socket-io's People

Contributors

Stargazers

Watchers

react-socket-io's Issues

How to send messages?

Does this package support sending messages from client to socket?

Any plans to update 16.3?

Any plans to update to 16.3? using the Context API?

NPM Audit shows 4 vulnerabilities with react-socket-io

Hello guys,
Is there a way to emit an event with a payload. I tried the example : [https://github.com/charleslxh/react-socket-io/blob/master/example/app/example.js]( example where you use context to emit an event) but this doesn't seems to be working.

Thanks

not work on isomorphic app?

#question
not work on isomorphic app?

how to emit event

I don't konw how to emit event,I konw use Event to revceive enent,but how to emit one thing?

react native expo build error

I thought this might work with React Native but the bundler croaks:

Unable to resolve "babel-runtime/core-js/object/get-prototype-of" from "node_modules/react-socket-io/lib/Event.js"

I'm well out of my depth but if somebody knows how to fix it ......

I did notice that babel is now on v7 - I don't know if that's relevant

I'm getting PropTypes error in Create-React-App

When using create-react-app requiring library with

import { Socket } from 'react-socket-io';

casuses error

Any idea how to get around this?

ref is passed to children

const TestComponent = () => {
  <Socket
        options={{ transports: [ 'websocket' ] }}
        ref={ x => { console.log('called') }}>
    <Event ...>
  </Socket>
}

prints the following to the console when rendered

TestComponent -> called
TestComponent -> called

emit message does not send

I trying to send a response to a message received by my app but I can't find any evidence of the response being sent.

I'm using react context hook and the essence is:

import { Socket, Event, SocketContext } from 'react-socket-io';
const socketContext = useContext(SocketContext)
const handlePing = () => 
	socketContext.on('ping', function(data) {
	  console.log(data)
	  socketContext.emit('pong', 'Hello pinger')
	})

I receive the ping OK and I can see it arrive in chrome dev tools network page but I can't see any response being sent.

Is this the correct way to send a message?

handler is still fired after unmount

unmounting the Event component wont unsubscribe the handler for the eventname

`
function NotificationList({}) {

const onMessage = (action) => {

    console.log("got new notification from socket", action);

};

return (
    <>
        {/*list component goes here*/}
        <Event event='notification' handler={onMessage}/>
    </>
)

}
`

"react": "^16.10.2"
"react-socket-io": "^0.2.5"

./node_modules/react-socket-io/lib/Socket.js Module not found: Can't resolve 'babel-runtime/core-js/object/get-prototype-of' in 'G:\OIT\vwr_web_poc\node_modules\react-socket-io\lib'

./node_modules/react-socket-io/lib/Socket.js
Module not found: Can't resolve 'babel-runtime/core-js/object/get-prototype-of' in 'G:\OIT\vwr_web_poc\node_modules\react-socket-io\lib'