实时聊天:利用Modulus和Node.js实现

来源:undefined 2024-12-21 09:57:24 1013

在本教程中,我将向您展示如何使用 node.js、socket.io 和 mongodb 实现一个实时聊天应用程序,然后我们将该应用程序一起部署到 modulus。

首先,让我向您展示我们将在文章末尾看到的应用程序的最终外观。

Node.js 将成为应用程序的核心,Express 作为 MVC,MongoDB 作为数据库,Socket。 IO用于实时通信。完成后,我们将把应用程序部署到 Modulus。 MongoDB 部分实际上存在于 Modulus 内部。

1. 场景

John 想要使用我们的应用程序,并在浏览器中打开它。 在第一页上,他选择聊天期间使用的昵称,然后登录聊天。 他在文本区域中写了一些内容,然后按 Enter。 文本将发送至 RESTful 服务 (Express),并将该文本写入 MongoDB。 在 MongoDB 中写入之前,相同的文本将广播给当前登录聊天应用的用户。

如您所见,这是一个非常简单的应用程序,但它几乎涵盖了 Web 应用程序的所有内容。该应用程序中没有频道系统,但您可以fork源代码并实现频道模块进行练习。

2.从头开始进行项目设计

我将尝试先解释该项目的各个小部分,然后在最后将它们组合起来。我将从后端开始到前端。那么,让我们从域对象(MongoDB 模型)开始。

2.1。型号

对于数据库抽象,我们将使用 Mongoose。在这个项目中,我们只有一个模型,名为 Message 这个消息模型只包含 text, createDate, 和 作者作者没有像User这样的模型,因为我们不会完全实现用户注册/登录系统。将会有一个简单的昵称提供页面,并且该昵称将被保存到cookie中。这将在 Message 模型中用作 author 字段中的文本。您可以在下面看到一个示例 JSON 模型:

{ text: "Hi, is there any Full Stack Developer here?" author: "john_the_full_stack", createDate: "2015.05.15" }
登录后复制

为了创建这样的文档,您可以使用下面的 Mongoose 函数来实现模型:

var mongoose = require(mongoose) var Message = new mongoose.Schema({ author: String, message: String, createDate: { type: Date, default: Date.now } }); mongoose.model(Message, Message)
登录后复制

只需导入 Mongoose 模块,使用 JSON 格式的字段和字段属性定义模型,然后创建名为 Message 的模型。该模型将包含在您要使用的页面中。

也许您有疑问,当我们已经在同一频道中向用户广播此消息时,为什么我们要将消息存储在数据库中。确实,您不必存储聊天消息,但我只是想解释一下数据库集成层。不管怎样,我们将在我们的项目中的控制器中使用这个模型。控制器?

2.2。控制器

正如我之前所说,我们将在 MVC 部分使用 Express。而C这里代表的是Controller。对于我们的项目,只有两个消息传递端点。其中之一是加载最近的聊天消息,第二个是处理发送的聊天消息存储在数据库中,然后广播到频道中。

..... app.get(/chat, function(req, res){ res.sendFile(__dirname + /index.html); }); app.get(/login, function(req, res){ res.sendFile(__dirname + /login.html); }); app.post(/messages, function(req, res, next) { var message = req.body.message; var author = req.body.author; var messageModel = new Message(); messageModel.author = author; messageModel.message = message; messageModel.save(function (err, result) { if (!err) { Message.find({}).sort(-createDate).limit(5).exec(function(err, messages) { io.emit("message", messages); }); res.send("Message Sent!"); } else { res.send("Technical error occurred!"); } }); }); app.get(/messages, function(req, res, next) { Message.find({}).sort(-createDate).limit(5).exec(function(err, messages) { res.json(messages); }); }); .....
登录后复制

第一个和第二个控制器仅用于为聊天和登录页面提供静态 HTML 文件。第三个用于处理对 /messages 端点的发布请求,以创建新消息。在该控制器中,首先将请求正文转换为 Message 模型,然后使用 Mongoose 函数 save. 

好的,我们已经完成了 MC。让我们切换到 View 部分。

2.3。查看

一般来说,Express 中可以使用 Jade、EJS、Handlebars 等模板引擎。然而,我们只有一个页面,那就是一条聊天消息,所以我将静态地提供它。实际上,正如我上面所说,还有两个控制器来服务这个静态 HTML 页面。您可以看到以下内容用于提供静态 HTML 页面。

app.get(/chat, function(req, res){ res.sendFile(__dirname + /index.html); }); app.get(/login, function(req, res){ res.sendFile(__dirname + /login.html); });
登录后复制

此端点仅使用 res.sendFile 提供 index.html 和 login.html。 index.html 和 login.html 与 server.js 位于同一文件夹中,这就是我们在 HTML 文件名之前使用 __dirname 的原因。

2.4。前端

在前端页面中,我已经使用了Bootstrap,无需解释我是如何做到这一点的。简单来说,我将一个函数绑定到一个文本框,每当您按下Enter键或发送按钮时,消息就会发送到后端服务。

该页面还有一个必需的Socket.IO js文件,用于监听名为message的频道。 Socket.IO 模块已在后端导入,当您在服务器端使用此模块时,它会自动添加一个端点来提供 Socket.IO js 文件,但我们使用由 cdn

最新文章