Socket.io-client: 无法通过 react-native 上的 socket.io-client 连接

创建于 2018-10-31  ·  37评论  ·  资料来源: socketio/socket.io-client

You want to:你想要:

  • [x] report a bug [x] 报告错误
  • [ ] request a feature [ ] 请求功能

Current behaviour当前行为

I can't connect via socket io to my server, it times out.我无法通过套接字 io 连接到我的服务器,它超时了。

Steps to reproduce (if the current behaviour is a bug)重现步骤(如果当前行为是错误)

In react-native:在本机反应中:

import io from 'socket.io-client';


const BACKEND = 'my socketio server url'

const sock = io(BACKEND, { transports: ['websocket'], forceNew: true });
sock.on('connected', () => {
  debugger;
})

The debug logs look like:调试日志如下所示:

socket.io-client:url parse <my url> +0ms
browser.js:133 socket.io-client ignoring socket cache for <my url> +0ms
browser.js:133 socket.io-client:manager readyState closed +0ms
browser.js:133 socket.io-client:manager opening <my url> +1ms
browser.js:133 engine.io-client:socket creating transport "websocket" +0ms
browser.js:133 engine.io-client:socket setting transport websocket +3ms
browser.js:133 socket.io-client:manager connect attempt will timeout after 20000 +6ms
browser.js:133 socket.io-client:manager readyState opening +2ms
socket.io-client:manager connect attempt timed out after 20000 +20s
browser.js:133 engine.io-client:socket socket close with reason: "forced close" +20s
browser.js:133 engine.io-client:socket socket closing - telling transport to close +2ms
browser.js:133 socket.io-client:manager connect_error +3ms
browser.js:133 socket.io-client:manager cleanup +1ms
browser.js:133 socket.io-client:manager will wait 899ms before reconnect attempt +1ms
browser.js:133 socket.io-client:manager attempting reconnect +912ms

Note : the best way (and by that we mean the only way ) to get a quick answer is to provide a failing test case by forking the following fiddle .注意:获得快速答案的最佳方法(我们指的是唯一方法)是通过分叉以下小提琴来提供失败的测试用例。

Expected behaviour预期行为

I expect to be able to connect to my socketio server, the same way I am able to in a web browser.我希望能够连接到我的 socketio 服务器,就像在网络浏览器中一样。

Setup设置

  • OS: iOS iPhone 10 simulator操作系统:iOS iPhone 10 模拟器
  • browser: React-native浏览器:反应原生
  • socket.io version: 2.1.1 socket.io 版本:2.1.1
en

最有用的评论

Finally found a solution for React Native >= 0.60 after a couple of coffees and digging deep into engine.io - additional to a version conflict (with RN) there seems to be an issue with passing in the URI.在喝了几杯咖啡并深入研究 engine.io 之后,终于找到了 React Native >= 0.60 的解决方案——除了版本冲突(与 RN)之外,传递 URI 似乎存在问题。 When I pass an URI into socketIO, it gets turncated to the host and 'socket.io' appened.当我将 URI 传递给 socketIO 时,它会被转接到主机并附加“socket.io”。 So socketIO("https://foo.bar/my/endpoint/socket.io") will lead to socketIO trying to connect to https://foo.bar/socket.io without showing it in the logs when throwing the xhr pull / socket error.所以socketIO("https://foo.bar/my/endpoint/socket.io")将导致 socketIO 在抛出 xhr pull / socket 错误时尝试连接到https://foo.bar/socket.io而不在日志中显示它。

Here we go, how to get socket.io running on current versions of React Native :我们开始吧,如何让 socket.io 在当前版本的 React Native 上运行

  • use socket.io-client version _2.1.1_使用socket.io-client版本_2.1.1_
// package.json
{
  "dependencies": {
     "socket.io-client": "2.1.1"
   }
}
  • when setting up the client, define a host and a path设置客户端时,定义主机路径
const socket = socketIO('https://your.host.com/', {
  path: '/path/to/socket.io/'
})
  • and suddenly everything works as smooth as planed突然间一切都像计划的一样顺利

