连接AppSync WebSocket时持续出现NoProtocolError（错误码400）求助

问题根源 #

AppSync的实时WebSocket连接并非裸连接即可使用，服务端要求连接建立后必须立即发送初始化握手消息，缺少这一步会被判定为协议不合法，返回400状态的NoProtocolError。

修复方案 #

1. 补充初始化握手消息 #

连接打开后，立刻发送包含认证信息的connection_init类型消息，示例代码如下：

let ws = undefined;

const startWebsocket = () => {
    const url = 'wss://XXXX.appsync-realtime-api.YYYY.amazonaws.com/graphql';
    ws = new WebSocket(url);

    ws.onopen = (e) => {
        console.log('Socket opened', e);
        // 发送初始化握手消息，根据你的认证方式填写对应字段
        const initMessage = {
            type: 'connection_init',
            payload: {
                // API Key认证示例，替换为你的实际API Key
                Authorization: 'your-appsync-api-key'
            }
        };
        ws.send(JSON.stringify(initMessage));
    };

    ws.onmessage = (e) => {
        console.log('Msg received', e);
        const response = JSON.parse(e.data);
        // 处理服务端的连接确认消息
        if (response.type === 'connection_ack') {
            console.log('连接已验证，可发送订阅请求');
            // 此处可添加订阅GraphQL查询的逻辑
        }
    };

    ws.onclose = (e) => {console.log('Socket closed', e);};
    ws.onerror = (e) => {console.log('Socket error', e);};
};

2. 匹配正确的认证方式 #

根据你的AppSync API配置选择对应认证字段：

• API Key认证：payload中传入Authorization: "你的API Key"
• IAM认证：需要携带签名后的IAM凭证（建议用AWS SDK生成，避免手动处理签名逻辑）
• OAuth2认证：payload中传入Authorization: "Bearer 你的OAuth Token"

3. 推荐使用官方SDK简化流程 #

手动处理WebSocket协议容易遗漏细节，推荐使用AWS Amplify的AWSAppSyncClient封装连接逻辑，它会自动处理握手、认证和订阅流程：

import AWSAppSyncClient from 'aws-appsync';
import { AUTH_TYPE } from 'aws-appsync/lib/link/auth-link';
import gql from 'graphql-tag';

const client = new AWSAppSyncClient({
    url: '你的AppSync API端点',
    region: '你的AWS区域',
    auth: {
        type: AUTH_TYPE.API_KEY,
        apiKey: '你的AppSync API Key'
    }
});

// 示例订阅请求
client.subscribe({
    query: gql`
        subscription NewItem {
            newItem {
                id
                name
            }
        }
    `
}).subscribe({
    next: data => console.log('订阅数据:', data),
    error: err => console.error('订阅错误:', err)
});

核心注意点 #

AppSync实时WebSocket遵循GraphQL Subscription协议规范，connection_init是连接建立后的必填第一步，只有收到服务端返回的connection_ack消息后，才能发送具体的订阅请求。

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