React Native & Socket.io - 无法在应用程序和服务器之间建立连接

Question

我正在使用React Native和Socket.io为Android构建一个聊天应用程序。 问题是我无法在应用程序和服务器之间建立连接。它给了我一个连接错误，说Websocket错误。

我尝试将应用程序套接字 Io URI 更改为localhost: port(这会导致传输错误或超时错误(，ip: port(这会产生 Websocket 错误(，设置差异选项。然后尝试使用require语法而不是导入服务器。然后安装了旧版本的React-native和socket.io&socket.io-client，仍然没有运气！然后从 github 找到一个应用程序存储库，安装它，并尝试运行该应用程序。 同样的错误。还更改了安卓清单文件中的cleartextTrafficPermitted="true"。

节点：v12.13.0

在外部设备上进行测试：

• 摩托E3(1s世代(-安卓6棉花糖。
• 红米手机Note 7 Pro - 安卓9
派

截图

服务器：

import express, { Application } from 'express';
import { createServer } from 'http';
import { listen, Server } from 'socket.io';

// set port number
const port = 7777;

// set express
const app: Application = express();

// set express server
const server = createServer(app);

// listen express server updates on socket.io
const io: Server = listen(server, {
transports: ['websocket'],
serveClient: false,
});

io.on('connection', (socket) => {
console.log('connection is made');
socket.emit('commEvent', { data: 'connectionSuccessful' });
socket.on('disconnect', () => {
console.log('connection disconnected');
});
socket.on('new-message', (data) => {
console.log(data.message);
});
});

// listen server updates on specified port
server.listen(port, () => {
console.log('Message app server listening on port:', port);
});

服务器：包.json

{
"name": "message_app",
"version": "1.0.0",
"description": "Message app server.",
"main": "index.js",
"scripts": {
"start": "node build/index.js",
"watch": "nodemon src/index.ts",
"test": "none",
"build": "npm run lint && tsc-p",
"lint": "eslint --fix --ext .ts ."
},
"dependencies": {
"express": "^4.17.1",
"socket.io": "^2.3.0"
},
"devDependencies": {
"@types/express": "^4.17.6",
"@types/socket.io": "^2.1.8",
"@typescript-eslint/eslint-plugin": "^3.3.0",
"@typescript-eslint/parser": "^3.3.0",
"eslint": "^7.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"nodemon": "^2.0.4",
"prettier": "^2.0.5",
"ts-node": "^8.10.2",
"typescript": "^3.9.5"
}
}

>应用程序：

import React, {useEffect} from 'react';
import {AppScreenStackNavProps} from '../../../Routes/App/AppRouteTypes';
import {View} from 'react-native';
import HomeRoutes from '../../../Routes/Home/HomeRoute';
import io from 'socket.io-client';
export const socket = io('http://192.168.1.38:7777', {
transports: ['websocket'],
jsonp: false,
});
socket.on('commEvent', (data: {data: string}) => {
console.warn(data.data);
});
const HomeScreen = ({navigation}: AppScreenStackNavProps<'Home'>) => {
navigation.setOptions({
headerShown: false,
});
useEffect(() => {
socket.connect();
socket.on('connect', (con: any) => {
console.debug('SOCKET: connected to socket server', con);
});
socket.on('error', (err: any) => {
console.debug('SOCKET: errors ', err);
});
socket.on('connect_error', (err: any) => {
console.debug('SOCKET: connect_error ---> ', err);
});
}, []);
return (
<>
<View style={{flex: 1}}>
<HomeRoutes />
</View>
</>
);
};
export default HomeScreen;

应用：包.json

{
"name": "message_app",
"version": "1.0.0",
"description": "Message app server.",
"main": "index.js",
"scripts": {
"start": "node build/index.js",
"watch": "nodemon src/index.ts",
"test": "none",
"build": "npm run lint && tsc-p",
"lint": "eslint --fix --ext .ts ."
},
"dependencies": {
"express": "^4.17.1",
"socket.io": "^2.3.0"
},
"devDependencies": {
"@types/express": "^4.17.6",
"@types/socket.io": "^2.1.8",
"@typescript-eslint/eslint-plugin": "^3.3.0",
"@typescript-eslint/parser": "^3.3.0",
"eslint": "^7.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"https-localhost": "^4.6.0",
"nodemon": "^2.0.4",
"prettier": "^2.0.5",
"ts-node": "^8.10.2",
"typescript": "^3.9.5"
}
}

Answer 1

我花了一天时间在这个问题上发现问题出在您安装的模块上。

这意味着如果您在项目中使用打字稿，请确保也为"socket.io.client"模块添加.d.ts文件。

或者在 JavaScript 中使用相同的代码。