Heroku部署Apollo GraphQL时WebSocket订阅连接失败该如何解决？

核心错误是客户端WebSocket连接地址配置错误，Heroku平台的WSS协议流量默认走443端口，不需要显式指定端口，你代码中添加的:80端口参数会导致连接请求发往错误端口，最终连接失败。

1. 修改客户端WebSocket连接配置 #

修改client/src/index.js中的wsLink配置，移除硬编码的端口，自动适配本地开发和线上环境：

// 自动适配ws/wss协议，无需手动切换
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
const wsLink = new WebSocketLink({
  uri:  `${wsProtocol}//${window.location.host}/subscriptions`,
  options: {
    reconnect: true,
    keepAlive: 30000 // 30秒心跳保活，避免Heroku 55秒无流量自动断连
  }
})

2. 可选优化（生产环境建议调整） #

你当前使用的graphql-subscriptions内置内存PubSub仅支持单实例运行，若Heroku开启多dyno扩容，会出现订阅消息丢失的问题，生产环境建议替换为Redis、Postgres等支持跨实例通信的PubSub实现。
另外你使用的subscriptions-transport-ws库已停止维护，后续可以迁移到官方推荐的graphql-ws库适配新版Apollo客户端。

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