如何解决iOS模拟器上的React-Native无法真正连接到socket.io
我发现了许多类似的问题,但是没有一个答案对我有进一步的帮助。
我要实现的目标
使用Socket.io与React-Native聊天的应用程序
问题
Socket.io服务器说客户端一直在断开连接/断开连接。
最令人不安的(至今仍给人希望的)事实是:这已经起作用-一个晚上。那时我做了一个quick video,所以这就是我的目标。
服务器日志:
[nodemon] starting `ts-node -r esm index.ts`
nodemon:run spawn sh -c ts-node -r esm index.ts +0ms
nodemon bus new listener: exit (0) +7ms
nodemon bus new listener: exit (0) +1ms
nodemon:run start watch on: [ '*.*',re: /.*\..*/ ] +1ms
nodemon start watch on: /Users/kevin/Projects/api +83ms
nodemon ignored [
'**/.git/**','**/.nyc_output/**','**/.sass-cache/**','**/bower_components/**','**/coverage/**','**/node_modules/**',re: /.*.*\/\.git\/.*.*|.*.*\/\.nyc_output\/.*.*|.*.*\/\.sass\-cache\/.*.*|.*.*\/bower_components\/.*.*|.*.*\/coverage\/.*.*|.*.*\/node_modules\/.*.*/
] +0ms
nodemon:watch chokidar watching: /Users/kevin/Projects/api/eslintrc.json +0ms
nodemon:watch chokidar watching: /Users/kevin/Projects/api/index.ts +0ms
nodemon:watch chokidar watching: /Users/kevin/Projects/api/package-lock.json +0ms
nodemon:watch chokidar watching: /Users/kevin/Projects/api/package.json +0ms
nodemon:watch chokidar watching: /Users/kevin/Projects/api/tsconfig.json +0ms
nodemon:watch chokidar watching: /Users/kevin/Projects/api/types/socket.io/types.ts +2ms
nodemon watch is complete +14ms
socket.io:server initializing namespace / +0ms
socket.io-parser encoding packet {"type":0,"nsp":"/"} +0ms
socket.io-parser encoded {"type":0,"nsp":"/"} as 0 +0ms
socket.io:server creating engine.io instance with opts {"path":"/socket.io","initialPacket":["0"]} +1ms
socket.io:server attaching client serving req handler +39ms
engine intercepting request for path "/socket.io/" +0ms
engine handling "GET" http request "/socket.io/?EIO=3&transport=polling&t=NIeBUJ9" +0ms
engine handshaking client "4H-IpKU9ByLaXFZkAAAA" +3ms
engine:socket sending packet "open" ({"sid":"4H-IpKU9ByLaXFZkAAAA","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":60000}) +0ms
engine:socket sending packet "message" ([ '0' ]) +0ms
engine:polling setting request +0ms
engine:socket flushing buffer to transport +2ms
engine:polling writing "97:0{"sid":"4H-IpKU9ByLaXFZkAAAA","pingTimeout":60000}2:40" +1ms
engine:socket executing batch send callback +6ms
socket.io:server incoming connection with id 4H-IpKU9ByLaXFZkAAAA +10s
socket.io:client connecting to namespace / +1ms
socket.io:namespace adding socket to nsp / +0ms
socket.io:socket socket connected - writing packet +2ms
socket.io:socket joining room 4H-IpKU9ByLaXFZkAAAA +1ms
socket.io:socket packet already sent in initial handshake +0ms
Connected: 4H-IpKU9ByLaXFZkAAAA
socket.io:socket joined room [ '4H-IpKU9ByLaXFZkAAAA' ] +1ms
// This is the first connection. It stays on this state for ~10s.
engine intercepting request for path "/socket.io/" +21s
engine handling "GET" http request "/socket.io/?EIO=3&transport=polling&t=NIeBZUT" +0ms
engine handshaking client "M3PZY977msXP-JreAAAB" +1ms
engine:socket sending packet "open" ({"sid":"M3PZY977msXP-JreAAAB","pingTimeout":60000}) +21s
engine:socket sending packet "message" ([ '0' ]) +0ms
engine:polling setting request +21s
engine:socket flushing buffer to transport +0ms
engine:polling writing "97:0{"sid":"M3PZY977msXP-JreAAAB","pingTimeout":60000}2:40" +1ms
engine:socket executing batch send callback +1ms
socket.io:server incoming connection with id M3PZY977msXP-JreAAAB +21s
socket.io:client connecting to namespace / +0ms
socket.io:namespace adding socket to nsp / +0ms
socket.io:socket socket connected - writing packet +0ms
socket.io:socket joining room M3PZY977msXP-JreAAAB +0ms
socket.io:socket packet already sent in initial handshake +0ms
Connected: M3PZY977msXP-JreAAAB
socket.io:socket joined room [ 'M3PZY977msXP-JreAAAB' ] +1ms
// This is the second connection. It stays again on this state for ~10s and keeps repeating.
engine intercepting request for path "/socket.io/" +21s
engine handling "GET" http request "/socket.io/?EIO=3&transport=polling&t=NIeBef7" +0ms
engine handshaking client "48q2S3j64VNsGsPVAAAC" +0ms
engine:socket sending packet "open" ({"sid":"48q2S3j64VNsGsPVAAAC","pingTimeout":60000}) +21s
engine:socket sending packet "message" ([ '0' ]) +0ms
engine:polling setting request +21s
engine:socket flushing buffer to transport +1ms
engine:polling writing "97:0{"sid":"48q2S3j64VNsGsPVAAAC","pingTimeout":60000}2:40" +0ms
engine:socket executing batch send callback +0ms
socket.io:server incoming connection with id 48q2S3j64VNsGsPVAAAC +21s
socket.io:client connecting to namespace / +0ms
socket.io:namespace adding socket to nsp / +0ms
socket.io:socket socket connected - writing packet +0ms
socket.io:socket joining room 48q2S3j64VNsGsPVAAAC +0ms
socket.io:socket packet already sent in initial handshake +0ms
Connected: 48q2S3j64VNsGsPVAAAC
socket.io:socket joined room [ '48q2S3j64VNsGsPVAAAC' ] +1ms
我尝试过的事情
- 添加
window.navigator.userAgent = "react-native";
- 从dist文件夹中导入socket.io-client:
'socket.io-client/dist/socket.io'
- 使用我的本地IPv4
const socket = io('http://IPv4:3000');
,但在我的情况下,它可以与io('http://localhost:3000);
一起使用 - 向客户端调用
jsonp: false
,transports: ['websocket']
pingTimeout: 30000,pingInterval: 30000
, 添加选项
- 使用socket.io和socket.io-client v2.0.3(因为据称它应该适用于RN)(但在我的情况下,它适用于v2.3.0
- 不使用打字稿
- (使用RN CLI初始化工具)启动一个全新的RN项目
- 通过网络连接
- 这成功完成了,所以我认为后端很好。因此,我不确定这是否可以完全消除后端的问题...听起来像是,好像这排除了后端并在客户端或模拟器上暴露了问题(端口被阻塞) ?兼容性问题?但是为什么突然之间...)
- 与
3000
的端口不同 - 使用
node
代替esm
当我“ React-Nativefied”(即div-> View等...)时,我发现有些奇怪的事情this small guide(我只是想在我的代码中找到与其他人的代码之间的差异),更改房间似乎可以正常工作!但是,仍然没有再收到消息,并且断开连接仍然发生。
每当我在客户端中登录socket.connected
时,它总是返回false
...
另一个小注解:自从这个问题开始发生以来,我的模拟器的Fast-Refresh不再起作用。我总是需要手动刷新。在其他项目中不会发生这种情况。
我将添加我的代码(它仍然非常疯狂):
后端
index.ts
import { Message,Socket } from './types/socket.io/types';
const http = require('http').createServer().listen(3000);
const io = require('socket.io').listen(http);
io.on(Socket.Connection,(socket) => {
console.log(`Connected: ${socket.id}`);
socket.on(Socket.Disconnect,() => console.log(`Disconnected: ${socket.id}`));
socket.on('error',(error) => console.log(`ERROR: ${error}`));
socket.on(Socket.Join,() => {
console.log(`Socket ${socket.id} joining`);
socket.join();
});
socket.on(Socket.ChatMessage,(data: { message: Message }) => {
const { message } = data;
io.emit('chatMessage',message);
});
});
types / socket.io / types.ts
export enum Socket {
Connection = 'connection',Disconnect = 'disconnect',Join = 'join',ChatMessage = 'chatMessage',}
export type Message = string;
前端
src / App.tsx
import React,{ useEffect,useState } from 'react';
import {
View,Text,StyleSheet,TextInput,TouchableWithoutFeedback,} from 'react-native';
import {
initiateSocket,subscribeToChat,disconnectSocket,sendMessage,} from './helpers/socket.io';
import { Message } from './types/socket.io/types';
const App: React.FC = () => {
const [messageInputValue,setMessageInputValue] = useState('');
const [chatMessages,setChatMessages] = useState<Message[]>([]);
useEffect(() => {
initiateSocket();
subscribeToChat((error: Error | null,newChatMessage: Message) => {
console.log('error is ',error);
if (error) {
return;
}
setChatMessages((previousChatMessages: Message[]) => [
...previousChatMessages,newChatMessage,]);
});
return () => {
disconnectSocket();
};
},[]);
return (
<View style={styles.container}>
<Text style={styles.title}>Live Chat:</Text>
<TextInput
value={messageInputValue}
onChangeText={(inputValue) => setMessageInputValue(inputValue)}
/>
<TouchableWithoutFeedback
onPress={() => {
sendMessage(messageInputValue);
setMessageInputValue('');
}}
>
<Text>Send</Text>
</TouchableWithoutFeedback>
<View style={styles.textContainer}>
{chatMessages.map((message,index) => (
<Text key={`${message}_${index}`}>{message}</Text>
))}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
paddingTop: 100,flex: 1,backgroundColor: '#F5FCFF',},title: {
fontSize: 24,textContainer: {
marginTop: 12,});
export default App;
src / helpers / socket.io / index.ts
import io from 'socket.io-client';
import { Message,Socket } from '../../types/socket.io/types';
let socket: SocketIOClient.Socket;
export const initiateSocket = () => {
socket = io('http://localhost:3000');
console.log(`Connecting socket...`);
if (socket) {
socket.emit(Socket.Join);
}
};
export const disconnectSocket = () => {
console.log('Disconnecting socket...');
if (socket) {
socket.disconnect();
}
};
export const subscribeToChat = (
callBack: (error: Error | null,newChatMessage: Message) => void,) => {
if (!socket) {
return true;
}
socket.on(Socket.ChatMessage,(message: Message) => {
return callBack(null,message);
});
};
export const sendMessage = (message: Message) => {
if (socket) {
socket.emit('chatMessage',{ message });
}
};
编辑
它再次工作了很短的时间,我必须检查socket.io日志中的差异到底是怎么回事。比较不同之处就是结果(左无效,右有效):
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。