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

图片.png socket.io/zh-CN/docs/…

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

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

图片.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

AI文档最终成品文档

1. 简介

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

核心特性：

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

2. 环境搭建 (pnpm)

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

初始化项目

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

1mkdir socket-chat-example
2cd socket-chat-example
3

初始化 package.json： pnpm init

安装依赖

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

1{
2  "dependencies": {
3    "express": "^5.2.1",
4    "socket.io": "^4.8.1"
5  }
6}
7

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

1pnpm init
2

3. 创建服务器

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

1// index.js 文件代码
2const express = require('express');
3const { createServer } = require('node:http');
4const { join } = require('node:path');
5const { Server } = require('socket.io');
6
7// 1. 创建 Express 实例
8const app = express();
9// 2. 创建 HTTP 服务器 (将 app 作为处理器)
10const server = createServer(app);
11// 3. 初始化 Socket.IO (传入 server)
12const io = new Server(server);
13
14// 路由：返回 HTML 文件
15app.get('/', (req, res) => {
16  res.sendFile(join(__dirname, 'index.html'));
17});
18
19// 监听连接事件 🔌
20io.on('connection', (socket) => {
21  console.log('👤 一个用户已连接');
22  
23  // 监听断开连接 ❌
24  socket.on('disconnect', () => {
25    console.log('👋 用户已断开连接');
26  });
27});
28
29// 启动服务器
30server.listen(3000, () => {
31  console.log('🚀 服务器运行在 http://localhost:3000');
32});
33

4. 创建客户端

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

1<!DOCTYPE html>
2<html>
3<head>
4    <title>Socket.IO 聊天室</title>
5    <style>
6        /* 简单的样式 */
7        body { margin: 0; padding-bottom: 3rem; font-family: sans-serif; }
8        #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); }
9        #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
10        #input:focus { outline: none; }
11        #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
12        #messages { list-style-type: none; margin: 0; padding: 0; }
13        #messages > li { padding: 0.5rem 1rem; }
14        #messages > li:nth-child(odd) { background: #efefef; }
15    </style>
16</head>
17<body>
18    <ul id="messages"></ul>
19    <form id="form" action="">
20      <input id="input" autocomplete="off" /><button>发送</button>
21    </form>
22</body>
23</html>
24

5. 集成 Socket.IO

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

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

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

6. 发送与接收消息

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

客户端发送 (Emit)

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

1// 使用 querySelector 获取元素 🔍
2const form = document.querySelector('#form');
3const input = document.querySelector('#input');
4
5form.addEventListener('submit', (e) => {
6  e.preventDefault(); // 阻止表单默认提交刷新页面
7  if (input.value) {
8    // 向服务器发送 '💬 聊天消息' 事件
9    socket.emit('💬 聊天消息', input.value);
10    input.value = ''; // 清空输入框
11  }
12});
13

服务器接收

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

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

7. 广播消息

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

服务器端广播

修改 index.js：

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

客户端显示消息

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

1const messages = document.querySelector('#messages');
2
3// 监听 '💬 聊天消息' 事件
4socket.on('💬 聊天消息', (msg) => {
5  const item = document.createElement('li');
6  item.textContent = msg;
7  messages.appendChild(item);
8  window.scrollTo(0, document.body.scrollHeight); // 滚动到底部
9});
10

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模式才有

《Trae Genimi3跟着官网学实时通信 Socket.io框架》是转载文章，点击查看原文。