当react本机应用程序处于后台/设备处于锁定状态时，如何防止socket.io断开连接

Question

如标题所示，当我的设备处于锁屏或后台时，我的套接字服务器将确定我的react原生应用程序"已死"。

解决这些问题的办法是什么？

Answer 1

在线阅读后，我的套接字服务器将确定我的react原生应用程序"已死"的原因是，当我的设备被锁定或处于后台时，我的应用程序中的所有javascript代码都已停止工作。

因此，我想出了解决这个问题的办法。

我使用过的工具：

1. React Native Appstate
2. React本机后台计时器

我的客户端代码：

import React, {useEffect, useRef} from 'react';
import {AppState} from 'react-native'
export default () => {
const appState = useRef(AppState.currentState);
var interval
const _handleAppStateChange = (nextAppState) => {
if (
appState.current.match(/inactive|background/) &&
nextAppState === "active"
) {
console.log("App has come to the foreground!");
//clearInterval when your app has come back to the foreground
BackgroundTimer.clearInterval(interval)

}else{
//app goes to background
console.log('app goes to background')
//tell the server that your app is still online when your app detect that it goes to background
interval = BackgroundTimer.setInterval(()=>{
console.log('connection status ', socket.connected)
socket.emit('online')
},5000)
appState.current = nextAppState;
console.log("AppState", appState.current);
}
useEffect (() => {
AppState.addEventListener("change", _handleAppStateChange);
return () => {
AppState.removeEventListener("change", _handleAppStateChange);
};
},[])

}

我的服务器端代码：

io.on('connection',(socket)=>{
socket.on('online',()=>{
//do nothing
})
}
)

此解决方案适用于我的应用程序。现在，在我关闭应用程序或单击断开连接按钮之前，套接字不会断开连接。

Answer 2

尽管金谭的回答对我有效，我的套接字连接保持稳定，但我在套接字连接上使用的进程被关闭了(react native webrtc(。

我使用ForegroundService库来保持套接字和webrtc传输处于活动状态。组合代码如下：

import VIForegroundService from '@voximplant/react-native-foreground-service';
import BackgroundTimer from 'react-native-background-timer';
_handleAppStateChange = (nextAppState) => {
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
console.log('App has come to the foreground!')
// clearInterval when the app comes back to the foreground
BackgroundTimer.clearInterval(interval)
}else{
// app goes to background
console.log('app goes to background')
// tell server that the app is still online when app goes to background
interval = BackgroundTimer.setInterval(()=>{
console.log('connection status ', socket.connected)
this.socket.emit('online')
},5000)
this.setState({appState: nextAppState});
console.log("AppState", this.state.appState);
}
}
async configureForeground(){
if (Platform.Version >= 26) {
const channelConfig = {
id: 'CallNotification',
name: `Active Call Notification`,
description: 'Active calls will be shown using this notification',
enableVibration: false,
importance: 1
};
await VIForegroundService.createNotificationChannel(channelConfig);
}
const notificationConfig = {
id: 3456,
title: 'title',
text: 'text',
icon: 'ic_notification',
priority: 1
};
if (Platform.Version >= 26) {
notificationConfig.channelId = 'voiceCallNotification';
}
await VIForegroundService.startService(notificationConfig);
}

ic_notification是一个图像；ic_notification.png"；在所有mipmap-xxxx文件夹中。

您可以调用configureForeground((来启动通知。结束组件WillUnmount:中的前台服务

AppState.removeEventListener('change', this._handleAppStateChange);
try{
VIForegroundService.stopService();
}catch(err){
// do nothing if service was never started.
}