Hope to have saved you the time I spent on this issue 😆希望可以节省我花在这个问题上的时间😆

en

所有37条评论

Looks like this is react-native's issue.看起来这是 react-native 的问题。 Earlier versions of RN seem to work with socket.io, but 0.0.57 does not.早期版本的 RN 似乎可以与 socket.io 一起使用,但 0.0.57 不能。 Closing.关闭。

en

Try "socket.io-client": "2.0.4"尝试“socket.io-client”:“2.0.4”
This may be socket.io bug这可能是 socket.io 错误

en

Try "socket.io-client": "2.0.4"尝试“socket.io-client”:“2.0.4”
This may be socket.io bug这可能是 socket.io 错误

Yes it does work.是的,它确实有效。

en

使用 RN 0.52 和 socket.io-client 2.0.4 我仍然面临这个问题。

en

@noahprince22 can you please share your configuration ? @noahprince22你能分享你的配置吗?
I am currently using this and the issue still persist.我目前正在使用这个,问题仍然存在。

"react-native": "0.55.4",
"react": "16.3.1",
"socket.io-client": "^2.0.4",
"socket.io: "^2.2.0" //server side
en

any workaround?任何解决方法?

socket.io team please, this should work with RN, is a socket.io bug. socket.io 团队请,这应该适用于 RN,是一个 socket.io 错误。

en

Hi @ningacoding , I managed to get it working with this configuration@ningacoding ,我设法让它与这个配置一起工作

"react-native": "0.55.4",
"react": "16.3.1",
"socket.io-client": "^2.0.4",
"socket.io: "^1.0.0" //server side

In your react-native app use this在你的 react-native 应用程序中使用这个

const socket = io(BASE_URL, {
    secure: true,
    transports: ['websocket'],
  });
en

"react-native": "0.58.6", “反应原生”:“0.58.6”,
"react": "16.6.3", “反应”:“16.6.3”,
"socket.io-client": "^2.0.4", "socket.io-client": "^2.0.4",

Not working for me不为我工作

en

any solution?任何解决方案? I'm facing the same thing我面临同样的事情

en

I have long since stopped working on the project that I was having this issue with.我早就停止了我遇到这个问题的项目。 If I remember correctly, I downgraded react-native to "solve' the problem.如果我没记错的话,我将 react-native 降级为“解决”问题。

en

Experiencing the same issue, has there been a fix yet?遇到同样的问题,请问有解决了吗? Anyone find any workarounds to implementing sockets in React Native?有人找到在 React Native 中实现套接字的任何解决方法吗?

en

@russellgoldman I had problems with RN 0.60.5 and socket.io. @russellgoldman我在使用 RN 0.60.5 和 socket.io 时遇到了问题。 Release build did not connect to the server.发布版本未连接到服务器。

None of socket.io versions worked with RN 0.60.5: I tried versions 2.0.4, 2.1.1, 2.2.0.没有一个 socket.io 版本适用于 RN 0.60.5:我尝试了 2.0.4、2.1.1、2.2.0 版本。

Downgrading to RN 0.59.10 solved my problem.降级到 RN 0.59.10 解决了我的问题。

en

Hi @anttirauh and @russellgoldman ,@anttirauh@russellgoldman
I tried with RN 0.59.10 and Socket 2.0.4, but its not connecting on release build.我尝试使用 RN 0.59.10 和 Socket 2.0.4,但它在发布版本时没有连接。
Can you please help me?你能帮我么?

en

@Ramesh21071993我认为您必须将 socket.io 升级到 2.1.1 版本。

en

@anttirauh , i tried with all these versions socket io (2.0.4, 2.1.1, 2.2.0) and react-native versions (0.60, 0.59.10, 0.59.4) @anttirauh ,我尝试了所有这些版本的套接字 io(2.0.4、2.1.1、2.2.0)和 react-native 版本(0.60、0.59.10、0.59.4)
In server side also socket io 2.0.4.在服务器端还有socket io 2.0.4。
still that same issue sir,还是同样的问题,先生,

