socket.io-client does not work properly in Android(React-Native) with Laravel-echo
Nobody has claimed this yet.
- 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 :-
- Adding 'CORS' on the server side
- tried using android:usesCleartextTraffic="true"
- Also tried suggestions from the closed issue of the Repo
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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