引言
实时通信应用已经成为现代互联网服务的一部分，从企业协作工具到社交网络，实时聊天功能为用户提供即时反馈和互动体验。Node.js 是一个基于 Chrome V8 JavaScript 引擎的 JavaScript 运行环境，非常适合构建高性能的网络服务器，而 MongoDB 是一个 NoSQL 数据库，常用于存储非结构化的数据。本文将介绍如何使用 Node.js 和 MongoDB 构建一个简单的实时聊天应用。
环境准备
安装 Node.js 和 npm
首先确保你的计算机上已经安装了 Node.js。如果没有，请访问 Node.js 官方网站下载并安装适合你操作系统的版本。
安装 MongoDB
如果你还没有 MongoDB，请从 MongoDB 官方网站下载并安装。安装完成后，确保 MongoDB 服务正在运行。
安装 Socket.IO
Socket.IO 是一个让实时双向事件-based通信变得简单库。它有效利用了每一个环境下的最佳传输机制，如 WebSocket 和轮询。
npm install express socket.io mongodb
创建项目结构
在你的工作目录中创建一个新的文件夹 chat-app，并在其中创建以下文件结构：
chat-app/
├── server.js
├── package.json
└── public/
├── index.html
└── style.css
开发服务器端
打开 server.js 文件，并输入以下代码：
const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const MongoClient = require('mongodb').MongoClient;
// 初始化 Express 应用
const app = express();
const server = http.createServer(app);
const io = socketIO(server);
// 连接 MongoDB
let db;
MongoClient.connect('mongodb://localhost:27017/chatdb', function(err, client) {
if (err) throw err;
db = client.db('chatdb');
});
// 设置静态文件目录
app.use(express.static('public'));
// Socket.IO 事件监听
io.on('connection', function(socket) {
console.log('New client connected');
// 当客户端发送消息时
socket.on('chat message', function(msg) {
console.log('Message: ' + msg);
// 将消息存储到 MongoDB
db.collection('messages').insertOne({
text: msg }, function(err, res) {
if (err) throw err;
console.log('Message saved to database');
});
// 广播给所有客户端
io.emit('chat message', msg);
});
// 当客户端断开连接时
socket.on('disconnect', function() {
console.log('Client disconnected');
});
});
// 监听端口
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => console.log(`Server listening on port ${
PORT}`));
开发客户端
在 public/ 文件夹中创建 index.html 文件，并输入以下 HTML 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat Application</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Simple Chat App</h1>
<div id="messages"></div>
<input id="input" autocomplete="off"><button onclick="sendMessage()">Send</button>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const messagesDiv = document.getElementById('messages');
const input = document.getElementById('input');
function sendMessage() {
const msg = input.value;
if (msg) {
socket.emit('chat message', msg);
input.value = '';
}
}
socket.on('chat message', function(msg) {
const div = document.createElement('div');
div.textContent = msg;
messagesDiv.appendChild(div);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
});
</script>
</body>
</html>
同时，在 public/ 文件夹中创建一个简单的 CSS 文件 style.css：
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#messages {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
overflow-y: scroll;
height: 300px;
}
input[type="text"] {
width: 200px;
padding: 10px;
}
运行应用
在命令行中切换到 chat-app/ 目录，并使用以下命令来安装所需的依赖项：
npm init -y
npm install express socket.io mongodb
然后运行服务器：
node server.js
打开浏览器访问 http://localhost:3000，你应该可以看到聊天应用的界面，并且可以发送消息与其他连接的客户端进行实时聊天。
结论
通过这篇教程，我们了解了如何使用 Node.js 和 Socket.IO 来构建一个简单的实时聊天应用，并且学会了如何与 MongoDB 数据库交互来持久化聊天记录。虽然这是一个基础的示例，但它为你提供了一个良好的起点，以便进一步探索实时应用开发的可能性。
