温州做网站整站优化央视网新闻

为什么更推荐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();}}
};

---

4. 总结

• 后端：

  • 使用 WebSocket 服务器推送用户登录状态。
  • 在用户登录成功后，通过 pushLoginStatus 推送消息。

• 前端：

  • 连接 WebSocket 服务器，并监听登录状态的消息。
  • 在收到消息后，更新用户信息和登录状态。