如何配置AWS Amplify对接AppSync订阅WebSocket端点并指定该端点？

我之前也碰到过这个问题，Amplify官方文档确实没太明确说明怎么分开指定两个端点，但其实在aws_appsync配置块里是支持单独设置HTTP和WebSocket地址的，刚好适配你这种有两个独立端点的场景。

具体配置方法 #

你只需要在Amplify.configure的配置对象里，给aws_appsync字段同时指定graphqlEndpoint（对应你的HTTP端点）和realtimeEndpoint（对应WebSocket端点），再配上对应的认证信息即可。

举个React项目里的示例代码：

import Amplify from 'aws-amplify';

// 从环境变量读取两个端点
const awsConfig = {
  aws_appsync: {
    graphqlEndpoint: process.env.REACT_APP_GRAPHQL_ENDPOINT_HTTP,
    realtimeEndpoint: process.env.REACT_APP_GRAPHQL_ENDPOINT_WS,
    // 根据你的AppSync认证方式选择，比如API_KEY、AMAZON_COGNITO_USER_POOLS等
    authenticationType: 'API_KEY',
    // 如果用API_KEY认证，这里填你的API密钥
    apiKey: process.env.REACT_APP_APPSYNC_API_KEY,
  },
  // 别忘了配置区域信息
  aws_region: 'us-east-1', // 改成你的AppSync所在区域
  // 如果用Cognito认证，还要补充Cognito相关配置
  // aws_cognito_identity_pool_id: '你的身份池ID',
  // aws_cognito_user_pool_id: '你的用户池ID',
  // aws_user_pools_web_client_id: '你的客户端ID',
};

Amplify.configure(awsConfig);

配置后效果 #

配置完成后，Amplify的GraphQL SDK会自动区分使用两个端点：

• 查询（Query）和突变（Mutation）请求会走你指定的HTTP端点graphqlEndpoint
• 订阅（Subscription）请求会自动连接到realtimeEndpoint对应的WebSocket地址，实现实时推送功能

注意事项 #

• 确保两个端点的认证方式一致，比如都用API_KEY或者都用Cognito，不然订阅请求会出现认证失败的问题
• 检查环境变量是否正确加载，可以在配置前打印process.env的相关值，避免出现undefined的情况
• 如果你的AppSync API是手动创建的（不是通过Amplify CLI部署），一定要确认两个端点的区域和认证配置完全匹配

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