socketio / socketio/socket.io

socket.io-client does not work properly in Android(React-Native) with Laravel-echo

Open
#5,143 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs investigation
Dominant language
TypeScript
Stars
63.2k
Forks
10.3k
Avg merge
11d 20h
Merged PRs (30d)
2

Description

When using Socket.io as a broadcaster in Laravel-echo, We are using Socketio from socket.io-client as a client for connecting to the socket ,joining into the channel and listen an event fired within the channel.
While working with React Native v0.71.10, I am facing issue regarded to the listening to the event.
The code works fine in iOS devices, but in Android it is not getting listened.

To Reproduce :-
1. these version of packages in package.json

"react-native": "0.71.10"
"laravel-echo": "^1.16.1"
"socket.io-client": "^4.7.5"

2. Add this in your useEffect

import Socketio from 'socket.io-client';
import Echo from 'laravel-echo/dist/echo';

const echo = new Echo({
 broadcaster: 'socket.io',
 host: SOCKET_URL,
 client: Socketio,
}); 

echo.channel('channel_name')
    .listen('.event', (data) => { console.log("🚀 ~ .listen ~ data:", data)  });

In iOS it works fine. In Android, there is no event log.
We tried many suggestions from the community, seems like none of them works for this scenario.

Things we already tried :-

  1. Adding 'CORS' on the server side
  2. tried using android:usesCleartextTraffic="true"
  3. Also tried suggestions from the closed issue of the Repo
  4. Tried downgrading 'Socket.io-client' package from 4.7.5 (latest as of 19/07/2024) to all the suggested ones in the community

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the package.json versions and the useEffect setup shown in the report, then reproduce the channel listener on React Native 0.71.10 on both iOS and Android. Compare the connection and event logs after the listed CORS, cleartext-traffic, and package-version attempts; done means the event is received on Android as it is on iOS.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, laravel, react-native, typescript
Domain
mobile, networking
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.