套接字不侦听 React Native 和 Express

Question

下面的移动端代码可以在IOS和ANDROID上运行，但是收到警告"长时间设置时间，即多分钟，是Android上的性能和正确性问题，因为它使计时器模块保持唤醒状态，并且计时器只能调用......"。

通过传入 connectionConfig，我能够让套接字在我的安卓和 ios 模拟器上工作。但是，我收到警告。即使我注释掉了重新连接，重新连接延迟和重新连接尝试，我仍然收到这些警告。任何有这方面的经验的人都可以分享吗？

import React from "react";
import { Text, View, Button } from "react-native";
import SocketIO from "socket.io-client";
const connectionConfig = {
// jsonp: false,
// reconnection: true,
// reconnectionDelay: 100,
// reconnectionAttempts: 100000,
transports: ["websocket"] // you need to explicitly tell it to use websockets
};
export default class HomeScreen extends React.Component {
constructor() {
super();
this.socket = SocketIO("http://192.168.0.182:3000", connectionConfig);
// this.socket = SocketIOClient("http://localhost:3000");
this.socket.on("connect", () => {
console.log("connected to server");
});
this.socket.emit("channel1", "Channel1 emitting");
}
btnPress = () => {
console.log("Pressed");
this.socket.emit("channel1", "Emitting when pressing button");
};
render() {
return (
<View>
<Text>Hey</Text>
<Button title="Emit" onPress={this.btnPress} />
</View>
);
}
}

下面的移动端代码对我不起作用

我试图在前端实现一个基本的套接字，在后端使用反应原生。

我下面的代码似乎不起作用。我从 react-native 发出了一些通信，但服务器端似乎没有侦听，因为没有控制台日志。

任何人都可以指出我的错误吗？谢谢

反应原生

import React from "react";
import { View, Text } from "react-native";
import SocketIOClient from "socket.io-client";
class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.socket = SocketIOClient("http://localhost:3000");
this.socket.emit("channel1", "Hi Server");
}
render() {
return (
<View>
<Text>Home</Text>
</View>
);
}
}
export default HomeScreen;

快递和节点

const express = require("express");
const path = require("path");
const http = require("http");
const socketIO = require("socket.io");
const publicPath = path.join(__dirname, "../public");
const port = process.env.PORT || 3000;
const app = express();
const server = http.createServer(app);
const io = socketIO(server);
const { generateMessage } = require("./utils/message");
app.use(express.static(publicPath));
// Server listens to Client Connected
io.on("connection", socket => {
console.log("New User Connected");
//! Server emits to Client
// socket.emit("newMessage", generateMessage('Admin', 'Welcome!!'));
//! Server emits to Client
socket.emit("welcome", generateMessage("Admin", "Welcome to the Chat App!!"));
//! Server broadcast to Other Clients
socket.broadcast.emit(
"welcome",
generateMessage("Admin", "New User Joined!!")
);
//! Server Listing to Client Event
socket.on("createMessage", message => {
console.log("createMessage", message);
//! Emit to All Clients upon Server Listening
io.emit("newMessage", generateMessage(message.from, message.text));
//! Broadcast to All Clients (except emitter) upon Server Listening
socket.broadcast.emit(
"newMessage",
generateMessage(message.from, message.text)
);
});
socket.on("channel1", message => {
console.log("channel1", message);
});
//! Listening to Client then Server Acknowledging
socket.on("createMessageWithAcknowledgement", (message, callback) => {
console.log("createMessageWithAcknowledgement", message);
//! Emit to All Clients upon Server Listening
io.emit("newMessage", generateMessage(message.from, message.text));
callback({ admin: "Jack", role: "admin" });
});
//! Server listens to Client Disconnect
socket.on("disconnect", () => {
console.log("User Disconnected");
});
});
server.listen(port, () => {
console.log(`Server is up on port ${port}!`);
});

Answer 1

工作解决方案

反应原生

import React from "react";
import { Text, View, Button } from "react-native";
import SocketIO from "socket.io-client";
const connectionConfig = {
// jsonp: false,
// reconnection: true,
// reconnectionDelay: 100,
// reconnectionAttempts: 100000,
transports: ["websocket"] // you need to explicitly tell it to use websockets
};
export default class HomeScreen extends React.Component {
constructor() {
super();
this.socket = SocketIO("http://192.168.0.182:3000", connectionConfig);
// this.socket = SocketIOClient("http://localhost:3000");
this.socket.on("connect", () => {
console.log("connected to server");
});
this.socket.emit("channel1", "Channel1 emitting");
}
btnPress = () => {
console.log("Pressed");
this.socket.emit("channel1", "Emitting when pressing button");
};
render() {
return (
<View>
<Text>Hey</Text>
<Button title="Emit" onPress={this.btnPress} />
</View>
);
}
}

NODE & EXPRESS SERVER

const express = require("express");
const path = require("path");
const http = require("http");
const socketIO = require("socket.io");
const publicPath = path.join(__dirname, "../public");
const port = process.env.PORT || 3000;
const app = express();
const server = http.createServer(app);
const io = socketIO(server, {
pingTimeout: 30000,
pingInterval: 30000
});
const { generateMessage } = require("./utils/message");
app.use(express.static(publicPath));
// Server listens to Client Connected
io.on("connection", socket => {
console.log("New User Connected");
//! Server emits to Client
// socket.emit("newMessage", generateMessage('Admin', 'Welcome!!'));
//! Server emits to Client
socket.emit("welcome", generateMessage("Admin", "Welcome to the Chat App!!"));
//! Server broadcast to Other Clients
socket.broadcast.emit(
"welcome",
generateMessage("Admin", "New User Joined!!")
);
//! Server Listing to Client Event
socket.on("createMessage", message => {
console.log("createMessage", message);
//! Emit to All Clients upon Server Listening
io.emit("newMessage", generateMessage(message.from, message.text));
//! Broadcast to All Clients (except emitter) upon Server Listening
socket.broadcast.emit(
"newMessage",
generateMessage(message.from, message.text)
);
});
socket.on("channel1", message => {
console.log("channel1", message);
});
//! Listening to Client then Server Acknowledging
socket.on("createMessageWithAcknowledgement", (message, callback) => {
console.log("createMessageWithAcknowledgement", message);
//! Emit to All Clients upon Server Listening
io.emit("newMessage", generateMessage(message.from, message.text));
callback({ admin: "Jack", role: "admin" });
});
//! Server listens to Client Disconnect
socket.on("disconnect", () => {
console.log("User Disconnected");
});
});
server.listen(port, () => {
console.log(`Server is up on port ${port}!`);
});

在旁注中，将以下内容添加到服务器端代码将修复计时器警告。(我已经在下面的代码修订中包含了上面的代码解决方案(

const io = socketIO(server, {
pingTimeout: 30000,
pingInterval: 30000
});