xx-chat 1.0.0

package/.trae/specs/create-lan-cli-chat/checklist.md

@@ -0,0 +1,7 @@
+- [x] 项目初始化完成，依赖安装成功。
+- [x] 可以通过 CLI 参数或交互式提示成功获取配置（角色、IP、昵称）。
+- [x] Server 端能够成功启动并监听端口。
+- [x] Client 端能够成功连接到 Server 端。
+- [x] 用户加入/退出聊天室时，所有人能收到系统提示。
+- [x] 任意用户发送消息时，聊天室内的所有人都能实时收到并正确展示。
+- [x] 命令行 UI 输入与接收消息不冲突，颜色区分明显。

package/.trae/specs/create-lan-cli-chat/spec.md

@@ -0,0 +1,34 @@
+# LAN CLI Chat Tool Spec
+
+## Why
+用户需要一个能在局域网内进行简单通信的命令行聊天工具，通过简单的配置即可快速搭建聊天室并进行实时交流。
+
+## What Changes
+- 初始化 Node.js 项目并使用 `yarn` 作为包管理工具。
+- 实现 CLI 参数解析，支持配置角色（server/client）、服务器 IP 和昵称。
+- 实现 Server 端逻辑：管理客户端连接、广播消息、处理用户断开连接。
+- 实现 Client 端逻辑：连接服务器、发送消息、接收并展示广播消息。
+- 实现命令行 UI：使用颜色区分不同用户的消息，确保输入和接收消息时界面不混乱。
+
+## Impact
+- Affected specs: 局域网聊天核心能力、命令行交互 UI。
+- Affected code: 全新项目，涉及核心的 CLI、Server、Client 及 UI 模块。
+
+## ADDED Requirements
+### Requirement: 启动配置
+系统应允许用户通过命令行参数或交互式提示输入：角色（server 或 client）、服务器 IP（客户端需要）、昵称。
+
+#### Scenario: 作为服务端启动
+- **WHEN** 用户执行命令指定 role 为 server，并输入昵称
+- **THEN** 系统启动 WebSocket 服务端监听默认端口，并作为第一个用户加入聊天室。
+
+#### Scenario: 作为客户端启动
+- **WHEN** 用户执行命令指定 role 为 client，输入服务端 IP 和昵称
+- **THEN** 系统连接到指定 IP 的服务端，加入聊天室并收到欢迎消息。
+
+### Requirement: 实时聊天
+系统应提供唯一的聊天室，所有连接的用户都能实时看到他人发送的消息。
+
+#### Scenario: 接收和发送消息
+- **WHEN** 用户在输入框输入消息并回车
+- **THEN** 消息通过服务端广播给所有在线用户，其他用户的界面实时展示该消息。

package/.trae/specs/create-lan-cli-chat/tasks.md

@@ -0,0 +1,26 @@
+# Tasks
+- [x] Task 1: 初始化项目和依赖
+  - [x] SubTask 1.1: 执行 `yarn init -y`，配置 `package.json` 中的 `type: "module"` 以使用 ES Modules。
+  - [x] SubTask 1.2: 安装必要的依赖包：`commander`, `inquirer`, `socket.io`, `socket.io-client`, `chalk`。
+- [x] Task 2: 实现 CLI 参数解析与交互
+  - [x] SubTask 2.1: 使用 `commander` 解析 `--role`, `--ip`, `--nickname` 参数。
+  - [x] SubTask 2.2: 使用 `inquirer` 处理未提供的必填参数。
+- [x] Task 3: 实现 Server 端核心逻辑
+  - [x] SubTask 3.1: 使用 `socket.io` 创建服务端，监听指定端口（如 3000）。
+  - [x] SubTask 3.2: 实现客户端连接、断开事件监听，以及广播系统消息（如：xxx 加入了聊天室）。
+  - [x] SubTask 3.3: 实现接收客户端聊天消息并广播给所有人的逻辑。
+- [x] Task 4: 实现 Client 端核心逻辑
+  - [x] SubTask 4.1: 使用 `socket.io-client` 连接到服务端 IP。
+  - [x] SubTask 4.2: 监听服务端广播的聊天消息和系统消息。
+- [x] Task 5: 实现命令行 UI
+  - [x] SubTask 5.1: 使用 Node.js 的 `readline` 模块处理用户输入，确保接收新消息时使用清除当前行的方法，不打断当前正在输入的内容。
+  - [x] SubTask 5.2: 使用 `chalk` 对消息进行颜色格式化（系统消息黄色、自己发送的消息绿色、他人发送的消息蓝色）。
+- [x] Task 6: 联调与入口集成
+  - [x] SubTask 6.1: 编写主入口文件 `index.js`，根据配置的角色启动 Server 或 Client。
+
+# Task Dependencies
+- Task 2 depends on Task 1
+- Task 3 depends on Task 2
+- Task 4 depends on Task 3
+- Task 5 depends on Task 3 and Task 4
+- Task 6 depends on Task 5

