Socket.io does not work on Andriod emulator/Expo Go but works only on expo web

[captaineboy]

I am using the following:

1. SDK Version: “expo”: “~46.0.7”,
2. Platforms(Android/iOS/web/all): Web & Android
3. Expo library: Socket.io

I am unable to run Socket.io on my my android emulator.
When i run it on the web it connects to the server successfully, however, when i run it on android studio emulator(Expo Go App) it does not connect to the server.

I am using this example as a reference: examples/with-socket-io at master · expo/examples · GitHub

[amanhimself]

Hey @captaineboy,

I tried running the examples/with-socket-io at master · expo/examples · GitHub and it is running on Android emulator with Expo Go app.

In that examples repo’s README, there are a set of instructions that you will have to follow regarding the ngrok.

• First you’ll have to install ngrok on your computer.
• Then, you’ll have to make sure that the backend/server port is running and listening
• For example, the port you are running is 3000. Then, run the command ngrok http 3000.
• This will prompt you with an HTTPS link as shown below:

• Copy that link and paste it into App.js file as the value of socketEndpoint. For example: const socketEndpoint = "https:/XXXXX.XX.ngrok.io";
• Then, you can reload your Expo Go app if required on the Android emulator (make sure the Expo project development server is running with npx expo start)

[captaineboy]

Thanks for the feedback.

I actually didn’t use ngrok, my question is this, if I am to build my app, would I be hosting the backend somewhere or build it together with the app.

Also, if I am host the backend on another server how am I to connect it.

[amanhimself]

You will have to host the backend somewhere else and then use the connection string from the hosted backend on the client to connect with the socket.

For example, the ngrok simulates that connection string in the form of the URL starting from https://.... As you may have seen in the example, the SocketIO provides a client library socket.io-client. Check the example for more information on how to create subscription method to establish a connection with the socket URL.

[captaineboy]

I get this error when i try to install ngrok

[amanhimself]

Do you have chocolatey installed on your Windows machine?

[captaineboy]

Yes, but i have never used it before until now

[amanhimself]

Can you make sure that it is on the latest version and is working on your machine? Seems like it is not able to install the ngrok package. Or you can try installing ngrok directly (using the file) on Windows as mentioned in ngrok’s download section.

[captaineboy]

I have actually installed the file for windows directly on my system.

However when I run the authenciation command, it says ngrok not found

[amanhimself]

I don’t think you need to run the authentication command.

What output do you get in your terminal when you run ngrok -h? Does it prompt with a similar to the prompt mentioned in their getting started guide: Getting Started | ngrok Documentation

[captaineboy]

Thanks alot for the feedback so far.

I downloaded the ngrok file on my system (Microsoft) and was able to run it.

All the commands are working fine.

However, I still couldn’t get it to allow socket.io to work for the expo go emulator app.

The worst part is that it doesn’t work for the expo web this time.

I am getting this error in both the backend terminal & ngrok terminal.

ERROR => “TypeError: path must be absolute or specify root to res.sendFile”

I think the error has to be from the backend index.js.

Any solution to this would be greatly appreciated.

Thanks in advance.

[amanhimself]

@captaineboy

ERROR => “TypeError: path must be absolute or specify root to res.sendFile”

Are you getting this error on running the Expo’s Socket.io example or do you have your own backend configured?

[captaineboy]

I am getting this error on running the socket.io example.

I don’t have my backend configured

[amanhimself]

The example seems to work fine on my end. Can’t dig in to help you if you are following the same example. And I assume you are following all the steps I mentioned previously: Socket.io does not work on Andriod emulator/Expo Go but works only on expo web - #2 by amanhimself

The error you mentioned seems to be a Node.js/Express issue to me (especially when you are trying to use res.sendFile() method).

The backend example from examples/index.js at master · expo/examples · GitHub uses it for index.html file which is also included in the backend folder: examples/with-socket-io/backend at master · expo/examples · GitHub

The last thing I can do is ask you to share a minimal reproducible example so that I clone it and run it on my end and see if I can trace the underlying issue you are getting.

[captaineboy]

Thanks for the feedback.

I actually didn’t clone the project from GitHub, as when I tried cloning it, I got the error “Respository not found”.

So instead, I reproduced the example on my system and it worked fine.

Here was the link I tried to clone “https://github.com/expo/examples/tree/master/with-socket-io”

[amanhimself]

Cloning the repo works fine on my end so not sure what happened there.

Also, you can download a specific example as a template as mentioned in the README file of expo/examples project: GitHub - expo/examples: Example projects that demonstrate how to use Expo APIs and integrate Expo with other popular tools

@captaineboy

So instead, I reproduced the example on my system and it worked fine.

Doe this mean the example now is working fine on your system?

[captaineboy]

You can check my code here https://github.com/CaptainEboy/FreeChat.

I just made the repository public.

Please ignore the comments , that’s how I write my codes so I understand it​:grin:

[captaineboy]

Which link did you clone, this is the link I am cloning & getting errors “examples/with-socket-io at master · expo/examples · GitHub”.

The error I am getting is “Repository not found”.

[captaineboy]

I have been using the code I reproduced on my system & it’s working fine on expo web but not on expo go emulator and that was the reason for this question thread.

Here is the link of my reproduced code GitHub - CaptainEboy/FreeChat

[amanhimself]

@captaineboy

You can check my code here https://github.com/CaptainEboy/FreeChat.

Using the example repo you shared, I am able to run the example on iOS simulator and Android emulator (your original issue in this post!)

Here is a screenshot that showcases that your example is running:

To make it run, I had to do two things in the source code you shared:

• In the App.js file, the string you are passing contains whitespace. See the image

• Instead of passing the string as: const socketEndpoint = " https://da94-197-210-84-219.eu.ngrok.io ";
• Pass it as: const socketEndpoint = "https://da94-197-210-84-219.eu.ngrok.io";

Also, in the backend/ directory of your example, the package.json file does not have start script:

• If you do not have start script, the backend will not serve and you should get an error when you run npm run start in the terminal. The error will be like: npm ERR! Missing script: "start"
• I added the start script here in the package.json:

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.1",
    "nodemon": "^2.0.19",
    "socket.io": "^4.5.1"
  }
}

If you had been following the Expo’s Socket-io example, you wouldn’t have missed this.

About web. I’m unsure how you are making it run on Web since your repository doesn’t include the package @expo/webpack-config@^0.17.0 which is necessary to run serve the web app using Expo.