But it works on RN 0.55.4但它适用于 RN 0.55.4

en

@Ramesh21071993 My understanding (which is formed with heavy googling and own testing) is that: @Ramesh21071993我的理解(通过大量的谷歌搜索和自己的测试形成)是:

  • socket.io stopped working with react-native about around RN version 0.57.4 socket.io 在 RN 版本 0.57.4 左右停止使用 react-native
  • socket.io or some other component was fixed later and I managed to get it working with version combo: RN 0.59.10 + socket.io 2.1.1 socket.io 或其他一些组件后来被修复,我设法让它与版本组合一起工作:RN 0.59.10 + socket.io 2.1.1
  • RN version 0.60.x is not working with any version of socket.io RN 版本 0.60.x 不适用于任何版本的 socket.io

So my advice is only: try one time more with RN 0.59.10 and socket.io 2.1.1 and make sure that you clear build folder before building.所以我的建议只是:用 RN 0.59.10 和 socket.io 2.1.1 再试一次,并确保在构建之前清除构建文件夹。 And remove node_modules before yarn/npm.并在 yarn/npm 之前删除 node_modules。

en

@anttirauh Sir, below is my package.json. @anttirauh先生,下面是我的 package.json。 I did as what you told.我照你说的做了。 But nothing happen.但什么也没有发生。 I remove build folder and node modules and again i install.我删除了构建文件夹和节点模块,然后再次安装。
Please help me on this to work, Past one month am trying请帮我解决这个问题,过去一个月我正在尝试

App package.json应用程序包.json

{ {
"name": "Track", “名称”:“轨道”,
"version": "0.0.1", “版本”:“0.0.1”,
"private": true, “私人”:真的,
"scripts": { “脚本”:{
"start": "node node_modules/react-native/local-cli/cli.js start", “开始”:“节点 node_modules/react-native/local-cli/cli.js 开始”,
"test": "jest" “测试”:“开玩笑”
}, },
"dependencies": { “依赖”:{
"react": "16.8.3", “反应”:“16.8.3”,
"react-native": "0.59.10", “反应原生”:“0.59.10”,
"socket.io": "2.1.1" “socket.io”:“2.1.1”
}, },
"devDependencies": { “开发依赖”:{
"@babel/core": "^7.6.2", "@babel/core": "^7.6.2",
"@babel/runtime": "^7.6.2", "@babel/runtime": "^7.6.2",
"babel-jest": "^24.9.0", "babel-jest": "^24.9.0",
"jest": "^24.9.0", "笑话": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0", “metro-react-native-babel-preset”:“^0.56.0”,
"react-test-renderer": "16.8.3" “反应测试渲染器”:“16.8.3”
}, },
"jest": { “开玩笑”:{
"preset": "react-native" “预设”:“反应原生”
} }
} }

Server Package.json服务器包.json

{ {
"name": "TRACK-Socket", "name": "TRACK-Socket",
"version": "0.0.1", “版本”:“0.0.1”,
"dependencies": { “依赖”:{
"amqplib": "^0.5.1", “amqplib”:“^0.5.1”,
"config": "^3.2.2", "配置": "^3.2.2",
"express": "^4.15.3", “快递”:“^4.15.3”,
"socket.io": "^2.1.1", "socket.io": "^2.1.1",
"ws": "^7.1.2" "ws": "^7.1.2"
} }
} }

Thanks谢谢

en

Finally found a solution for React Native >= 0.60 after a couple of coffees and digging deep into engine.io - additional to a version conflict (with RN) there seems to be an issue with passing in the URI.在喝了几杯咖啡并深入研究 engine.io 之后,终于找到了 React Native >= 0.60 的解决方案——除了版本冲突(与 RN)之外,传递 URI 似乎存在问题。 When I pass an URI into socketIO, it gets turncated to the host and 'socket.io' appened.当我将 URI 传递给 socketIO 时,它会被转接到主机并附加“socket.io”。 So socketIO("https://foo.bar/my/endpoint/socket.io") will lead to socketIO trying to connect to https://foo.bar/socket.io without showing it in the logs when throwing the xhr pull / socket error.所以socketIO("https://foo.bar/my/endpoint/socket.io")将导致 socketIO 在抛出 xhr pull / socket 错误时尝试连接到https://foo.bar/socket.io而不在日志中显示它。