package/index.js

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+import { parseCli } from './src/cli.js';
+import { startServer } from './src/server.js';
+import { startClient } from './src/client.js';
+import { initUI, renderSystemMessage, renderChatMessage } from './src/ui.js';
+
+async function main() {
+  const { role, ip, nickname } = await parseCli();
+
+  let socket;
+
+  if (role === 'server') {
+    renderSystemMessage('正在启动服务器...');
+    startServer(3000);
+    renderSystemMessage('服务器已启动，监听端口 3000');
+    // 服务端自己也作为一个客户端连接上去
+    socket = startClient('127.0.0.1', nickname);
+  } else if (role === 'client') {
+    renderSystemMessage(`正在连接到服务器 ${ip}:3000...`);
+    socket = startClient(ip, nickname);
+  }
+
+  let currentNickname = nickname;
+
+  initUI((message) => {
+    if (message.startsWith('/')) {
+      const parts = message.split(' ');
+      const command = parts[0];
+
+      if (command === '/' || command === '/help') {
+        renderSystemMessage('可用命令：\n  /nickname <新昵称> - 修改昵称\n  /quit - 退出聊天');
+      } else if (command === '/nickname') {
+        const newNickname = parts.slice(1).join(' ').trim();
+        if (newNickname) {
+          socket.emit('change_nickname', newNickname);
+          currentNickname = newNickname;
+          renderSystemMessage(`你的昵称已修改为 ${newNickname}`);
+        } else {
+          renderSystemMessage('用法: /nickname <新昵称>');
+        }
+      } else if (command === '/quit') {
+        renderSystemMessage('正在退出聊天...');
+        process.exit(0);
+      } else {
+        renderSystemMessage('未知命令，输入 / 查看可用命令');
+      }
+      return;
+    }
+
+    // UI 层显示自己发的消息
+    renderChatMessage(currentNickname, message, true);
+    // 通过 socket 发送出去
+    socket.emit('chat_message', { nickname: currentNickname, message });
+  });
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "xx-chat",
+  "version": "1.0.0",
+  "description": "A simple LAN CLI chat tool",
+  "main": "index.js",
+  "type": "module",
+  "bin": {
+    "xx-chat": "./index.js"
+  },
+  "author": "xiaozhou <librazhoux@hotmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "5",
+    "commander": "11",
+    "inquirer": "8.2.4",
+    "socket.io": "^4.8.3",
+    "socket.io-client": "^4.8.3"
+  }
+}

package/src/cli.js

