部署在Heroku的Flask SocketIO应用未触发@socketio.on事件如何解决？

问题根源 #

你的事件监听与触发的命名空间不匹配，这是导致自定义业务代码无响应的核心原因：
从Heroku日志可以看到，服务端收到的事件属于/socket.io命名空间：

received event "message" from ax17karHdBzwH5yzAAAB [/socket.io]

但你服务端编写的@socketio.on("message")默认监听的是**根命名空间/**的事件，二者命名空间不一致，自然无法触发对应处理函数。
该问题在本地正常是因为你本地测试时注释掉的连接代码没有额外加/socket.io路径，使用的是默认根命名空间，和服务端匹配。

解决方法（二选一即可） #

方案1：修改前端连接逻辑（更推荐，改动最小） #

SocketIO默认的请求路径就是/socket.io，不需要手动在连接地址末尾拼接该路径，你只需要修改script.js中的连接代码即可：

// 原错误写法
// const socket = io.connect("http://total-confusion.herokuapp.com/socket.io");
// 修改为以下任意一种即可
const socket = io.connect("https://total-confusion.herokuapp.com");
// 更优写法：自动适配当前页面的协议、域名，无需硬写地址
// const socket = io();

修改后客户端会默认使用根命名空间，和服务端的监听规则匹配，就能正常触发on_message处理函数。

方案2：服务端新增对应命名空间的监听 #

如果你确实需要使用/socket.io作为业务命名空间，只需要修改my_app.py中的事件监听装饰器，显式指定命名空间即可：

# 原写法
# @socketio.on("message")
# 修改为
@socketio.on("message", namespace="/socket.io")
def on_message(message):
    print(f"message: {message}")
    # 发送响应也需要指定相同命名空间
    send("Hey, from the server", namespace="/socket.io")

额外优化建议 #

你当前的Procfile配置存在小问题，使用gunicorn启动Flask-SocketIO应用时，应该指定socketio实例而非原生Flask app实例，修改后可以避免潜在的连接异常：

web: gunicorn -k geventwebsocket.gunicorn.workers.GeventWebSocketWorker -w 1 my_app:socketio

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