Here we go, how to get socket.io running on current versions of React Native :我们开始吧,如何让 socket.io 在当前版本的 React Native 上运行

  • use socket.io-client version _2.1.1_使用socket.io-client版本_2.1.1_
// package.json
{
  "dependencies": {
     "socket.io-client": "2.1.1"
   }
}
  • when setting up the client, define a host and a path设置客户端时,定义主机路径
const socket = socketIO('https://your.host.com/', {
  path: '/path/to/socket.io/'
})
  • and suddenly everything works as smooth as planed突然间一切都像计划的一样顺利

Hope to have saved you the time I spent on this issue 😆希望可以节省我花在这个问题上的时间😆

en

@rastapasta , i got an error like “ CLEARTEXT communication not permitted by network security policy ”, @rastapasta ,我收到类似“网络安全策略不允许 CLEARTEXT 通信”之类的错误,

Please tell me what to do请告诉我应该怎么做

en

@Ramesh21071993 if you can't use your endpoint via https (please consider it), add their hostnames to the exception lists. @Ramesh21071993如果您无法通过 https 使用您的端点(请考虑),请将其主机名添加到例外列表中。

for iOS: https://stackoverflow.com/a/30732693对于 iOS: https ://stackoverflow.com/a/30732693
for Android: https://stackoverflow.com/a/50834600对于安卓: https ://stackoverflow.com/a/50834600

en

Sir, I tried that also but not able to do.先生,我也尝试过,但无法做到。 If you don't mind can you please give me any demo source files如果您不介意,请给我任何演示源文件
For long time I struck with this.很长一段时间我都对此感到震惊。

Am using ip and port sir我正在使用 ip 和端口先生

en

遵循上述文档的指示并调整此实现:

import socketIO from 'socket.io-client'
const socket = socketIO('http://8.8.8.8:3000/', {
  path: '/your/path/to/socket.io/'
  reconnectionDelay: 1000,
  reconnection: true,
  reconnectionAttempts: Infinity,
  jsonp: false
})

socket.on('connect', () => console.log('connected'))
socket.on('error', console.error)
socket.on('connect_error', console.error)
en

先生,在服务器端我正在使用socket io 2.1.1,可以吗?或者有什么需要改变的吗

en

image

en

@Lizhooh在 rn 上找出 whazzup 的黑客方法:在node_modules engine.io-client/blob/master/lib/transports/中的self.onError console.log(err)打补丁轮询-xhr.js #L131

en

@Ramesh21071993 Is your issue resolved? @Ramesh21071993你的问题解决了吗? I am facing the same issue.我面临同样的问题。 Tried everything mentioned in above comments.尝试了上述评论中提到的所有内容。

en

@rastapasta I followed what you have suggested above. @rastapasta我遵循了您上面的建议。 My socket connection happens and then immediately disconnects.我的套接字连接发生,然后立即断开连接。 I get timeout error infinitely.我无限地收到超时错误。 However, whenever I click on some component which makes a network call, the socket connects and immediately disconnects.但是,每当我单击某个进行网络调用的组件时,套接字都会连接并立即断开连接。 If I don't do any network call after first socket disconnect, it would stay in the same state.如果我在第一次套接字断开连接后不进行任何网络调用,它将保持相同的状态。 Please, could you help?请问,你能帮忙吗?

socket = io('http://IP:31515', { socket = io('http://IP:31515', {
path: '/socketio', //I have given this is the path in my socket server as well as my kubernetes ingress file to route to that port path: '/socketio', //我已经给出了这是我的套接字服务器中的路径以及我的 kubernetes 入口文件以路由到该端口
transports: ['websocket'],传输:['websocket'],
reconnectionDelay: 1000,重新连接延迟:1000,
reconnection: true,重新连接:真,
reconnectionAttempts: Infinity,重新连接尝试:无限,
// timeout: 30000, // 超时:30000,
jsonp: false jsonp:假
}); });

