解决用户同时登录轮询获取用户信息错乱，使用WebSocket和Server-Sent Events (SSE)

为什么更推荐WebSocket

Server-Sent Events (SSE) 是一种服务器向客户端推送数据的单向通信协议，适合某些场景，在解决用户同时登录和实时获取用户信息的问题上，WebSocket 是更好的选择。

1. SSE 的局限性

单向通信

SSE 是单向的，只能从服务器向客户端推送数据，客户端无法通过 SSE 向服务器发送数据。
如果需要双向通信（如用户登录后需要发送确认消息），SSE 无法满足需求。

连接限制

浏览器对 SSE 的连接数有限制（通常每个域名最多 6 个并发连接）。
如果用户同时打开多个页面，可能会占用大量连接，导致新的连接无法建立。

协议支持

SSE 基于 HTTP 协议，不支持二进制数据传输，只能传输文本数据。
如果需要传输二进制数据（如图片、文件），SSE 无法实现。

兼容性

虽然现代浏览器都支持 SSE，但在某些特殊环境（如旧版浏览器或移动端）可能存在兼容性问题。

2. WebSocket 的优势

双向通信

WebSocket 是全双工的，支持服务器和客户端之间的双向通信。
适合需要客户端和服务器交互的场景（如用户登录后需要发送确认消息）。

高性能

WebSocket 的连接是持久的，只有在有数据更新时才会传输数据，减少不必要的请求。
适合高频更新的场景（如实时通知、聊天应用）。

支持二进制数据

WebSocket 支持二进制数据传输，适合传输图片、文件等数据。

多用户并发

WebSocket 可以为每个用户维护独立的连接，避免多个用户之间的数据冲突。
适合多用户并发的场景。

3. 场景对比

特性	WebSocket	SSE
通信方式	双向通信	单向通信（服务器 → 客户端）
性能	高性能，适合高频更新	适合低频更新
数据传输	支持文本和二进制数据	仅支持文本数据
连接限制	无连接限制	每个域名最多 6 个并发连接
兼容性	现代浏览器均支持	部分旧版浏览器不支持
适用场景	实时通知、聊天应用、多用户并发	低频通知、状态更新

4. 为什么选择 WebSocket？

用户同时登录时需要实时获取用户信息，且可能需要双向通信（如用户登录后需要发送确认消息）。因此，WebSocket 是更好的选择，因为它：

支持双向通信，满足复杂交互需求。
性能高，适合高频更新。
支持多用户并发，避免数据冲突。

5. SSE 的适用场景

SSE 适合以下场景：

低频通知：如新闻更新、股票价格变动。
状态更新：如任务进度、系统状态。
单向通信：只需要服务器向客户端推送数据。

如果你的场景是单向的、低频的，且不需要客户端向服务器发送数据，SSE 是一个简单的选择。

6. 总结

推荐使用 WebSocket，因为它支持双向通信、性能高、适合多用户并发。
SSE 适合低频、单向的场景，但在用户同时登录和实时获取用户信息的问题上，WebSocket 是更好的选择。

实现步骤

解决用户同时登录时轮询获取用户信息出错的问题，推荐使用 WebSocket。以下是详细的原因和实现方法：

1. 后端实现 WebSocket 服务器

安装依赖

npm install ws

代码实现

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 }); // WebSocket 服务器端口// 存储所有连接的客户端
const clients = new Map();wss.on('connection', (ws, req) => {console.log('客户端已连接');// 从请求中获取用户标识（如 openid）const openid = new URL(req.url, 'http://localhost').searchParams.get('openid');if (openid) {clients.set(openid, ws); // 将用户标识和 WebSocket 连接关联}// 监听客户端消息ws.on('message', (message) => {console.log('收到客户端消息:', message);});// 监听连接关闭ws.on('close', () => {console.log('客户端已断开连接');if (openid) {clients.delete(openid); // 移除用户标识}});
});// 推送登录状态
function pushLoginStatus(openid, userInfo) {const ws = clients.get(openid);if (ws) {ws.send(JSON.stringify({type: 'login_success',data: {openid,userInfo}}));}
}module.exports = { pushLoginStatus };

2. 在用户登录成功后推送消息

在用户登录成功的逻辑中，调用 pushLoginStatus 推送消息。

const { pushLoginStatus } = require('./websocket'); // 引入 WebSocket 模块app.get('/auth/callback', async (req, res) => {const { code } = req.query;if (!code) {return res.status(400).send("Code 参数获取失败");}try {// 1. 用 code 换取 access_token 和 openidconst { data: tokenData } = await axios.get(`https://api.weixin.qq.com/sns/oauth2/access_token`, {params: { appid, secret: appsecret, code, grant_type: "authorization_code" }});if (!tokenData.access_token || !tokenData.openid) return res.status(400).send("获取 access_token 失败");if (tokenData.scope !== 'snsapi_userinfo') return res.status(400).send("用户未授权");const { access_token, openid } = tokenData;// 2. 获取用户信息const { data: userInfo } = await axios.get(`https://api.weixin.qq.com/sns/userinfo`, {params: { access_token, openid, lang: "zh_CN" }});const { nickname, sex, province, city, headimgurl } = userInfo;// 3. 查询数据库，判断用户是否存在db.query(`SELECT * FROM users WHERE openid = ?`, [openid], (err, results) => {if (err) return res.status(500).send("数据库查询失败");if (results.length > 0) {// 老用户，更新 is_new 为 0db.query(`UPDATE users SET is_new = 0 WHERE openid = ?`,[openid],(updateErr, updateResults) => {if (updateErr) {console.error("更新 is_new 失败:", updateErr);return res.status(500).send("更新 is_new 失败");}// 推送登录状态pushLoginStatus(openid, results[0]);return res.status(200).send({status: 'success',message: "用户已存在",is_new: 0,data: results[0]});});} else {// 新用户，存入数据库db.query(`INSERT INTO users (openid, nickname, sex, province, city, headimgurl, is_new)VALUES (?, ?, ?, ?, ?, ?, 1)`,[openid, nickname, sex, province, city, headimgurl],(insertErr, insertResults) => {if (insertErr) {console.error("数据库操作失败:", insertErr);return res.status(500).send("数据库操作失败");}// 推送登录状态pushLoginStatus(openid, { openid, nickname, sex, province, city, headimgurl });return res.status(200).send({status: 'success',message: "新用户信息保存成功",is_new: 1,data: { openid, nickname, sex, province, city, headimgurl }});});}});} catch (err) {console.error("服务器错误:", err);res.status(500).send({status: 'error',message: "服务器错误",error: err.message || err.toString()});}
});

3. 前端实现 WebSocket 客户端

代码实现

export default {data() {return {isLoggedIn: false,userInfo: {},ws: null};},created() {this.connectWebSocket();},methods: {// 连接 WebSocketconnectWebSocket() {const openid = localStorage.getItem('userOpenID');if (!openid) return;this.ws = new WebSocket(`ws://localhost:8080?openid=${openid}`);this.ws.onopen = () => {console.log('已连接到 WebSocket 服务器');};this.ws.onmessage = (event) => {const data = JSON.parse(event.data);if (data.type === 'login_success') {localStorage.setItem('userOpenID', data.data.openid);this.isLoggedIn = true;this.userInfo = data.data.userInfo;this.$store.dispatch('saveUserInfo', this.userInfo);}};this.ws.onclose = () => {console.log('WebSocket 连接已关闭');};}},beforeDestroy() {// 组件销毁时关闭 WebSocket 连接if (this.ws) {this.ws.close();}}
};