如何结合Socket.io与Slack Events API实现消息同步至React客户端

我有一个运行在localhost:8080的Socket.io服务器，希望接收Slack消息并在React客户端展示。以下是我的现有代码：

服务端代码 #

var express = require("express");
var socket = require("socket.io");
var app = express();
const { App } = require("@slack/bolt");

const appBolt = new App({
  token: "xoxb-***",
  appToken: "xapp-1-***",
  socketMode: true,
});

const server = app.listen(8080, function () {
  console.log("server is running on port 8080");
  appBolt.start(process.env.PORT || 8080);
});

const io = socket(server);

io.on("connection", (socket) => {
  console.log("socket.id: ", socket.id);
  socket.on("SEND_MESSAGE", function (data) {
    io.emit("RECEIVE_MESSAGE", data);
  });
});

客户端React代码 #

import { useState } from 'react';
import io from 'socket.io-client';

const socket = io("localhost:8080");

function App() {
  const [message, setMessage] = useState("");
  const [messages, setMessages] = useState([]);

  const addMessage = (data) => {
    setMessages([...messages, data]);
  };

  socket.on("RECEIVE_MESSAGE", (data) => {
    console.log("MESSAGE_RECIEVED", data);
    addMessage(data);
  });
}

已实现的Slack消息接收逻辑 #

appBolt.event('message', ({ event, say }) => {  
    say(`Hello world, <@${event.user}>!`);
    return event;
});

请问如何结合Socket.io与Slack Events API实现数据传输，将Slack消息发送至React客户端？

1. 修改服务端Slack事件处理，转发消息到Socket.io客户端 #

在服务端的Slack message事件回调中，直接通过Socket.io的io.emit()方法将Slack消息广播给所有连接的React客户端，确保io变量在事件作用域内可访问：

// 服务端更新Slack message事件逻辑
appBolt.event('message', ({ event, say }) => {  
    say(`Hello world, <@${event.user}>!`);
    // 提取Slack消息关键数据并转发到客户端
    io.emit("RECEIVE_MESSAGE", {
        text: event.text,
        sender: event.user,
        time: event.ts
    });
});

2. 优化React客户端的状态更新逻辑 #

使用React函数式更新避免闭包导致的状态异常，同时通过useEffect管理Socket.io事件监听的生命周期，防止重复绑定：

import { useState, useEffect } from 'react';
import io from 'socket.io-client';

const socket = io("localhost:8080");

function App() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const handleNewMessage = (data) => {
      console.log("MESSAGE_RECIEVED", data);
      // 函数式更新确保获取最新状态
      setMessages(prevMessages => [...prevMessages, data]);
    };

    socket.on("RECEIVE_MESSAGE", handleNewMessage);

    // 组件卸载时移除监听
    return () => {
      socket.off("RECEIVE_MESSAGE", handleNewMessage);
    };
  }, []);

  // 渲染消息列表
  return (
    <div className="message-container">
      <h2>Slack消息同步</h2>
      <ul>
        {messages.map((msg, idx) => (
          <li key={idx}>
            <span>用户<@${msg.sender}>: </span>
            <span>{msg.text}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

3. 调整服务端启动顺序 #

Socket模式下Slack Bolt不需要占用8080端口，修改启动逻辑避免端口冲突：

const server = app.listen(8080, function () {
  console.log("server is running on port 8080");
  // Socket模式下start无需指定端口
  appBolt.start().then(() => {
    console.log("Slack Bolt应用已启动");
  });
});

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