与 AppSync 的 Websocket 连接：错误代码 400“NoProtocolError”

Question

我正在尝试与 appsync 建立直接的 websocket 连接，但在连接后我不断收到错误NoProtocolError( {"payload":{"errors":[{"message":"NoProtocolError","errorCode":400}]},"type":"connection_error"}')

这是我的代码

let ws = undefined;

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

    // just log everything
    ws.onopen    = (e) => {console.log('Socket opened',   e);};
    ws.onmessage = (e) => {console.log('Msg    received', e);};
    ws.onclose   = (e) => {console.log('Socket closed',   e);};
    ws.onerror   = (e) => {console.log('Socket error',    e);};
};

Answer 1

关于眼前的问题

该消息引用了 Websocket 构造函数的第二个参数：protocols。（MDN参考这里）

您需要指定协议（更精确的子协议），如下所示：

ws = new WebSocket(url, ['graphql-ws']);

然而

请注意，您还缺少标头信息、有效负载信息和整个握手过程。

只有更改添加协议才会出现下一个错误：Both, the "header", and the "payload" query string parameters are missing。

更多信息

阅读有关如何在 aws.amazon.com 上建立连接的更多信息。

打开带有标头和负载的 websocket

const api_header = {
  host: 'XXXX.appsync-api.YYYY.amazonaws.com',
  'x-api-key': '<YOUR APPSYNC API KEY>',
};

// payload should be an empty JSON object
const payload = {};

const base64_api_header = btoa(JSON.stringify(api_header));
const base64_payload = btoa(JSON.stringify(payload));

const appsync_url = url + '?header=' + base64_api_header + '&payload=' + base64_payload;

ws = new WebSocket(appsync_url, ['graphql-ws']);

请注意，主机是appsync-api而不是 appsync-realtime-api

这样，您应该会看到一条“ka”消息，并且可以继续握手（请参阅下一节）。

如何进行握手

请参阅 AWS 上的此文档

参考

• WebSocket API 参考（提到第二个参数）
• WebSocket 到 AppSync 的 PHP 实现
• Amazon 关于如何连接到 AppSync 的文档