Socket.io + AWS API Gateway套接字不断重新连接且永远不会触发连接

4
AWS 最近推出了具有套接字功能的 API 网关,并且可以代理到 Lambda。据我观察,AWS API 套接字完全是 WSS 协议,因此我已经完成了自定义 connect 设置,该设置在代码部分中提供。Lambda 和其他设置我已经学习过,并按照此链接中所述使用 wscat 进行了测试 - https://hackernoon.com/websockets-api-gateway-9d4aca493d39 但是,在与浏览器中的 Socket.io 集成后,它会在18-19秒后持续重新连接,但连接从未建立!Lambda 和 API 网关超时时间为30秒,我认为这可能可以忽略,因为它不会在4-5分钟内打断与 wscat 的连接。
我对套接字很陌生,评论中的代码显示了我的尝试失败。我还尝试过搜索,但在 AWS API 套接字和 Socket.io 方面找不到太多信息。因此,感谢任何指导或支持。
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
</head>
<script>
    socket = io(
        `wss://abcd.execute-api.us-east-1.amazonaws.com/prod`
        , {
        path: `/prod/`,
        forceNew: true,
        // autoConnect: false,
        // reconnection: false,
        upgrade: true,
        transports: ['websocket',
        'polling',
        'flashsocket'
        ]
    });

    socket.on('connect', function () {
        socket.emit({"action":'message',"data":"hello return"}, () => {
          console.log("message Sent");
        });
  });

//         socket.emit({"action":'message',"data":"hello return"}, () => {
//           console.log("message"); // true
//         });
//         socket.on('message', () => {
//         console.log("message"); // true
//       });

//       socket.on("connection", function (socket) {
//     console.log("connection")
//   })

//       socket.on('connect', () => {
//       console.log("connect"); // true
//     });

//   socket.on('connected', () => {
//       console.log("connected"); // true
//     });

//     socket.on('open', () => {
//       console.log("open"); // true
//     });

//   socket.on('disconnect', (reason) => {
//    console.log("disconnect->",reason);
//    // if (reason === 'io server disconnect') {
//     //   // the disconnection was initiated by the server, you need to reconnect manually
//     //   socket.connect();
//     // }
//     // else the socket will automatically try to reconnect
//   });

//   socket.on('close', (reason) => {
//    console.log("close->",reason);
//    // if (reason === 'io server disconnect') {
//     //   // the disconnection was initiated by the server, you need to reconnect manually
//     //   socket.connect();
//     // }
//     // else the socket will automatically try to reconnect
//   });

//   // socket.open();
//   // console.log(socket);

//   socket.on( (res) => {
//     console.log("res", res);
//   });



//   socket.on('reconnect', (attemptNumber) => {
//     console.log("reconnected", attemptNumber); // true
//   });

//   socket.on('reconnecting', (attemptNumber) => {
//     console.log("reconnecting...", attemptNumber); // true
//   });

//   socket.on('reconnect_error', (error) => {
//     console.log("reconnect_error",error);
//   });

//   socket.on('reconnect_attempt', (error) => {
//     console.log("reconnect_attempt->", error)
//     // socket.io.opts.transports = ['polling', 'websocket'];
//   });

//   socket.on('error', (error) => {
//     console.log("error->", error);
//   });



//   socket.on('ping', () => {
//     console.log("ping");
//   });

//   socket.on('pong', () => {
//     console.log("ping");
//   });


  </script>
</html>

我也遇到了同样的问题。你找到什么解决方法了吗? - Hans Araya
1
一年过去了,但没有太多文档可供参考。我放弃了,用原生的WebSocket JS库替换了Socket.io。Socket.io文档称它们在头文件方面并不严格遵循WebSocket标准(根据他们的说法是无法更改),这可能解释了为什么无法与AWS建立连接。 - Hans Araya
2
是的,当然可以。您需要实现一个保持连接/ ping-pong / 心跳功能(例如 https://github.com/websockets/ws#how-to-detect-and-close-broken-connections 中指定的功能)。我不确定 Socket.IO 是否支持此功能,但它可能会在后台执行。 - Hans Araya
@VishvendraSingh,能否分享一下使用antve websocket库的客户端代码?我尝试实现了它,但是无法使其工作。 - Mr Pablo
1
@MrPablo非常抱歉,我很晚才看到您的评论,我一定会分享我的代码,但让我先确认它是否仍在生产中运行。我会尽快更新您。 - Vishvendra Singh
显示剩余5条评论
1个回答

0
我在Nuxt + Vuetify中测试了下面的Vue2代码,我想发布Vue3版本,但我仍在尽力在工作后的少量时间内完成此操作。欢迎任何更正意见。谢谢。
export default {
  data() {
    return {
      socketconnection: {},
      listenersStarted: false,
    }
  },
  created() {
    this.onLoad()
    this.notificationDialog()
    this.startListeners()
    this.$on('serverSelected', (server) => {
      console.log('ran from $on server--', server)
      const message = {
        text: server,
        right: false,
        ts: new Date()
      }
      this.$store.commit('setMessage', message, { root: true })
    })
  },
  methods: {
    onLoad() {
      try {
        if (!localStorage.getItem('_t')) { return true }
        if (this.socketconnection === true) {
          console.log('socket already there... reconn unrequried!')
          return true
        }
        const token = localStorage.getItem('_t')
        const wsUri = `wss://test.example.com/prod?token=${token}`
        const websocket = new WebSocket(wsUri)
        websocket.onopen = (evt) => {
          this.socketconnection = true
        }
        websocket.onclose = (evt) => { this.onClose(evt) }
        websocket.onmessage = (evt) => { this.onMessage(evt) }
        websocket.onerror = (evt) => { this.onError(evt) }
      } catch (e) { console.log(e) }
    },
    onClose(evt) {
      this.socketconnection = false
      console.log('socket closed reconnecting...', evt)
      this.onLoad()
    },
    onMessage(evt) {
      console.log('evt---', evt)
      this.$emit('serverSelected', evt.data)
    },
    onError(evt) {
      console.log(evt)
    },
  }
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接