恢复到 2.1.1 解决了这个问题。
我怀疑这与新的 cors 管理变更有关。
手动设置原点似乎没有任何作用。
它在启动 React Native 调试器时神奇地开始工作。
reconnection: true,
reconnectionDelay: 500,
jsonp: false,
reconnectionAttempts: Infinity,
transports: ['websocket']
在两个平台(模拟器)2.1.1 上都遇到了同样的问题,它只适用于打开调试器。
我也面临这个问题。 我升级以查看它是否修复了我的第一个连接延迟问题。
我也面临同样的情况。 问题
恢复到 2.1.1 对我有用。
我仍然面临同样的问题,恢复 2.1.1 也不适合我。
它应该由https://github.com/socketio/engine.io-client/pull/607修复
@benhjames你能确认你的修复已经解决了 React Native 中的问题吗?
是的,我目前在 React Native 上运行[email protected]
(已经拉入[email protected]
)没有问题。
值得检查以确保您的engine.io-client
是 3.3.2,因为它包含针对 websockets 的 React Native 修复。 😃
@benhjames @darrachequesne我用过套接字。 [email protected] (已拉入[email protected])并仍然验证node_modules中的更改,它对我不起作用。
`从'socket.io-client'导入io;
导出默认类 HomeScreen 扩展 React.Component {
构造函数(道具){
超级(道具);
this.socket = io('ws://192.168.0.107:8080/endpoint',{
重新连接:真的,
重新连接延迟:500,
jsonp: 假,
重新连接尝试:无限,
传输:['websocket']
});
this.socket.on('connect_error', (err) => {
控制台日志(错误)
});
}
`
我收到如下错误:
Error: websocket error
at WS.Transport.onError (transport.js:67)
at WebSocket.ws.onerror (websocket.js:157)
at WebSocket.dispatchEvent (event-target.js:172)
at WebSocket.js:289
at RCTDeviceEventEmitter.emit (EventEmitter.js:190)
at MessageQueue.__callFunction (MessageQueue.js:349)
at MessageQueue.js:106
at MessageQueue.__guard (MessageQueue.js:297)
at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:105)
at debuggerWorker.js:72
在我看来,端点是不正确的 - 它应该是http
或https
协议链接,而不是ws
一个。 👍
@benhjames我之前尝试过使用 WebSocket API https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API并且它在相同的协议下工作得非常好。
socket.io(与 WebSocket API 不同)仅接受客户端的 HTTP(S) 协议 URI(请参阅此处的文档),但它确实_使用_幕后的 WS 协议。
所以如果你做io('http://192.168.0.107:8080/endpoint', ...)
它应该可以工作!
@benhjames感谢您的更新!
我认为ws://
应该可以正常工作,但/endpoint
意味着您要连接到端点命名空间(这是当前的实现,从 v2.x 开始)。 您可能想要使用:
this.socket = io('ws://192.168.0.107:8080', {
path: '/endpoint',
reconnection: true,
reconnectionDelay: 500,
jsonp: false,
reconnectionAttempts: Infinity,
transports: ['websocket']
});
@darrachequesne我已经尝试过上述实现,但它仍然无法正常工作。
也许看看 SocketIO 服务器代码的样子可能会很有用,只是为了确保它使用正确的命名空间和设置等。🙂
它与 WebSocket API 一起工作得很好,但是当我尝试连接 Socket.io API 时,出现如下错误:
websocket error
Stack trace:
null:null in WS.Transport.onError
node_modules/engine.io-client/lib/transports/websocket.js:178:8 in WebSocket.ws.onerror
node_modules/event-target-shim/lib/event-target.js:172:38 in WebSocket.dispatchEvent
node_modules/react-native/Libraries/WebSocket/WebSocket.js:289:13 in <unknown>
node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:190:32 in RCTDeviceEventEmitter.emit
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:349:41 in MessageQueue.__callFunction
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:11 in <unknown>
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:297:8 in MessageQueue.__guard
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:9 in MessageQueue.callFunctionReturnFlushedQueue
http://192.168.0.103:19001/debugger-ui/debuggerWorker.js:72:58 in <unknown>
如果它与 WebSocket API 一起使用而没有自定义逻辑来反序列化 socket.io 有效负载,那么这意味着服务器没有使用 socket.io。
您是否有机会从服务器提供一些代码来验证是否是这种情况?
@benhjames没错,我们使用https://docs.oracle.com/javaee/7/api/javax/websocket/package-summary.html作为后端代码。
那这就解释了! Socket.io 需要在_both_客户端和服务器上使用才能工作。 👍
@benhjames @darrachequesne现在我在后端使用 socket.io,它在前端使用 socket.io 使用 vanilla javascript 工作正常,但是当我尝试通过 React Native 连接 socket.io 时,我收到错误:
香草 JS(工作得很好):
```
<script>
var socket = io.connect('http://localhost:9092');
socket.on('connect', function() {
output('<span class="connect-msg">Client has connected to the server!</span>');
});
**React Native code: (Not working)**
this.socket = io.connect('http://localhost:9092',{
reconnection: true,
reconnectionDelay: 500,
jsonp: false,
reconnectionAttempts: Infinity,
transports: ['websocket']});
this.socket.on('connect',function(e){
console.log("on Connect");
})
this.socket.on('connect_error', (err) => {
console.log(err)
});
**Error:**
17:15
websocket error
Stack trace:
node_modules/engine.io-client/lib/transport.js:67:22 in onError
node_modules/engine.io-client/lib/transports/websocket.js:157:17 in onerror
node_modules/event-target-shim/lib/event-target.js:172:43 in dispatchEvent
node_modules/react-native/Libraries/WebSocket/WebSocket.js:290:10 in
node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:191:12 in emit
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:349:47 in __callFunction
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:26 in
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:297:10 in __guard
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:17 in callFunctionReturnFlushedQueue
```
I am using https://github.com/mrniko/netty-socketio in backend.
可能需要在 React Native 中连接到非本地主机 URL(即您计算机的 IP):当然在 Android 中,也可能在 iOS 中,这取决于所使用的模拟器。
如果这仍然不起作用,那么值得尝试transports: ['polling']
选项,看看它是否真的是 WebSocket 传输,特别是不起作用,或者它是否是一个更普遍的网络连接问题。
@benhjames我面临一个奇怪的问题。 我在后端使用https://github.com/mrniko/netty-socketio ,如果我使用上面提到的 Vanilla JS,它工作得很好,但如果我使用 react-native,服务器显示连接成功,但在react-native,我收到如下连接错误:
server error
Stack trace:
node_modules/engine.io-client/lib/socket.js:453:28 in onPacket
node_modules/engine.io-client/lib/socket.js:276:18 in <unknown>
node_modules/component-emitter/index.js:133:25 in emit
node_modules/engine.io-client/lib/transport.js:148:12 in onPacket
node_modules/engine.io-client/lib/transports/polling.js:144:18 in callback
node_modules/engine.io-parser/lib/browser.js:384:20 in decodePayload
node_modules/engine.io-client/lib/transports/polling.js:148:23 in onData
node_modules/engine.io-client/lib/transports/polling-xhr.js:127:16 in <unknown>
node_modules/component-emitter/index.js:133:25 in emit
node_modules/engine.io-client/lib/transports/polling-xhr.js:300:12 in onData
node_modules/engine.io-client/lib/transports/polling-xhr.js:367:16 in onLoad
node_modules/engine.io-client/lib/transports/polling-xhr.js:253:10 in onreadystatechange
node_modules/event-target-shim/lib/event-target.js:172:43 in dispatchEvent
node_modules/react-native/Libraries/Network/XMLHttpRequest.js:570:23 in setReadyState
node_modules/react-native/Libraries/Network/XMLHttpRequest.js:392:25 in __didCompleteResponse
node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:191:12 in emit
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:349:47 in __callFunction
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:26 in <unknown>
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:297:10 in __guard
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:17 in callFunctionReturnFlushedQueue
...
PS:
使用 NodeJS,它工作得很好,没有任何错误。
请看上面的回答!
谢谢, @benhjames的支持,现在可以使用了。 https://github.com/mrniko/netty-socketio/issues/614
无论我选择 websockets 还是轮询,我都有同样的问题。 它要么是 websocket_error 要么是 xhr 轮询错误。
URL 是一个 IP (http://192.168.1.112:3000),我使用 React Native Expo 从物理电话连接到同一本地网络上的计算机。
如果您需要更多堆栈跟踪或信息,我可以提供帮助...
socket.io 2.2.0 // 客户端和服务器
engine.io 3.3.2 // 客户端和服务器
如果 websocket 和轮询传输都不起作用,这听起来像是 socket.io 之外的问题。 您可能想尝试:
fetch
请求。 如果这不起作用,则可能是网络或 React Native 环境有问题。要尝试第一个测试,正常的 fetch 工作
编辑:它看起来像一个与 CORS 相关的问题。 如果我尝试连接一个简单的 JS 客户端,我会得到:
Access to XMLHttpRequest at 'http://192.168.1.112:3000/socket.io/?EIO=3&transport=polling&t=MfV8vhI' from origin 'http://192.168.1.112:5000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
关于如何设置的任何建议?
尝试从 github 上的最新版本,就像这样,解决了我的 RN android 问题:
npm i socketio/engine.io-client#3.3.2 -S
似乎没有什么可以使用 react native 0.60
使用 RN 0.60.5 时,Android 发布版本不起作用
尝试了 socket.io-client 版本 2.0.4、2.1.1、2.2.0。
试过yarn add socketio/engine.io-client#3.3.2
请参阅 #1305 - 在 Android 上,您需要使用 https 或在 AndroidManifest 中设置 usesCleartextTraffic 属性
试试 v2.3
我尝试使用 Expo SDK v34 和 v35 (RN 0.59) 并且不得不像其他版本 (2.1.1, 2.1.0, 2.2.0) 一样将 socket.io-client 降级到 1.7.2 ( yarn add [email protected]
)不行。 我没有尝试 2.3.0,现在它可以工作了,我不想麻烦:-)
嗨@lionbur ,我知道有很多 0.59 的迷你版本。 您使用的是哪个版本? 0.59.9?
先感谢您!
最有用的评论
似乎没有什么可以使用 react native 0.60