Flask与React基于Socket.IO的聊天应用无法连接问题咨询

开发了基于Flask（后端）和React（前端）的聊天应用，使用Socket.IO实现客户端与服务端通信，但两者无法建立连接。以下是后端和前端代码，请求排查问题。

后端Python Flask代码：

from flask import Flask, send_from_directory
from  flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config ['SECRET_KEY'] = 'secret_key'
socketio = Socket IO(app)

@socketio.on('message')
def handle_message(message):
  print('Received message: ' + message)
  emit('message', message, broadcast=True)

if __name__ == '__main__':
  socketio.run(app)

前端React代码：

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

const socket = io.connect("http://localhost:5000");

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

  useEffect(() => {
    socket.on("message", (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });

    return () => {
      socket.disconnect();
    };
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (message.trim() !== "") {
      socket.emit("message", message);
      setMessage("");
    }
  };

  return (
    <div>
      <div id="message-container">
        {messages.Map((message, index) => (
          <div key={index}>{message}</div>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="Type your message..."
        />
        `<button type="submit">Send</button>`
      </form>
    </div>
  );
}

export default App;

1. 后端Socket.IO初始化拼写错误 #

代码中 socketio = Socket IO(app) 存在空格错误，正确写法是 socketio = SocketIO(app)。这个错误会直接导致后端无法初始化Socket.IO服务，客户端自然无法建立连接。

2. 跨域配置缺失 #

React前端默认运行在http://localhost:3000，而Flask后端运行在http://localhost:5000，属于不同端口，浏览器同源策略会阻止跨域Socket连接。需要在Flask-SocketIO中配置CORS：

# 先安装依赖：pip install flask-cors
from flask_cors import CORS

app = Flask(__name__)
CORS(app)
socketio = SocketIO(app, cors_allowed_origins="*")  # 生产环境建议限定具体域名，不要用通配符

3. 前端数组方法拼写错误 #

messages.Map 应为 messages.map（JavaScript数组方法是小写的map），这个错误会导致消息列表渲染失败，虽不直接影响连接，但会破坏页面功能。

4. 前端按钮标签格式错误 #

按钮被错误地用反引号包裹，应改为正常的JSX标签：

<button type="submit">Send</button>

修复后的完整代码示例 #

修复后后端代码：

from flask import Flask, send_from_directory
from flask_socketio import SocketIO, emit
from flask_cors import CORS

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret_key'
CORS(app)
socketio = SocketIO(app, cors_allowed_origins="*")

@socketio.on('message')
def handle_message(message):
    print('Received message: ' + message)
    emit('message', message, broadcast=True)

if __name__ == '__main__':
    socketio.run(app, debug=True)

修复后前端代码：

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

const socket = io.connect("http://localhost:5000");

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

  useEffect(() => {
    const handleNewMessage = (newMessage) => {
      setMessages(prev => [...prev, newMessage]);
    };
    socket.on("message", handleNewMessage);

    return () => {
      socket.off("message", handleNewMessage);
      socket.disconnect();
    };
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (message.trim()) {
      socket.emit("message", message);
      setMessage("");
    }
  };

  return (
    <div>
      <div id="message-container">
        {messages.map((msg, index) => (
          <div key={index}>{msg}</div>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="Type your message..."
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

export default App;

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