❌

阅读视图

发现新文章，点击刷新页面。

Trae Genimi3跟着官网学实时通信 Socket.io框架

✇掘金 前端
百万前端向前冲

3b74cd598a4f9c785f0fa84024044a3d.jpg

图片.pngsocket.io/zh-CN/docs/…

第1次对话：AI满意度⭐️⭐️

AI提示词：学习socket.io 请你按照这个文档 socket.io/docs/v4/tut… 创建一个中文网站，循序渐进的学习。

图片.png

图片.png

出现这个基于Node.js的Expressv5.2框架的聊天室，有点弱了，用户进入没有提示和昵称， 我的对AI表现的满意度是 ⭐️⭐️⭐️🈳🈳，可以给半⭐️给 版本比较新。

我需要的是一个学习Socekt.io的网站

AI给我一个Socekt.io开发的项目。

第2次对话：AI满意度⭐️⭐️⭐️⭐️

我需要的是一个 HTML网页文档来学习socket.io，并不是要用socket.io生成项目。使用工具pnpm，文档左侧应该有清晰的导航列表。如果涉及代码应该彩色高亮。

图片.png

第3次对话：AI满意度⭐️⭐️⭐️⭐️

对用 socket.on( ) 或者io 自定义的通道 事件、 关键字 都用emoji表情代替 ，同时 .getElementById 都用queryselector代替。并且列举出socket.io常用功能清单 仅对这个文件，尽可能用直观的中文+emoji

图片.png

图片.png

AI文档最终成品文档

1. 简介

Socket.IO 是一个基于事件的库，用于在浏览器和服务器之间实现实时、双向和低延迟的通信。

核心特性：

  • HTTP 长轮询作为回退机制（保证连接稳定性）
  • 自动重连
  • 数据包缓冲
  • 广播机制

2. 环境搭建 (pnpm)

首先，我们需要初始化一个新的 Node.js 项目。这里我们使用 pnpm 作为包管理工具。

初始化项目

打开终端，创建一个新目录并进入：

mkdir socket-chat-example
cd socket-chat-example

初始化 package.json： pnpm init

安装依赖

在根目录下创建 package.json 文件，确保依赖项使用的是最新版本（如下所示）：

{
  "dependencies": {
    "express": "^5.2.1",
    "socket.io": "^4.8.1"
  }
}

我们需要安装 Express 框架和 Socket.IO 库：

pnpm init

3. 创建服务器

创建 index.js 文件写入以下代码。我们需要设置一个基本的 Express 服务器，并将 Socket.IO 附加到它上面。

// index.js 文件代码
const express = require('express');
const { createServer } = require('node:http');
const { join } = require('node:path');
const { Server } = require('socket.io');

// 1. 创建 Express 实例
const app = express();
// 2. 创建 HTTP 服务器 (将 app 作为处理器)
const server = createServer(app);
// 3. 初始化 Socket.IO (传入 server)
const io = new Server(server);

// 路由：返回 HTML 文件
app.get('/', (req, res) => {
  res.sendFile(join(__dirname, 'index.html'));
});

// 监听连接事件 🔌
io.on('connection', (socket) => {
  console.log('👤 一个用户已连接');
  
  // 监听断开连接 ❌
  socket.on('disconnect', () => {
    console.log('👋 用户已断开连接');
  });
});

// 启动服务器
server.listen(3000, () => {
  console.log('🚀 服务器运行在 http://localhost:3000');
});

4. 创建客户端

创建 index.html 文件。这是用户看到的聊天界面。

<!DOCTYPE html>
<html>
<head>
    <title>Socket.IO 聊天室</title>
    <style>
        /* 简单的样式 */
        body { margin: 0; padding-bottom: 3rem; font-family: sans-serif; }
        #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
        #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
        #input:focus { outline: none; }
        #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
        #messages { list-style-type: none; margin: 0; padding: 0; }
        #messages > li { padding: 0.5rem 1rem; }
        #messages > li:nth-child(odd) { background: #efefef; }
    </style>
</head>
<body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>发送</button>
    </form>
</body>
</html>

5. 集成 Socket.IO

在 index.html 的 </body> 标签之前，引入 Socket.IO 客户端脚本并初始化。

<!-- 自动提供的 Socket.IO 客户端库 -->
<script src="/socket.io/socket.io.js"></script>
<script>
  // 初始化连接 🔗
  const socket = io();
</script>

这里的 io() 默认会尝试连接当前主机。

6. 发送与接收消息

我们需要监听表单提交，将消息发送给服务器。注意这里使用了 querySelector 和 Emoji 事件名。

客户端发送 (Emit)

在 index.html 的 script 标签中添加：

// 使用 querySelector 获取元素 🔍
const form = document.querySelector('#form');
const input = document.querySelector('#input');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // 阻止表单默认提交刷新页面
  if (input.value) {
    // 向服务器发送 '💬 聊天消息' 事件
    socket.emit('💬 聊天消息', input.value);
    input.value = ''; // 清空输入框
  }
});

服务器接收

在 index.js 中，我们需要监听这个 Emoji 事件：

io.on('connection', (socket) => {
  // 监听 '💬 聊天消息' 事件
  socket.on('💬 聊天消息', (msg) => {
    console.log('📩 收到消息: ' + msg);
  });
});

7. 广播消息

现在的代码只能在服务器端打印消息。我们需要把消息广播给所有连接的客户端。

服务器端广播

修改 index.js：

io.on('connection', (socket) => {
  socket.on('💬 聊天消息', (msg) => {
    // io.emit 会发送给所有连接的客户端，包括发送者自己 📢
    io.emit('💬 聊天消息', msg);
  });
});

客户端显示消息

在 index.html 中，监听服务器发回的事件：

const messages = document.querySelector('#messages');

// 监听 '💬 聊天消息' 事件
socket.on('💬 聊天消息', (msg) => {
  const item = document.createElement('li');
  item.textContent = msg;
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight); // 滚动到底部
});

8. Socket.IO 常用功能清单

图片.png

9. 总结

恭喜！ 你已经完成了一个基本的实时聊天应用。

关键 API 回顾：

  • pnpm add socket.io - 安装服务端库。
  • const io = new Server(server) - 服务端初始化。
  • const socket = io() - 客户端初始化。
  • socket.emit('💬 消息', data) - 发送消息。
  • socket.on('💬 消息', callback) - 接收消息。
  • io.emit('💬 消息', data) - 广播给所有人。

附录：

注：差点点了自动翻译网页，官网其实有中文选项，但存在切换BUG(失效)和翻译不完整等问题。 你看教程这里又是英文了。 那么跟着

图片.png

终于找到你Gemini-3-Pro（200K），得取消 Auto Mode 并且不能用 Trae Solo模式才有 fab9b7c0a111a741fb37e9de10cef21a.png

❌