React Native如何检测设备上指定端口是否开放？

Android 端实现 #

1. 编写原生模块类 #

在 android/app/src/main/java/[你的项目包名]/ 目录下新建 PortCheckerModule.kt：

package com.yourappname // 替换为你的项目包名

import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
import com.facebook.react.bridge.Promise
import java.net.Socket
import java.io.IOException

class PortCheckerModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
    override fun getName(): String {
        return "PortChecker" // JS端调用时的模块名称
    }

    @ReactMethod
    fun checkPort(port: Int, promise: Promise) {
        // 后台线程执行端口检测，避免阻塞主线程
        Thread {
            val isPortOpen = try {
                Socket("localhost", port).use { true }
            } catch (ignored: IOException) {
                false
            }
            promise.resolve(isPortOpen)
        }.start()
    }
}

2. 注册模块 #

新建 PortCheckerPackage.kt 用于注册模块：

package com.yourappname

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager
import java.util.ArrayList

class PortCheckerPackage : ReactPackage {
    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
        val modules = ArrayList<NativeModule>()
        modules.add(PortCheckerModule(reactContext))
        return modules
    }

    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
        return emptyList()
    }
}

3. 在Application中添加包 #

修改 MainApplication.kt 的 getPackages() 方法，加入自定义Package：

override fun getPackages(): List<ReactPackage> {
    return PackageList(this).packages.apply {
        add(PortCheckerPackage())
    }
}

iOS 端实现 #

1. 编写Swift原生模块 #

在iOS项目目录下新建 PortCheckerModule.swift：

import Foundation
import React

@objc(PortCheckerModule)
class PortCheckerModule: NSObject, RCTBridgeModule {
    // 模块名称，需和Android端保持一致
    static func moduleName() -> String! {
        return "PortChecker"
    }

    static func requiresMainQueueSetup() -> Bool {
        return false // 无需在主线程初始化
    }

    @objc func checkPort(_ port: Int, resolver resolve: RCTPromiseResolveBlock, rejecter reject: RCTPromiseRejectBlock) {
        // 后台线程执行端口检测
        DispatchQueue.global(qos: .background).async {
            var isPortOpen = false
            let socket = Socket.create(family: .inet, type: .stream, proto: .tcp)
            do {
                try socket?.connect(to: "localhost", port: UInt16(port))
                isPortOpen = true
                socket?.close()
            } catch {}
            
            // 回到主线程返回结果
            DispatchQueue.main.async {
                resolve(isPortOpen)
            }
        }
    }
}

2. 添加桥接文件 #

新建 PortCheckerModule.m 作为Swift与React Native的桥接文件：

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(PortCheckerModule, NSObject)

RCT_EXTERN_METHOD(checkPort:(NSInteger)port resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)

@end

JS 层调用示例 #

通过 NativeModules 调用原生模块的检测方法：

import { NativeModules } from 'react-native';

const { PortChecker } = NativeModules;

// 封装端口检测异步函数
const checkPortStatus = async (port) => {
  try {
    const isOpen = await PortChecker.checkPort(port);
    console.log(`端口 ${port} 开放状态: ${isOpen}`);
    return isOpen;
  } catch (error) {
    console.error('端口检测失败:', error);
    return false;
  }
};

// 使用示例：检测7001端口
checkPortStatus(7001);

内容的提问来源于stack exchange，提问作者Paul