Flutter结合Node.js使用Socket.io连接Heroku部署服务无响应如何解决？

1. 版本不兼容 #

socket_io_client ^1.0.1仅适配服务端Socket.IO v3.x、v4.x版本，若服务端安装的是v2.x版本会直接连接失败。
在服务端项目目录执行npm list socket.io查看当前版本，版本不符时执行npm install socket.io@4安装匹配版本。

2. 服务端配置缺失 #

2.1 未监听正确端口 #

Heroku会动态分配端口，服务必须监听process.env.PORT才能正常对外提供服务，在你现有服务端代码末尾添加监听逻辑：

const PORT = process.env.PORT || 3000;
http.listen(PORT, () => {
  console.log(`服务运行在端口${PORT}`);
});

2.2 未配置跨域规则 #

Socket.IO默认拦截跨域请求，修改服务端io初始化代码添加跨域配置：

// 替换原来的const io = require('socket.io')(http);
const io = require('socket.io')(http, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});

3. Flutter端配置错误 #

3.1 初始化未指定传输协议 #

默认传输策略包含长轮询，容易被Heroku网关拦截，修改socket初始化代码指定websocket传输：

IO.Socket socket = IO.io('https://xxxherokuapp.com/', 
  OptionBuilder()
    .setTransports(['websocket'])
    .enableAutoConnect()
    .build()
);

3.2 缺少网络权限 #

• Android端需在android/app/src/main/AndroidManifest.xml中添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />

• iOS端如果出现连接问题，可在ios/Runner/Info.plist中添加HTTP请求允许配置：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

4. 排查日志添加 #

在Flutter端添加错误事件监听，可直接定位具体报错原因：

socket.onConnectError((err) => print("连接错误：$err"));
socket.onError((err) => print("Socket错误：$err"));
socket.onDisconnect((_) => print("连接断开"));

内容的提问来源于stack exchange，提问作者gbeto Jean-José