@@ -0,0 +1,52 @@
+import { program } from 'commander';
+import inquirer from 'inquirer';
+
+export async function parseCli() {
+  program
+    .option('-r, --role <type>', 'Role: server or client')
+    .option('-i, --ip <ip>', 'Server IP to connect to (if client)')
+    .option('-n, --nickname <name>', 'Your nickname');
+
+  program.parse(process.argv);
+  const options = program.opts();
+
+  const questions = [];
+
+  if (!options.role || !['server', 'client'].includes(options.role)) {
+    questions.push({
+      type: 'list',
+      name: 'role',
+      message: 'Choose your role:',
+      choices: ['server', 'client'],
+    });
+  }
+
+  if (!options.nickname) {
+    questions.push({
+      type: 'input',
+      name: 'nickname',
+      message: 'Enter your nickname:',
+      validate: (input) => input.trim() ? true : 'Nickname cannot be empty',
+    });
+  }
+
+  questions.push({
+    type: 'input',
+    name: 'ip',
+    message: 'Enter server IP:',
+    default: '127.0.0.1',
+    when: (answers) => {
+      const role = answers.role || options.role;
+      return role === 'client' && !options.ip;
+    },
+    validate: (input) => input.trim() ? true : 'IP cannot be empty',
+  });
+
+  const answers = await inquirer.prompt(questions);
+
+  return {
+    role: answers.role || options.role,
+    ip: answers.ip || options.ip,
+    nickname: answers.nickname || options.nickname,
+  };
+}

package/src/client.js

@@ -0,0 +1,29 @@
+import { io } from 'socket.io-client';
+import { renderSystemMessage, renderChatMessage } from './ui.js';
+
+export function startClient(ip, nickname) {
+  const socket = io(`http://${ip}:3000`);
+
+  socket.on('connect', () => {
+    socket.emit('join', nickname);
+    renderSystemMessage('成功连接到聊天服务器！');
+  });
+
+  socket.on('system_message', (msg) => {
+    renderSystemMessage(msg);
+  });
+
+  socket.on('chat_message', (data) => {
+    renderChatMessage(data.nickname, data.message, false);
+  });
+
+  socket.on('disconnect', () => {
+    renderSystemMessage('与服务器断开连接。');
+  });
+
+  socket.on('connect_error', (err) => {
+    renderSystemMessage(`连接错误: ${err.message}`);
+  });
+
+  return socket;
+}

package/src/server.js

@@ -0,0 +1,32 @@
+import { Server } from 'socket.io';
+
+export function startServer(port = 3000) {
+  const io = new Server(port);
+
+  io.on('connection', (socket) => {
+    let currentNickname = '';
+
+    socket.on('join', (nickname) => {
+      currentNickname = nickname;
+      socket.broadcast.emit('system_message', `${nickname} 加入了聊天室`);
+    });
+
+    socket.on('change_nickname', (newNickname) => {
+      const oldNickname = currentNickname;
+      currentNickname = newNickname;
+      socket.broadcast.emit('system_message', `${oldNickname} 将昵称修改为 ${newNickname}`);
+    });
+
+    socket.on('chat_message', (data) => {
+      socket.broadcast.emit('chat_message', data);
+    });
+
+    socket.on('disconnect', () => {
+      if (currentNickname) {
+        socket.broadcast.emit('system_message', `${currentNickname} 离开了聊天室`);
+      }
+    });
+  });
+
+  return io;
+}

package/src/ui.js

@@ -0,0 +1,51 @@
+import readline from 'readline';
+import chalk from 'chalk';
+
+let rl;
+
+function completer(line) {
+  const completions = ['/nickname', '/quit', '/help'];
+  const hits = completions.filter((c) => c.startsWith(line));
+  return [hits.length ? hits : line.startsWith('/') ? completions : [], line];
+}
+
+export function initUI(onMessage) {
+  rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+    prompt: '> ',
+    completer
+  });
+
+  rl.prompt();
+
+  rl.on('line', (line) => {
+    const text = line.trim();
+    if (text) {
+      onMessage(text);
+    }
+    rl.prompt();
+  });
+}
+
+function clearLine() {
+  if (rl) {
+    process.stdout.write('\x1B[2K\x1B[0G');
+  }
+}
+
+export function renderSystemMessage(msg) {
+  clearLine();
+  console.log(chalk.yellow(`[系统] ${msg}`));
+  if (rl) rl.prompt(true);
+}
+
+export function renderChatMessage(nickname, message, isSelf = false) {
+  clearLine();
+  if (isSelf) {
+    console.log(chalk.green(`[我(${nickname})] ${message}`));
+  } else {
+    console.log(chalk.blue(`[${nickname}] ${message}`));
+  }
+  if (rl) rl.prompt(true);
+}