Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，它能够让你使用 JavaScript 来开发服务器端应用。在这篇博客中，我们将使用 Node.js 构建一个实时聊天应用。
准备工作
在开始之前，确保你的电脑上已经安装了 Node.js 运行时和 npm 包管理器。你可以从 https://nodejs.org 下载并安装它们。
创建项目
首先，创建一个新的文件夹作为你的项目文件夹，并进入到该文件夹中。然后在命令行中运行以下命令，来初始化一个新的 Node.js 项目：
npm init
按照提示，输入相关信息并创建一个新的 package.json 文件。
安装依赖
在项目文件夹中，运行以下命令来安装 Express 和 Socket.IO：
npm install express socket.io
Express 是一个常用的基于 Node.js 的 Web 应用框架，而 Socket.IO 则是一个实现了实时双向通信的库。
创建服务器
在项目文件夹中创建一个新的 JavaScript 文件，例如 server.js，并在其中编写以下代码：
const express = require('express');
const socketio = require('socket.io');
const app = express();
const server = app.listen(3000, () => {
console.log('Server running on port 3000');
});
app.use(express.static('public'));
const io = socketio(server);
io.on('connection', (socket) => {
console.log(`New connection: ${socket.id}`);
socket.on('chat', (data) => {
io.sockets.emit('chat', data);
});
socket.on('typing', (data) => {
socket.broadcast.emit('typing', data);
});
});
这段代码创建了一个 Express 应用，使用 Socket.IO 创建了一个服务器，并监听来自客户端的连接。当有新的连接建立时，我们会打印出新连接的 ID，并在客户端发送消息和正在输入时进行广播。
创建前端界面
在项目文件夹中创建一个新的文件夹，例如 public，用于存放前端界面的静态资源。在该文件夹中，创建一个新的 HTML 文件，例如 index.html，并在其中编写以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Real-time Chat Application</title>
<script src="/socket.io/socket.io.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="chat-window">
<div id="output"></div>
<div id="feedback"></div>
</div>
<input id="handle" type="text" placeholder="Handle">
<input id="message" type="text" placeholder="Message">
<button id="send">Send</button>
</body>
</html>
这段代码定义了一个聊天窗口，用于显示聊天记录和正在输入信息。同时包含了一个输入框用于输入用户名和消息，以及一个发送按钮。
然后，在 public 文件夹中创建一个新的 JavaScript 文件，例如 app.js，并在其中编写以下代码：
const socket = io();
const output = document.getElementById('output');
const feedback = document.getElementById('feedback');
const handle = document.getElementById('handle');
const message = document.getElementById('message');
const send = document.getElementById('send');
send.addEventListener('click', () => {
socket.emit('chat', {
handle: handle.value,
message: message.value
});
message.value = '';
});
message.addEventListener('keypress', () => {
socket.emit('typing', {
handle: handle.value
});
});
socket.on('chat', (data) => {
feedback.innerHTML = '';
output.innerHTML += `<p><strong>${data.handle}: </strong>${data.message}</p>`;
});
socket.on('typing', (data) => {
feedback.innerHTML = `<p><em>${data.handle} is typing a message...</em></p>`;
});
这段代码创建了一个与服务器的 Socket.IO 连接，并为发送按钮和输入框添加了事件监听器来响应用户的操作。当用户点击发送按钮时，客户端会向服务器发送一个 chat 事件，并且清空消息输入框。当用户正在输入时，客户端会向服务器发送一个 typing 事件，并在聊天窗口中显示“正在输入”的提示信息。
运行应用
最后，打开命令行，进入到项目文件夹中，并运行以下命令来启动服务器：
node server.js
然后，打开浏览器，在地址栏中输入 http://localhost:3000，回车即可访问你的实时聊天应用。你可以打开多个浏览器标签或窗口，以模拟多个用户之间的实时聊天。
总结
在这篇博客中，我们学习了如何使用 Node.js 和 Socket.IO 构建一个实时聊天应用。通过这个示例，你可以扩展和修改代码，使它更适合你的需求，例如添加用户认证、保存聊天记录等。希望这篇博客对你有所帮助，祝你在构建实时应用方面取得成功！
本文来自极简博客，作者：编程灵魂画师，转载请注明原文链接：使用Node.js构建实时聊天应用
