Websocket 超时太快了答案

【问题标题】：Websocket timing out too soonWebsocket 超时太快了
【发布时间】：2017-06-16 18:01:41
【问题描述】：

我已经设置了一个标准的 Phoenix websocket/channel 环境，但我没有使用提供的 socket.js - 我有自己的（非常简单的）代码来连接到频道和主题。但是，我无法让套接字持续超过一分钟左右。有什么方法可以定义套接字的超时时间吗？我在 Phoenix 端没有任何特殊配置（按照文档的所有标准）

我的javascript代码如下：

const ws = new WebSocket(sock_url);
ws.onmessage = (msg) => {
  const { payload, event } = JSON.parse(msg.data);
  if (!event.startsWith("phx_")) {
    onMessage(payload.body);
  }
};
ws.onclose = (code, reason) => {
  onClose(code, reason);
};
ws.onopen = () => {
  ws.send(JSON.stringify({
    topic: `users_socket:${user_id}`,
    event: "phx_join",
    payload: {},
    ref: '1'
  }));
};

更新：我最终使用了 Phoenix 附带的 socket.js 文件，正如大家所建议的那样——它只是做了我需要的一切。感谢所有回答的人:)

【问题讨论】：

你有什么理由不只是使用提供的凤凰插座模块吗？
它是一个更大的库的一部分，其要求是保持代码简单且不受“外部”库的影响。但是如果我最终遇到太多此类问题，我可能最终会使用 phoenix 附带的 JS 代码。

标签： javascript sockets websocket elixir phoenix-framework

【解决方案1】：

我正在使用 Websockets 开发一个项目（使用 Go 而不是 Phoenix 或 Elixir），我遇到了同样的断开连接问题，我通过“ping” websocket 即以特定间隔发送消息。

也许你的 Javascript 中可以有这样的东西。

ws.onopen = () => {
  ws.send(/** YOUR CODE */);

  // Send a ping event every 10 seconds
  setInterval(() => ws.send(JSON.stringify({ event: "ping" })), 10000);
}

并在服务器端相应地处理这个新的事件类型。您也可以尝试监视onclose 事件并根据原因重新打开连接。您可以在Mozilla docs 中找到此类事件代码的列表。

【讨论】：

谢谢！我正在考虑类似的解决方案，但想知道 Phoenix 套接字实现是否内置了一些东西。如果没有，我会将其标记为答案。
Phoenix 确实做到了 github.com/phoenixframework/phoenix/blob/v1.2/web/static/js/… 我建议坚持使用标准实现，它可以处理更多的事情，例如不支持 websockets 的浏览器的回退、出现连接问题时自动重新连接、消息的本地缓冲当客户端离线时，处理状态信息等等。仍然只有 500 LOC 左右（用cloc 计算）。此外，您不会从官方客户端的错误修复和更新中受益。强烈建议坚持使用标准溶液。
@PatrickOscity 谢谢帕特里克。我从未使用过 Phoenix 或 Elixir，所以我不知道框架的细节。只是给出了一个通用的解决方案。我同意 OP 应该尽可能使用框架的功能。
值得在network 标签中查看 Phoenix 如何敲入通道以保持套接字的连接处于唤醒状态。

【解决方案2】：

phoenix 后端预计每 30 秒 ping 一次。您可以像这样重新配置它：

defmodule UserSocket do
  use Phoenix.Socket

  ## Transports
  transport :websocket, Phoenix.Transports.WebSocket,
    timeout: 300_000, # 5 minutes
    transport_log: :debug
  ...

end

如果您不关心超时，您可以将其设置为非常高。上面的代码将其设置为 5 分钟。

一般而言，phoenix.js 将为您实现所有这些。这是一个非常小的库。最后你会发现你实现了 lib 中的所有内容，但你错了很多东西:-)

【讨论】：