Clash Royale CLAN TAG

i am using socket.io in node worked for server , but cant connect to my mobile react native as client

this is my first time to publish my question in stackoverflow.So please correct me if i am wrong and i hope you guys can help me. So i have problem with socket.io-client to implemented in react native. There is no syntax error in my code and can run well in expo. But i cant connect it to my server node js who using socket.io as well. This is my client react native code

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
window.navigator.userAgent = 'react-native';
import io from 'socket.io-client/dist/socket.io';

export default class App extends React.Component {
state = {
name: 'bob'
}

constructor(){
super();

this.socket = io('localhost:3000',{jsonp: false});

console.log('socket = ',this.socket);

this.socket.on('update', () => this.setState({name: 'Nate'}));
}

render() {
return (
<View style={styles.container}>
<Text>{this.state.name}</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});


And this is my server node js code

var express = require('express');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(3000);

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

io.on('connection', function (socket) {
console.log(socket.id);
socket.on('update', () => {
console.log('sending update');
io.emit('update');
});

socket.on('sending', () =>{
console.log('sending');
io.emit('ending');
});
});


And this is my index.html code in my server node js

<h1>Hello world </h1>

<button>Update</button>

<script src="/socket.io/socket.io.js"> </script>
<script>
var socket = io();
var button = document.querySelector('button');
button.onclick = function(){
console.log('update');
socket.emit('update');
socket.on('ending',() => {
console.log('ending');
});
}
</script>


This is my expectation result :
First, i run my server node js with runnning command line node App.js and open it on my browser with localhost:3000.
Second, i run my client react native with command line expo start on my devices.

Third, when i click button update on my browser, it will changed text on my devices to Nate. (This is where i failed)

BTW, this is my version app :
node 8.11.3
expo 1.1.0-beta.4
socket.io-client 2.1.1
react-native-cli 2.0.1
react-native 0.55.4

And this is my github for my code
client react native : https://github.com/nyomanyudis/albmus3
server node js : https://github.com/nyomanyudis/serverSocketIO

console.log('socket = ',this.socket);

1 Answer
1

I'm going to post in an answer (event though we aren't yet to an answer) because I need to post suggested multi-line code for further debugging. I'd suggest you add this in the React client (not the addition of http:// to the URL) and all the new event handlers to log other events:

http://

let socket = this.socket = io('http://localhost:3000',{jsonp: false});

socket.on('connect_error, function() {
console.log('connect_error');
}).on('connect_timeout', , function() {
console.log('connect_timeout');
}).on('connect', function() {
console.log('connect');
});


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.