Chat-app 是一个基于 Socket.IO 和 Node.js 构建的实时聊天应用程序。Socket.IO 是一个用于实时应用的 JavaScript 库，它允许在客户端和服务器之间进行双向通信，即数据可以即时发送和接收，非常适合构建聊天应用。Node.js 是一个开放源代码、跨平台的 JavaScript 运行环境，它让开发者可以在服务器端运行 JavaScript。
### 1. 安装 Node.js 和 npm
确保你的计算机上已经安装了 Node.js 和 npm（Node.js 包管理器）。如果没有，你需要访问 Node.js 官方网站（https://nodejs.org/）下载并安装最新版本。安装完成后，通过在命令行输入 `node -v` 和 `npm -v` 来验证它们是否正确安装。
### 2. 创建项目结构
在你的工作目录下，创建一个新的文件夹，例如 `Chat-app`，然后进入该文件夹。使用 `npm init` 命令初始化一个新的 Node.js 项目，根据提示设置项目名称、版本、描述等信息。这将生成一个 `package.json` 文件，用于记录项目的依赖和配置。
### 3. 安装依赖
在项目根目录下，运行以下命令来安装 `socket.io`：
```bash
npm install socket.io
```
如果你的项目还需要其他依赖，比如 Express（用于处理 HTTP 请求），可以使用 `npm install express` 安装。
### 4. 编写服务器端代码
在项目根目录下创建一个名为 `server.js` 的文件，用于编写服务器端代码。使用 Express 初始化一个服务器，并集成 Socket.IO：
```javascript
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
app.use(express.static('public')); // 假设你的静态文件放在 'public' 目录
io.on('connection', (socket) => {
console.log('用户已连接');
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('用户已断开连接');
});
});
server.listen(3000, () => {
console.log('服务器正在运行在 http://localhost:3000');
});
```
这里的代码创建了一个监听 3000 端口的服务器，并处理用户的连接、聊天消息发送和断开连接事件。
### 5. 编写客户端代码
在 `public` 目录下（如果没有，需要创建），创建一个 `index.html` 文件作为客户端的界面。引入 Socket.IO 的客户端库，并编写用于连接服务器、发送和接收消息的 JavaScript 代码：
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Chat App</title>
<script src="/socket.io/socket.io.js"></script>
<style>
/* 添加基本样式 */
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>发送</button>
</form>
<script>
const socket = io();
const form = document.getElementsByTagName('form')[0];
const input = document.getElementById('m');
const ul = document.getElementById('messages');
form.onsubmit = (e) => {
e.preventDefault();
socket.emit('chat message', input.value);
input.value = '';
return false;
};
socket.on('chat message', (msg) => {
const li = document.createElement('li');
li.textContent = msg;
ul.appendChild(li);
});
</script>
</body>
</html>
```
### 6. 启动应用
在命令行中，返回到项目根目录，运行以下命令启动服务器：
```bash
node server.js
```
现在，你可以在浏览器中打开 `http://localhost:3000`，你应该能看到一个简单的聊天界面。你可以打开多个浏览器窗口或设备，尝试发送消息并查看它们是否能实时显示在所有连接的客户端上。
这个简单的 Chat-app 示例展示了如何使用 Socket.IO 和 Node.js 实现一个实时聊天应用的基本功能。在实际开发中，你可能需要添加更多功能，如用户认证、房间管理、错误处理等，以实现一个完整的聊天应用。
Chat-app-master.zip （14个子文件） 
Chat-app-master 
package.json 429B
favicon.png 1KB
chat.html 3KB
