Navigation Menu

Skip to content
This repository has been archived by the owner on May 31, 2022. It is now read-only.

tiaanduplessis/react-native-websocket

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

25 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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.

About

๐Ÿ”ƒ WebSocket API wrapped as a component for React Native

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published