如何通过Socket.io WebSocket实现前端按钮触发Node.js后端接口？

后端修改步骤 #

先把原HTTP接口里的业务逻辑抽成独立函数，既能保留原HTTP接口功能，又能让WebSocket事件复用同一逻辑：

const express = require('express');
const app = express();
const http = require('http');
const { Server } = require('socket.io');
const cors = require('cors');

app.use(cors());

// 抽离业务逻辑为独立函数，方便复用
const updateSomething = () => {
  // 这里写原来 /updateSomething 接口里的业务代码
  console.log('执行更新操作');
  // 返回处理结果（可根据实际需求调整）
  return { success: true, message: '更新完成' };
};

// 保留原HTTP接口（如果需要继续通过HTTP访问的话）
app.get("/updateSomething", (req, res) => {
  const result = updateSomething();
  res.json(result);
});

const server = http.createServer(app);

const io = new Server(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST", "PUT"], // 修正原代码拼写错误：method → methods
  },
});

io.on("connection", (socket) => {
  console.log(`user connected: ${socket.id}`);

  // 监听前端发来的"触发更新"事件
  socket.on('triggerUpdate', () => {
    const result = updateSomething();
    // 将处理结果返回给前端
    socket.emit('updateResult', result);
  });

  socket.on('disconnect', () => {
    console.log(`user disconnected: ${socket.id}`);
  });
});

server.listen(3001, () => {
  console.log("websocket online");
});

前端实现步骤 #

在HTML页面中引入Socket.IO客户端，连接后端服务，给按钮绑定点击事件发送WebSocket消息，并监听后端返回的结果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>WebSocket触发更新示例</title>
  <!-- 引入Socket.IO客户端库 -->
  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
</head>
<body>
  <button id="doSomethingBtn">DoSomething</button>

  <script>
    // 连接到后端WebSocket服务
    const socket = io('http://localhost:3001');

    // 获取按钮元素
    const updateBtn = document.getElementById('doSomethingBtn');

    // 绑定按钮点击事件
    updateBtn.addEventListener('click', () => {
      // 向后端发送触发更新的事件
      socket.emit('triggerUpdate');
    });

    // 监听后端返回的处理结果
    socket.on('updateResult', (result) => {
      console.log('后端处理结果:', result);
      // 这里可以添加用户提示，比如弹窗或页面内容更新
      alert(result.message);
    });

    // 可选：监听连接状态
    socket.on('connect', () => {
      console.log('已连接到WebSocket服务');
    });

    socket.on('disconnect', () => {
      console.log('与WebSocket服务断开连接');
    });
  </script>
</body>
</html>

说明 #

WebSocket是双向实时通信协议，和HTTP的请求-响应模式不同，不能直接通过WebSocket"调用"HTTP接口。上面的方案通过自定义事件实现：前端点击按钮时发送triggerUpdate事件给后端，后端收到事件后执行抽离好的业务逻辑，再通过updateResult事件把结果返回给前端，既复用了业务代码，又实现了WebSocket触发操作的需求。

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