Socket.io 与 WebSocket

关于 WebSocket 和 Socket.io 的详细介绍以及如何使用 Socket.io 创建一个简单的实时聊天应用：

### **1. WebSocket 概念**
- **定义**：WebSocket 是一种基于 TCP 的协议，用于在客户端和服务器之间建立全双工、双向通信连接。
- **特点**：
  - **实时性**：支持实时的数据传输，延迟低。
  - **双向通信**：允许客户端和服务器同时发起数据传输。
  - **低开销**：相比传统的 HTTP 请求，WebSocket 的头部信息更小，减少了数据传输的开销。
- **应用场景**：实时通信、在线游戏、股票行情、聊天室等需要实时交互的场景。

---

### **2. Socket.io 模块**
Socket.io 是一个基于 WebSocket 的库，用于在 Node.js 中实现实时双向通信。它提供了更高级的抽象和功能，如自动重连、断线重连、跨浏览器支持等。

#### **安装 Socket.io**
```bash
npm install socket.io
```

#### **基本用法**
- **服务器端**：
  ```javascript
  const express = require('express');
  const app = express();
  const http = require('http').createServer(app);
  const io = require('socket.io')(http);

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

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

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

http.listen(3000, () => {
    console.log('Listening on *:3000');
  });
  ```

- **客户端**：
  ```html
  <!DOCTYPE html>
  <html>
  <head>
    <title>Chat App</title>
  </head>
  <body>
    <ul id="messages"></ul>
    <form>
      <input id="message" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();
      const messages = document.getElementById('messages');
      const form = document.querySelector('form');
      const input = document.getElementById('message');

form.addEventListener('submit', (e) => {
        e.preventDefault();
        if (input.value) {
          socket.emit('chat message', input.value);
          input.value = '';
        }
      });

socket.on('chat message', (msg) => {
        const item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
      });
    </script>
  </body>
  </html>
  ```

---

### **3. 实时通信应用：基于 Socket.io 的聊天室**
以下是一个完整的基于 Socket.io 的实时聊天应用的代码：

#### **服务器端代码（`server.js`）**
```javascript
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

// 为存储用户列表添加一个容器
let userList = {};

io.on('connection', (socket) => {
  // 当客户端请求加入聊天室时处理逻辑
  socket.on('join', (username) => {
    // 检查用户是否已经存在
    if (userList[username]) {
      // 如果用户已经存在，广播消息
      io.emit('message', `${username} 已经存在`);
      socket.emit('disconnect_user');
      return;
    }

// 将用户添加到用户列表
    userList[username] = socket.id;

// 广播用户上线消息
    socket.username = username;
    socket.emit('your_id', socket.id); // 将用户的自己的 socket.id 返回给客户端
    socket.emit('message', '欢迎来到聊天室'); // 欢迎自己
    socket.broadcast.emit('message', `${username} 加入了聊天室`); // 广播给别人

// 更新用户列表
    io.emit('user_list', userList);
  });

// 当接收到聊天消息时
  socket.on('chat message', (msg) => {
    const message = `<strong>${socket.username}</strong>: ${msg}`;
    io.emit('chat message', message);
  });

// 当用户断开连接时
  socket.on('disconnect', () => {
    const username = socket.username;
    if (username) {
      // 从用户列表中删除用户
      delete userList[username];
      // 广播用户下线消息
      io.emit('message', `${username} 离开了聊天室`);
      // 更新用户列表
      io.emit('user_list', userList);
    }
  });

// 当用户退出聊天室时
  socket.on('logout', () => {
    const username = socket.username;
    if (username) {
      // 从用户列表中删除用户
      delete userList[username];
      // 断开连接
      socket.disconnect(true);
    }
  });
});

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

http.listen(3000, () => {
  console.log('Server is running on port 3000');
});
```

#### **前端代码（`index.html`）**
```html
<!DOCTYPE html>
<html>
<head>
  <title>Chat App</title>
  <style>
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      margin: 10px 0;
    }
    .chatbox {
      width: 300px;
      height: 400px;
      border: 1px solid #ccc;
      overflow: auto;
      margin-bottom: 10px;
    }
    .username-input {
      display: flex;
      justify-content: center;
      margin: 20px;
    }
    .username-input input {
      margin-right: 10px;
      padding: 5px;
    }
    .message-input {
      display: flex;
      justify-content: center;
      margin: 10px;
    }
    .message-input input {
      flex: 1;
      padding: 5px;
      margin-right: 10px;
    }
    .user-list {
      border: 1px solid #ddd;
      padding: 10px;
      margin: 10px;
    }
    .user-list ul {
      list-style: none;
      padding: 0;
    }
    .user-list li {
      padding: 5px;
      border-bottom: 1px solid #eee;
    }
  </style>
</head>
<body>
  <h1>实时聊天室</h1>

<div class="username-input">
    <input type="text" id="username" placeholder="请输入用户名">
    <button onclick="joinChat()">加入聊天室</button>
  </div>

<div class="chatbox">
    <ul id="messages"></ul>
  </div>

<div class="user-list">
    <h3>用户列表</h3>
    <ul id="userList"></ul>
  </div>

<div class="message-input">
    <input type="text" id="message" placeholder="输入消息">
    <button onclick="sendMessage()">发送</button>
  </div>

// 用户加入聊天室
    function joinChat() {
      username = document.getElementById('username').value.trim();
      if (username) {
        // 阻止重复加入
        socket.emit('join', username);
      } else {
        alert('请输入用户名');
      }
    }

// 用户发送消息
    function sendMessage() {
      const msg = messageInput.value.trim();
      if (msg) {
        socket.emit('chat message', msg);
        messageInput.value = '';
      }
    }

// 监听连接被断开事件处理
    socket.on('disconnect_user', () => {
      alert('该用户已存在');
    });

// 接收服务器端的聊天消息
    socket.on('chat message', (msg) => {
      const item = document.createElement('li');
      item.textContent = msg;
      messages.appendChild(item);
      messages.scrollTop = messages.scrollHeight; // 自动滚动到底部
    });

// 接收服务器端的系统消息
    socket.on('message', (msg) => {
      const item = document.createElement('li');
      item.className = 'system';
      item.textContent = msg;
      messages.appendChild(item);
      messages.scrollTop = messages.scrollHeight; // 自动滚动到底部
    });

// 监听用户列表更新
    socket.on('user_list', (userList) => {
      // 清空之前列表
      userListContainer.innerHTML = '';
      // 遍历用户列表并生成新的列表项
      for (const user in userList) {
        const li = document.createElement('li');
        li.textContent = user;
        userListContainer.appendChild(li);
      }
    });
  </script>
</body>
</html>
```

#### **运行步骤**
1. 安装依赖：
   ```bash
   npm install express socket.io
   ```
2. 将服务器端代码保存为 `server.js`，前端代码保存为 `index.html`。
3. 启动服务器：
   ```bash
   node server.js
   ```
4. 打开浏览器，访问 `http://localhost:3000`。

---

### **总结**
Socket.io 是一个强大的实时通信库，基于 WebSocket 协议。它在客户端和服务器之间建立了一个实时的、双向的通信通道，使得数据可以在双方之间实时传输。通过 Socket.io，可以方便地实现各种实时应用，如聊天室、在线游戏、实时协作工具等。