things that I have tried:我尝试过的事情:

  1. removing and adding transports option删除和添加传输选项
    2.removing and add timeout 2.删除和添加超时
  2. removing all parameters except path删除除路径之外的所有参数
  3. adding pingTimeout and pingInterval in server socket configuration在服务器套接字配置中添加 pingTimeout 和 pingInterval
  4. removing path from server and client and only keeping it in my kubernetes ingress file to route to that deployment/pod.从服务器和客户端删除路径,仅将其保存在我的 kubernetes 入口文件中以路由到该部署/pod。

Note: the same server and kubernetes conf work for any node.js socket client as well as my react js web app.注意:相同的服务器和 kubernetes conf 适用于任何 node.js 套接字客户端以及我的 react js web 应用程序。 I am only facing this issue for React Native app in debug as well as release mode.我只在调试和发布模式下遇到 React Native 应用程序的这个问题。

en

有人对我的上述问题有任何想法吗?

en

@calqlum123 @calqlum123
Please make sure to请确保

  • add your host to the transport exception list (s. here )将您的主机添加到传输例外列表(此处
  • try it without manually defining the transports在不手动定义传输的情况下尝试
  • monkey patch the console.log (s. here ) and check the error猴子修补console.log(在这里)并检查错误
en

Can anyone please share a complete working example for both client and server?任何人都可以为客户端和服务器分享一个完整的工作示例吗? Because this is confusing.因为这很混乱。

en

I am using "react-native": "0.61.5" and "socket.io-client": "^2.1.1",我正在使用“react-native”:“0.61.5”和“socket.io-client”:“^2.1.1”,

below is my code下面是我的代码

const socket = SocketIOClient('http://192.168.0.101:1234',{reconnect: true}); socket.connect(); socket.once("connect", () => { console.log("[CLIENT] Connected to remote server, identificating."); // this.sendIdentification(); }); socket.on('connect', () => { console.log('connected to socket server'); });

The code is not able to connect to the server and I am also looking for the solution.该代码无法连接到服务器,我也在寻找解决方案。 I don't want to downgrade my react-native version.我不想降级我的 react-native 版本。

en

you must add this code in application tag您必须在应用程序标签中添加此代码
like below in AndroidManifest.xml像下面的 AndroidManifest.xml
. . . . . .

en

I am using "react-native": "0.61.5" and "socket.io-client": "^2.1.1",我正在使用“react-native”:“0.61.5”和“socket.io-client”:“^2.1.1”,

below is my code下面是我的代码

const socket = SocketIOClient('http://192.168.0.101:1234',{reconnect: true}); socket.connect(); socket.once("connect", () => { console.log("[CLIENT] Connected to remote server, identificating."); // this.sendIdentification(); }); socket.on('connect', () => { console.log('connected to socket server'); });

The code is not able to connect to the server and I am also looking for the solution.该代码无法连接到服务器,我也在寻找解决方案。 I don't want to downgrade my react-native version.我不想降级我的 react-native 版本。

Can you try "ws://192.168.0.101:1234", instead of " http://192.168.0.101 :1234"你可以试试“ws://192.168.0.101:1234”,而不是“ http://192.168.0.101:1234

en

@Unforgiven-wanda 这里添加了一个带有 React Native 的示例: https ://github.com/socketio/socket.io/tree/master/examples/react-native

en

在本机反应中无法连接“socket.io-client”:“^3.0.4”

en

@chiragpurohit71085 have you checked the example there: https://github.com/socketio/socket.io/tree/master/examples/react-native? @chiragpurohit71085你检查过那里的例子吗: https://github.com/socketio/socket.io/tree/master/examples/react-native?

I think that this is a problem of URL, could you please check if your server is reachable at http://192.168.x.y:z ?我认为这是 URL 的问题,请检查您的服务器是否可以在http://192.168.x.y:z访问?

en
此页面是否有帮助?
0 / 5 - 0 等级