socket.io server react-native

code.js

import React from 'react'
import { Text, Button, View } from 'react-native'
import { createBottomTabNavigator, createAppContainer } from 'react-navigation'
import io from 'socket.io-client'

console.disableYellowBox = true

/////// server

var app = require('express')()
var http = require('http').createServer(app)
var io = require('socket.io')(http)

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html')
})

io.on('connection', function(socket) {
  console.log('a user connected')

  socket.on('update filter', console.log)

  socket.on('disconnect', () => {
    console.log('disconnect')
  })

  setInterval(() => {
    io.emit('filter updated', Date.now().toString())
  }, 2000)
})

http.listen(3000, function() {
  console.log('listening on *:3000')
})



//////// client


class HomeScreen extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  componentDidMount() {
    this.socket = io('http://192.168.0.160:3000', { reconnectionAttempts: 3 })
    this.socket.on('filter updated', v => {
      this.setState({ filterResults: v })
    })

    this.socket.on('connect', () => {
      console.log('connected')
      this.setState({
        message: null,
      })
    })

    this.socket.on('connect_error', error => {
      console.log('connect_error')
      console.log(error)
    })

    this.socket.on('connect_timeout', timeout => {
      console.log('connect_timeout')
      console.log(timeout)
    })

    this.socket.on('reconnecting', () => console.log('reconnecting'))

    this.socket.on('reconnect_failed', () => {
      this.setState({
        message: 'reconnect_failed',
      })
      console.log('reconnect_failed')
    })

    // any error
    this.socket.on('error', error => {
      console.log('error')
      console.log(error)
    })
  }

  updateFilter = () => {
    this.socket.emit('update filter', Date.now().toString())
  }

  reconnectManually = () => {
    this.socket.connect()
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button title="Update Filter" onPress={this.updateFilter} />

        <Text>{this.state.filterResults}</Text>
        <Text>{this.state.message}</Text>
        {this.state.message && <Button title="Reconnect" onPress={this.reconnectManually} />}
      </View>
    )
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    )
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
})

export default createAppContainer(TabNavigator)