Django与React集成Socket.io报错：Not Found: /socket.io/ 求助

核心错误点及修复步骤 #

1. ASGI配置错误（最关键） #

你的asgi.py创建了SocketApplication但未将其设为最终入口，导致Django无法处理Socket.io请求。修改如下：

import os

from django.core.asgi import get_asgi_application

import socketio
from main.socketio import sio

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myproject.settings')

# 先初始化Django原生ASGI应用
django_application = get_asgi_application()

# 将Socket.io应用与Django应用合并，作为最终ASGI入口
application = socketio.ASGIApp(sio, django_application)

同时确认settings.py中的配置正确：

ASGI_APPLICATION = 'myproject.asgi.application'

2. Socket.io服务端代码修复 #

（1）后台任务与消息发送错误

• 禁用原生Thread，改用Socket.io自带的后台任务管理
• 异步环境下需使用异步函数，用sio.emit()和sio.sleep()替代全局socketio调用
• 补充缺失的requests导入

修改后的socketio.py：

import requests
import socketio

# 初始化异步Socket.io服务器
sio = socketio.AsyncServer(async_mode='asgi', logger=True, engineio_logger=True, cors_allowed_origins='*')

# 替换为你的数据源实际URL
DATA_SOURCE_URL = 'https://your-stock-data-api.com'

async def getPrices():
    print("Fetching Data")
    while True:
        try:
            data = requests.get(DATA_SOURCE_URL)
            data.raise_for_status()
            stock_list = data.json()['stockList']
            await sio.emit('stocks', {'data': stock_list}, namespace='/prices')
        except Exception as e:
            print(f"Data fetch error: {e}")
        await sio.sleep(60)

@sio.on('connect', namespace='/prices')
async def connect(sid, environ):
    print(f'Client connected: {sid}')
    # 避免重复启动后台任务
    if not any(task.name == getPrices.__name__ for task in sio.background_tasks):
        print("Starting background data task")
        await sio.start_background_task(getPrices)

@sio.on('disconnect', namespace='/prices')
async def disconnect(sid):
    print(f'Client disconnected: {sid}')

3. React客户端配置优化 #

• 无需在URL中拼接/prices，通过namespace参数指定命名空间
• 强制使用WebSocket传输，避免轮询路径冲突

修改后的socketio.js：

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

const URL = 'http://127.0.0.1:8000';

export const socket = io(URL, {
    transports: ['websocket'],
    namespace: '/prices'
});

4. 正确启动服务器 #

使用Uvicorn启动时需明确指定ASGI应用入口：

uvicorn myproject.asgi:application --reload

验证流程 #

1. 重启Uvicorn服务器，查看终端是否打印Socket.io初始化日志
2. 启动React应用，检查浏览器控制台是否出现连接成功提示
3. 确认Django终端是否输出"Client connected"及后台任务启动日志

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