JavaScript 中怎么用 WebSocket 实现扫码登录状态同步-js教程-PHP中文网

websocket实现扫码登录最常用、最实时，核心是pc端建连并传clientid，二维码嵌入该id，手机扫码确认后，服务端通过映射关系精准推送登录成功事件，且仅推送一次。

javascript 中怎么用 websocket 实现扫码登录状态同步

WebSocket 是实现扫码登录状态同步最常用、最实时的方式。核心思路是：用户在网页端打开登录页时，前端创建 WebSocket 连接并获取唯一标识（如 clientId 或临时 token）；二维码生成服务将该标识嵌入二维码；用户用 App 扫码后，App 向后端提交确认，后端通过 WebSocket 主动向对应网页端推送登录成功事件。

1. 前端建立 WebSocket 并注册客户端身份

网页端加载登录页时，立即连接 WebSocket 服务，并发送一个临时客户端 ID（建议用 UUID 或加密随机字符串），用于后续精准推送：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const clientId = 'web_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
const ws = new WebSocket('wss://api.example.com/ws/login');

ws.onopen = () => {
  ws.send(JSON.stringify({ type: 'register', clientId }));
};

ws.onmessage = (e) => {
  const data = JSON.parse(e.data);
  if (data.type === 'login_success') {
    alert('登录成功！正在跳转...');
    window.location.href = '/home';
  }
};

2. 后端维护客户端映射关系

服务端需用内存（如 Map）或 Redis 缓存 clientId → WebSocket 实例 的映射，确保扫码成功后能定向推送。以 Node.js + ws 库为例：

const clients = new Map(); // 内存映射（生产环境建议用 Redis）

wsServer.on('connection', (ws, req) => {
  ws.on('message', (data) => {
    const msg = JSON.parse(data);
    if (msg.type === 'register' && msg.clientId) {
      clients.set(msg.clientId, ws); // 绑定
    }
  });

  ws.on('close', () => {
    for (const [id, socket] of clients) {
      if (socket === ws) clients.delete(id);
    }
  });
});

3. 扫码确认后服务端主动推送

当 App 调用登录确认接口（如 POST /api/login/confirm）时，后端根据请求中携带的 clientId 查找对应 WebSocket 连接，并发送登录成功事件：

// Express 接口示例
app.post('/api/login/confirm', (req, res) => {
  const { clientId, userId, token } = req.body;
  
  const ws = clients.get(clientId);
  if (ws && ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify({
      type: 'login_success',
      userId,
      token,
      timestamp: Date.now()
    }));
    clients.delete(clientId); // 一次性使用，防止重复触发
  }

  res.json({ code: 0, msg: '已通知前端' });
});