react-native-websocket

    1.0.2 • Public • Published

    react-native-websocket

    Greenkeeper badge Package version Standard Travis Build GitHub version Dependency CI License

    WebSocket API wrapped as a component for React Native

    Table of Contents

    About

    If you're interested in using websockets in React Native generally here is a slightly abbreviated version of the source of this component:

    class WS extends Component {
        //...
        send = (data) => this.state.ws.send(data)
        componentDidMount () {
            this.reconnect = !!this.props.reconnect
            this._handleWebSocketSetup()
        }
        componentWillUnmount () {
            this.reconnect = false
            this.state.ws.close()
        }
        _handleWebSocketSetup = () => {
            const ws = new WebSocket(this.props.url)
            ws.onopen = () => {
                this.props.onOpen && this.props.onOpen()
            }
            ws.onmessage = (event) => { this.props.onMessage && this.props.onMessage(event) }
            ws.onerror = (error) => { this.props.onError && this.props.onError(error) }
            ws.onclose = () => this.reconnect ? this._handleWebSocketSetup() : (this.props.onClose && this.props.onClose())
            this.setState({ws})
        }
    }

    As you can see the component simply wraps the native websocket api. It's also recommended that you implement your own exponential backoff reconnect logic if you plan on using this component in production.

    Install

    $ npm install --save react-native-websocket
    # OR 
    $ yarn add react-native-websocket

    Usage

     
    import React, { Component } from 'react'
    import { AppRegistry, View } from 'react-native'
    import WS from 'react-native-websocket'
     
    export default class Example extends Component {
     
      render () {
        return (
          <View style={{flex: 1}}>
            <WS
              ref={ref => {this.ws = ref}}
              url="wss://echo.websocket.org/"
              onOpen={() => {
                console.log('Open!')
                this.ws.send('Hello')
              }}
              onMessage={console.log}
              onError={console.log}
              onClose={console.log}
              reconnect // Will try to reconnect onClose
            />
          </View>
        )
      }
    }
     

    Contribute

    Contributions are welcome. Please open up an issue or create PR if you would like to help out.

    License

    Licensed under the MIT License.

    Install

    npm i react-native-websocket

    DownloadsWeekly Downloads

    513

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    51.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • tiaanduplessis