CODEWITHSUNDEEP
node.jsreactjsreact-nativesocket.io
Ajit Kumar
Ajit Kumar

Reputation: 417

Socket io in React Native

I am using Socket.io for my react-native project. The nodejs server is hosted with Heroku. When I tried to connect from the app to server, it works perfectly !! But when try I emit a message, I can't see it on my receiving Reactjs site
Here's the code for react native app ->

import { io } from "socket.io-client";

useEffect(() => {
if (tried === true) {
  const socket = io("wss://my-domain-name.herokuapp.com");

  socket.emit("finishPayment", "true");

  setScanned(false);
}
}, [status]);

Here's the receiving client side code (React js) ->

socket.on("finishPayment", (msg) => {
  console.log(msg);
});

The connection is done (in the app), but the message is not emitted.
Any idea why is this happening ?
Thanks !

Upvotes: 2

Views: 13156

Answers (4)

Anas
Anas

Reputation: 1817

For me, I faced this issue because of multiple reasons. here is the list of the problems and the solutions.

Problem 1: on the server side I updated the socket.io package without having a look at what is the new in docs to implement the new version and after I re-reading and follow the docs it turns out that I'm using the old import

const socketio = require("socket.io");
const io = socketio(server);

and I changed the import to the new way like below

const { Server } = require("socket.io");
const io = new Server(server);

Problem 2: On the React Native client side I also updated the socket.io to V4.7.1 which is the same version as the server side version and after reading the latest docs it turns out also I'm using the wrong imports, so I changed from this

import io from "socket.io-client";

to this

import { io } from "socket.io-client";

Problem 3: I was using the http://localhost:5000 as the socket URL, but it turns out this will not work at least on Android emulator, so I used my local ip instead http://192.168.1.100:5000 and I need also to add transports property to make it fully work like the example below:

import { io } from "socket.io-client";
const socket = io("http://192.168.1.100:5000", { transports: ["websocket"] });

Bonus always use this events on the client side to make sure that you are connected or not and to see the errors

socket.on("connect", () => {
  console.log("Socket Connected");
});

socket.on("connect_error", (error) => {
  console.log("Socket Error", error);
});

Upvotes: 1

leo
leo

Reputation: 59

On android (locally) the problem for me was that I did not open the connection between mi socket serve and react native app. Just run adb reverse tcp:3000 tcp:3000 on the terminal and the server ports will be opened for connection. I use 3000 for my server but change it to your server's port locally.

adb reverse tcp:3000 tcp:3000

Upvotes: 2

Nahid Hasan
Nahid Hasan

Reputation: 707

this is much cleaner.

 const io = require('socket.io-client/dist/socket.io');

 const socket = io(
    `API URL`,
    {
      transports: ['websocket'], // you need to explicitly tell it to use websockets
    },
  );

  socket.on('connect', () => {
    console.log('connected --------------- socket ---------------');
  });

  socket.on('connect_error', err => {
    console.log(err.message);
  });

Upvotes: 0

Ajit Kumar
Ajit Kumar

Reputation: 417

I solved it !!! Here's the final code ->

import { Text, View, StyleSheet, Alert } from "react-native";

navigator.__defineGetter__("userAgent", function () {   // you have to import rect native first !!
 return "react-native";
}); 

import SocketIOClient from "socket.io-client/dist/socket.io.js";
 
  //

  useEffect(() => {
const socket = SocketIOClient("wss://site-name.herokuapp.com/", {
  jsonp: false,
});
socket.on("connect", () => {
  console.log("connected");
  socket.emit("hello", "world");
});

socket.on("connect_error", (err) => {
  console.log(err instanceof Error);
  console.log(err.message); 
});
}, []);

Upvotes: 1

Related Questions