GKE环境下React与Node.js Socket连接失败问题排查

核心问题分析 #

你的Socket.io连接失败主要是两个原因：

• Ingress没配置WebSocket支持：NGINX Ingress默认不会处理WebSocket的协议升级请求，而Socket.io依赖WebSocket（或HTTP长轮询）建立持久连接，没配置的话连接会被直接断开。
• 前端连接方式错了：你直接连dev.host.com:4001，但GKE的Ingress只对外暴露80/443端口，4001是后端ClusterIP Service的内部端口，外部根本访问不到，必须走Ingress的/api路由路径。

具体修复步骤 #

1. 更新Ingress配置，添加WebSocket支持 #

修改ingress.yml，加上NGINX Ingress处理WebSocket的关键注解：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: my-ingress
  annotations:
    kubernetes.io/ingress.class: "nginx"
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
    # 新增WebSocket支持的注解
    nginx.ingress.kubernetes.io/websocket-services: "backend-service"
    nginx.ingress.kubernetes.io/proxy-read-timeout: "3600"
    nginx.ingress.kubernetes.io/proxy-send-timeout: "3600"
    nginx.ingress.kubernetes.io/proxy-set-header: "Upgrade $http_upgrade"
    nginx.ingress.kubernetes.io/proxy-set-header: "Connection \"upgrade\""
spec:
  tls:
  - hosts:
    - dev.host.com
    secretName: my-ingress-tls      
  rules:
  - host: dev.host.com
    http:
      paths:
      - path: /
        pathType: ImplementationSpecific
        backend:
          service:
            name: frontend-service
            port:
              number: 3000
      - path: /api
        pathType: ImplementationSpecific
        backend:
          service:
            name: backend-service
            port:
              number: 4001

这些注解的作用：

• websocket-services：指定处理WebSocket流量的后端服务
• 超时设置：避免NGINX主动断开长连接
• 头信息设置：传递WebSocket升级必须的HTTP头

2. 修正前端Socket.io连接代码 #

不能直接连端口，要通过Ingress的/api路径连接，还要适配Socket.io的默认路径规则：

// 前端socket.io-client连接示例
import { io } from 'socket.io-client';

// 正确的连接方式：用HTTPS，路径指向/api下的socket.io端点
const socket = io('https://dev.host.com', {
  path: '/api/socket.io', // Socket.io默认会在路由后加/socket.io后缀
  transports: ['websocket', 'polling'], // 优先用WebSocket，降级用长轮询
});

如果后端Socket.io自定义了路径，这里的path要同步修改。

3. 后端Socket.io配置检查 #

确保后端开了跨域支持，并且路径和前端匹配：

// 后端Node.js Socket.io配置示例
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);

// 配置跨域，允许前端域名访问
const io = new Server(server, {
  cors: {
    origin: 'https://dev.host.com',
    methods: ['GET', 'POST'],
    credentials: true
  },
  path: '/api/socket.io' // 和前端的path参数保持一致
});

// 监听容器的4000端口（和Deployment配置对应）
server.listen(4000, () => {
  console.log('Server running on port 4000');
});

4. 验证配置 #

更新完配置后，用以下命令确认状态：

# 查看Ingress状态
kubectl get ingress my-ingress

# 检查后端服务状态
kubectl get service backend-service

# 查看NGINX Ingress控制器日志，排查连接问题
kubectl logs -n ingress-nginx deployment/ingress-nginx-controller

额外注意事项 #

• 确认后端Pod正常运行，没有CrashLoopBackOff这类异常
• 如果用的是GKE托管的NGINX Ingress，确保控制器版本在v0.28以上（都支持WebSocket）
• 测试时可以临时关闭ssl-redirect，先用HTTP排除证书问题，再切回HTTPS

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