扫码登录背后的黑科技：PC 端与手机端是如何通过 WebSocket 实现“秒级同步”的？-平芜编程栈

📱 前言：世界上最遥远的距离

你有没有想过这样一个问题：
当你坐在电脑前打开淘宝，网页上出现一个二维码。
你掏出手机扫了一下，点击“确认登录”。
神奇的事情发生了：电脑网页竟然不需要刷新，瞬间就跳进了首页！

手机和电脑，明明是两个毫无关联的设备，它们不在同一个局域网，甚至可能相隔千里。手机是怎么“告诉”电脑：“喂，我准许你登录了”？

很多人会说：“轮询呗，网页每秒问一次服务器。”
错！这种做法既浪费流量又延迟高。
今天，我们就来揭秘大厂通用的WebSocket 长连接方案，看看这套“隔空传音”的黑科技是如何实现的。

🧠 核心原理：那张二维码里到底藏了什么？

首先，我们要打破一个认知误区：手机并不是直接跟电脑说话。
它们之间有一个中间人——服务器。而连接它们的纽带，就是一个全局唯一的 ID (UUID)。

当你在 PC 端打开登录页时，服务器生成了一个 UUID（比如8f9a2d...），并把它做成了二维码。

PC 端：手里拿着这个 UUID，眼巴巴地等着服务器通知。
手机端：扫码后读到了这个 UUID，告诉服务器：“我是用户 A，我授权这个 UUID 登录。”
服务器：收到手机指令后，找到手持这个 UUID 的 PC 端，发个消息说：“你通过了！”

🚀 架构演进：从“轮询”到“长连接”

1. 青铜方案：HTTP 短轮询 (Short Polling)

PC 端每隔 1 秒发一个 HTTP 请求问服务器：“有人扫码了吗？”

缺点：QPS 极高，服务器压力山大，且有 1 秒的延迟感。

2. 黄金方案：WebSocket 长连接

PC 端和服务器建立一条全双工的 TCP 长连接。
一旦手机扫码成功，服务器主动推送消息给 PC。

优点：毫秒级同步，服务器资源消耗极低。

交互时序图：

🛠️ 实战开发：Spring Boot + WebSocket 实现

1. 服务端：建立 WebSocket 通道

我们需要维护一个ConcurrentHashMap，用于存储UUID -> WebSocketSession的映射关系，这样服务器才能根据 UUID 找到对应的 PC 连接。

@ServerEndpoint("/ws/login/{uuid}")@ComponentpublicclassQrCodeWebSocket{// 存储在线连接：Key=UUID, Value=SessionprivatestaticfinalMap<String,Session>SESSIONS=newConcurrentHashMap<>();@OnOpenpublicvoidonOpen(Sessionsession,@PathParam("uuid")Stringuuid){SESSIONS.put(uuid,session);System.out.println("PC端已连接，等待扫码: "+uuid);}@OnClosepublicvoidonClose(@PathParam("uuid")Stringuuid){SESSIONS.remove(uuid);}/** * 发送消息给 PC 端 */publicstaticvoidsendMessage(Stringuuid,Stringmessage){Sessionsession=SESSIONS.get(uuid);if(session!=null&&session.isOpen()){try{session.getBasicRemote().sendText(message);}catch(IOExceptione){e.printStackTrace();}}}}

2. 服务端：手机确认接口

当用户在手机点击“确认登录”时，调用此 HTTP 接口。

@RestController@RequestMapping("/api/login")publicclassLoginController{@PostMapping("/confirm")publicResultconfirmLogin(@RequestBodyLoginRequestrequest){Stringuuid=request.getUuid();StringuserId=request.getUserId();// 从手机端 Token 解析出来// 1. 校验 UUID 是否过期 (查 Redis)if(!redisTemplate.hasKey("qr:"+uuid)){returnResult.fail("二维码已失效");}// 2. 生成 PC 端专用的临时 TokenStringpcToken=jwtService.createToken(userId);// 3. 【核心步骤】通过 WebSocket 通知 PC 端// 构造消息体Stringmessage=newJSONObject().put("code",200).put("type","LOGIN_SUCCESS").put("token",pcToken).toString();QrCodeWebSocket.sendMessage(uuid,message);returnResult.success();}}

3. 前端：PC 网页端逻辑

// 生成 UUID 后constuuid="8f9a2d...";constws=newWebSocket("ws://localhost:8080/ws/login/"+uuid);ws.onmessage=function(event){constdata=JSON.parse(event.data);if(data.type==="LOGIN_SUCCESS"){console.log("手机确认了！跳转首页...");localStorage.setItem("token",data.token);window.location.href="/index";}};ws.onclose=function(){console.log("二维码已过期，请刷新");};

🛡️ 安全性思考：二维码被截获了怎么办？

如果黑客把你的二维码截图发给他自己，他扫了，你的电脑岂不是登录了他的号？或者反过来，你扫了黑客的码，黑客在异地登录了你的号？

这就是QRLacking（二维码劫持）攻击。
防御策略：

一次性 Token：WebSocket 推送给 PC 的 Token 应该是短效的（如 30 秒有效），PC 端拿到后必须立刻换取长效 Token。
二次确认：手机端扫码后，必须在界面上显示“即将登录 Windows Chrome 浏览器，IP 地址：上海”，让用户肉眼确认是否是本人操作。
状态绑定：Redis 中的 UUID 状态机设计：WAITING(等待扫码) ->SCANNED(已扫码，手机端显示头像) ->CONFIRMED(已确认)。