Phoenix框架WebSocket连接失败问题求助

问题核心 #

前端发起WebSocket请求时URL携带token=undefined，导致服务器RotbWeb.UserSocket直接拒绝连接；日志中还出现过有效token被拒绝的情况，问题此前为间歇性，目前已持续无法恢复。

排查与修复步骤 #

1. 前端token获取逻辑校验 #

• 确认WebSocket初始化时机：必须保证token已从本地存储（localStorage/sessionStorage）或接口请求中正确获取后，再创建Socket实例，避免异步逻辑未完成导致token未赋值。
• 错误示例（直接使用未校验的token）：

const token = localStorage.getItem('user_token');
// 若localStorage无值，token直接为undefined
const socket = new Socket("/socket/websocket", { params: { token: token } });
socket.connect();

• 修复示例：

const token = localStorage.getItem('user_token');
if (!token) {
  // 处理token缺失场景，如跳转登录页
  window.location.href = '/login';
  return;
}
const socket = new Socket("/socket/websocket", { params: { token: token } });
socket.connect();

2. 服务器端UserSocket认证逻辑排查 #

• 检查RotbWeb.UserSocket的connect/3函数，明确token校验规则：
  • 是否对undefined类型的token直接返回:error？
  • 有效token（日志中SFMyNTY...格式的字符串）被拒绝的原因：排查JWT解析、过期时间校验、权限验证逻辑是否存在异常。
• 服务器端代码排查点示例：

defmodule RotbWeb.UserSocket do
  use Phoenix.Socket

  def connect(%{"token" => token}, socket, _connect_info) do
    case verify_token(token) do
      {:ok, user_id} ->
        {:ok, assign(socket, :user_id, user_id)}
      {:error, _reason} ->
        :error # 此分支会直接拒绝连接
    end
  end

  # 未携带token或token为undefined时，进入此分支拒绝连接
  def connect(_params, _socket, _connect_info), do: :error
end

• 优化建议：针对undefined token添加明确的日志输出，同时排查verify_token函数是否存在依赖服务（如Redis）连接波动的问题。

3. 缓存与会话状态一致性检查 #

• 前端侧：确认token是否被意外清除（如页面刷新触发存储过期、其他代码篡改存储）。
• 服务器侧：检查会话存储服务（如Redis）是否存在连接异常，导致token校验偶发失败。

4. 本地环境与网络校验 #

• 确认本地开发环境的端口、域名配置正确，排除跨域或端口冲突问题。
• 查看浏览器控制台是否有前置接口错误（如获取token的接口请求失败），导致token未正常获取。

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