socket.io

一、Socket.IO 在本项目中的使用说明

1. 项目中 Socket.IO 的应用场景

在本项目（如 web-server、web-company），Socket.IO 主要用于实现实时聊天功能。例如，web-server/websocket/index.js 负责服务端的 Socket.IO 连接，web-company/src/components/Chat.vue 负责前端的实时消息收发。

2. 基本用法举例

服务端（web-server/websocket/index.js）：

const { Server } = require('socket.io');
const io = new Server(server, { cors: { origin: '*' } });

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);

  socket.on('chat message', (msg) => {
    // 广播消息给所有客户端
    io.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

module.exports = io;

前端（web-company/src/components/Chat.vue）：

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { io } from 'socket.io-client'

const socket = io('http://localhost:3000') // 端口根据实际情况调整
const messages = ref<string[]>([])
const input = ref('')

onMounted(() => {
  socket.on('chat message', (msg: string) => {
    messages.value.push(msg)
  })
})

onUnmounted(() => {
  socket.disconnect()
})

function sendMessage() {
  if (input.value.trim()) {
    socket.emit('chat message', input.value)
    input.value = ''
  }
}
</script>

---

二、问题

1. 问：你在本项目中是如何实现实时通信的？为什么选择 Socket.IO？

答：
在本项目中，实时聊天功能通过 Socket.IO 实现。服务端在 web-server/websocket/index.js 建立 Socket.IO 服务器，前端在 web-company/src/components/Chat.vue 通过 socket.io-client 连接，实现消息的实时收发和广播。选择 Socket.IO 是因为它封装了 WebSocket 及降级方案，API 简单，兼容性好，适合快速实现实时功能。

---

2. 问：Socket.IO 的消息是如何广播到所有用户的？项目中有用到吗？

答：
Socket.IO 支持多种消息推送方式。项目中，服务端监听 chat message 事件后，使用 io.emit('chat message', msg) 将消息广播给所有连接的客户端，实现了聊天室的群聊功能。这样每个用户都能实时收到新消息。

---

3. 问：如何管理 Socket.IO 的连接和断开？项目中如何处理用户离线？

答：
服务端通过 io.on('connection', socket => {...}) 监听新连接，通过 socket.on('disconnect', ...) 监听断开。在项目中，用户关闭页面或断网时会自动断开连接，服务端可以在断开事件中做日志记录或用户状态管理，保证系统的健壮性。

---

4. 问：Socket.IO 如何与前端 Vue 组件生命周期配合？项目中有遇到什么问题吗？

答：
在 Vue 组件中，Socket.IO 客户端的连接应在 onMounted 时建立，在 onUnmounted 时断开，防止内存泄漏和重复连接。项目中曾遇到过页面切换后 socket 未断开导致多次接收同一消息的问题，通过在 onUnmounted 里调用 socket.disconnect() 解决。

---

5. 问：Socket.IO 如何保证消息的可靠性和顺序？项目中如何处理消息丢失？

答：
Socket.IO 基于 WebSocket，默认能保证消息顺序，但在极端网络情况下可能丢失。项目中通过前端消息列表和后端消息持久化（如数据库存储）结合，保证用户刷新页面后仍能看到历史消息。对于重要消息，可以实现消息确认机制，确保消息可靠送达。