如何在点击React组件按钮时执行指定Node.js TCP socket代码

首先要明确浏览器端运行的React代码无法直接调用Node.js的net模块发起TCP请求，浏览器没有提供原生TCP Socket能力，也不兼容Node.js原生API，所以需要搭建本地后端服务作为中转，执行逻辑为：点击React按钮 → 前端发HTTP请求到本地后端 → 后端执行TCP通信逻辑并返回结果。

步骤1：搭建本地后端中转服务 #

我们基于Express封装原有的TCP通信逻辑，对外暴露HTTP接口供前端调用：

1. 先安装依赖：

npm install express cors

2. 新建server.js文件，代码如下：

/* server.js 本地后端服务 */
const express = require('express');
const cors = require('cors');
const net = require('net');
const app = express();
const servicePort = 3001;
const tcpConfig = {
  ip: '127.0.0.1',
  port: 7000
};

// 允许跨域，适配本地React开发环境
app.use(cors());
app.use(express.json());

// 封装原有的TCP发送逻辑
const sendTcpData = (data) => {
  return new Promise((resolve, reject) => {
    const socket = new net.Socket();
    socket.connect(tcpConfig, () => {
      console.log('TCP连接建立成功，发送数据：', data);
      socket.write(data);
      socket.end();
      resolve('数据发送成功');
    });
    socket.on('error', (err) => {
      socket.destroy();
      reject(err);
    });
  });
}

// 暴露HTTP接口供前端调用
app.post('/send-tcp', async (req, res) => {
  try {
    const { sendData } = req.body;
    const result = await sendTcpData(sendData);
    res.send({code: 200, msg: result});
  } catch (err) {
    res.status(500).send({code: 500, msg: 'TCP数据发送失败', error: err.message});
  }
});

app.listen(servicePort, () => {
  console.log(`本地后端服务已启动，监听端口：${servicePort}`);
});

3. 启动后端服务：

node server.js

步骤2：改造React的home.js组件 #

点击按钮时调用后端的HTTP接口即可触发TCP通信，改造后代码如下：

/*home.js*/
function Home(){
    const emitOpen = async (e) => {
        // 注意原有代码的preventdefault拼写错误，正确写法为preventDefault
        e.preventDefault();
        try {
            const res = await fetch('http://127.0.0.1:3001/send-tcp', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                // 此处传入你需要通过TCP发送的实际数据
                body: JSON.stringify({sendData: '1'})
            });
            const result = await res.json();
            console.log('调用结果：', result);
        } catch (err) {
            console.error('调用失败：', err);
        }
    }
    return (
        <div className="center">  
              <Button color="secondary" onClick={emitOpen}>blabla</Button>
        </div>
    );
}

其他可选适配方案 #

• 如果你是基于Electron开发桌面端应用，可以直接在Electron主进程调用net模块，React所在的渲染进程通过IPC通信通知主进程执行TCP逻辑，不需要额外搭建HTTP服务。
• 如果TCP服务端支持改造，可以改为WebSocket协议，前端直接通过WebSocket和服务端通信，不需要中转服务。

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