0

0

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

PHPz

PHPz

发布时间:2023-09-03 23:25:13

|

1007人浏览过

|

来源于php中文网

原创

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

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

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

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

1. 场景

  1. John 想要使用我们的应用程序,并在浏览器中打开它。
  2. 在第一页上,他选择聊天期间使用的昵称,然后登录聊天。
  3. 他在文本区域中写了一些内容,然后按 Enter。
  4. 文本将发送至 RESTful 服务 (Express),并将该文本写入 MongoDB。
  5. 在 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.  

我不会深入研究 Mongoose - 您可以查看文档以了解更多详细信息。你可以为save函数提供一个回调函数来检查是否有问题。如果成功,我们将按 createDate 降序获取最后 5 条记录,并向频道中的客户端广播 5 条消息。

好的,我们已经完成了 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 <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>。每当有新消息进入此频道时,都会自动检测到该消息,并且消息列表将刷新为最后 5 条消息。

<script>

        var socket = io();

        socket.on("message", function (messages) {

            refreshMessages(messages);

        });



        function refreshMessages(messages) {

            $(".media-list").html("");

            $.each(messages.reverse(), function(i, message) {

                $(".media-list").append('<li class="media"><div class="media-body"><div class="media"><div class="media-body">'

                + message.message + '<br/><small class="text-muted">' + message.author + ' | ' + message.createDate + '</small><hr/></div></div></div></li>');

            });

        }



        $(function(){



            if (typeof $.cookie("realtime-chat-nickname") === 'undefined') {

                window.location = "/login"

            } else {

                $.get("/messages", function (messages) {

                    refreshMessages(messages)

                });



                $("#sendMessage").on("click", function() {

                    sendMessage()

                });



                $('#messageText').keyup(function(e){

                    if(e.keyCode == 13)

                    {

                        sendMessage();

                    }

                });

            }



            function sendMessage() {

                $container = $('.media-list');

                $container[0].scrollTop = $container[0].scrollHeight;

                var message = $("#messageText").val();

                var author = $.cookie("realtime-chat-nickname");

                $.post( "/messages", {message: message, author: author}, function( data ) {

                    $("#messageText").val("")

                });

                $container.animate({ scrollTop: $container[0].scrollHeight }, "slow");

            }

        })

    </script>

上面的代码中还有一项检查:cookie 部分。如果您没有选择任何聊天昵称,则表示该昵称没有设置cookie,您将自动重定向到登录页面。

如果没有,最后五条消息将通过对 /messages 端点的简单 Ajax 调用来获取。同样,每当您点击发送按钮或按Enter键时,都会从文本框中提取短信,并从文本框中提取昵称。 cookie,这些值将通过 post 请求发送到服务器。这里没有严格检查昵称,因为我想关注实时部分,而不是用户身份验证部分。

正如你所看到的,项目的整体结构非常简单。让我们进入部署部分。正如我之前所说,我们将使用 Modulus,它是用您选择的语言部署、扩展和监控应用程序的最佳 PaaS 之一。

3.部署

3.1。先决条件

我首先想到的是向您展示如何部署,但为了成功部署,我们需要一个工作数据库。我们来看看如何在Modulus上创建数据库,然后进行部署。

创建帐户后转至 Modulus 仪表板。点击左侧的数据库菜单,然后点击创建数据库。

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

天天团购系统
天天团购系统

天天团购系统是一套强大的开源团购程序,采用PHP+mysql开发,系统内置支付宝、财付通、GOOGLE地图等接口,支持短信发送团购券和实物团购快递发货等;另外可通过Ucenter模块,与网站已有系统无缝整合,实现用户同步注册、登陆、退出。 天天团购系统是一套创新的开源团购程序,拥有多达10项首创功能,同时支持虚拟和实物团购,内置类似淘宝的快递配送体系,并提供强大的抽奖、邀请返利等营销功能,让您轻松

下载

在弹出表单中填写必填字段,如下所示。

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

当您填写必填字段并点击创建时,它将创建一个 MongoDB 数据库您将在屏幕上看到您的数据库 URL。我们将使用 MONGO URI 因此请复制该 URI。

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

在我们的项目中,Mongo URI是从环境变量MONGO_URI中获取的,您需要在仪表板中设置该环境变量。转到信息中心,点击项目菜单,在列表中选择您的项目,然后点击左侧菜单中的管理。在此页面中,向下滚动页面时您将看到环境变量部分,如下所示。

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

您可以通过两种方式部署到 Modulus:

  • 使用仪表板上传项目 ZIP 文件
  • 使用 Modulus CLI 从命令行进行部署

我将继续使用命令行选项,因为另一个很容易做到。首先,安装 Modulus CLI:

npm install -g modulus

转到您的项目文件夹并执行以下命令以登录 Modulus。

modulus login

当您执行上述命令时,系统会提示您输入用户名和密码:

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

如果您已使用 GitHub 创建帐户,则可以使用 --github 选项.

modulus login --github

现在您已登录 Modulus,可以创建项目了。使用以下命令创建项目:

modulus project create "Realtime Chat"

当您运行此函数时,系统会询问您运行时。选择第一个选项,即 Node.js,第二个选项将询问您伺服器的大小,您可以保留默认值。

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

我们已经创建了一个项目,这次我们将把当前项目部署到Modulus中。执行以下命令将当前项目发送到Modulus端的Realtime Chat项目中。

modulus deploy

它将部署您的项目,并且您将在成功部署消息的末尾获得正在运行的项目 URL:

Realtime Chat running at realtime-chat-46792.onmodulus.net

如您所见,部署到 Modulus 非常简单!

Modulus CLI 具有非常有用的命令,可在项目部署或运行​​时使用。例如,为了跟踪正在运行的项目的日志,您可以使用 modulus 项目日志 tail,创建 MongoDB 数据库使用 modulus mongo create <db-name></db-name> ,要设置环境变量,请使用 modulus env set <key><value></value></key> 等。您可以使用 Modulus 帮助查看完整的命令列表。

结论

本教程的主要目的是向您展示如何使用 Node.js、Socket.IO 和 MongoDB 创建实时聊天应用程序。为了在生产中运行项目,Modulus 被用作 PaaS 提供商。 Modulus 的部署步骤非常简单,而且它还为我们的项目提供了一个内部数据库(MongoDB)。除此之外,您还可以在 Modulus 仪表板中使用非常有用的工具,例如日志、通知、自动缩放、数据库管理等。

要注册 Modulus,请点击此处,成为 Tuts+ 读者即可额外获得 10 美元。使用促销代码ModulusChat10

有关 Modulus 企业产品的更多信息,请点击此处。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
node.js调试
node.js调试

node.js调试可以使用console.log()输出调试信息、断点调试和第三方调试工具。详细介绍:1、console.log()输出调试信息,通过在代码中插入console.log()语句,开发人员可以在控制台输出变量的值、函数的执行结果等信息,以便观察代码的执行流程和状态;2、断点调试,可以在代码中设置断点,以便在特定位置暂停代码的执行,观察变量的值和执行流程等。

361

2023.09.19

JavaScript 全栈开发基础(Node.js + 前端)
JavaScript 全栈开发基础(Node.js + 前端)

本专题系统介绍 JavaScript 在全栈开发中的核心知识结构,涵盖 Node.js 基础、Express/Koa 接口构建、前端交互设计、模块化与包管理、数据库连接、前后端数据通信与部署流程。通过完整项目示例,帮助学习者掌握从浏览器到服务器的一体化开发能力,实现真正意义上的全栈入门。

118

2025.11.26

Node.js后端开发与Express框架实践
Node.js后端开发与Express框架实践

本专题针对初中级 Node.js 开发者,系统讲解如何使用 Express 框架搭建高性能后端服务。内容包括路由设计、中间件开发、数据库集成、API 安全与异常处理,以及 RESTful API 的设计与优化。通过实际项目演示,帮助开发者快速掌握 Node.js 后端开发流程。

410

2026.02.10

PHP API接口开发与RESTful实践
PHP API接口开发与RESTful实践

本专题聚焦 PHP在API接口开发中的应用,系统讲解 RESTful 架构设计原则、路由处理、请求参数解析、JSON数据返回、身份验证(Token/JWT)、跨域处理以及接口调试与异常处理。通过实战案例(如用户管理系统、商品信息接口服务),帮助开发者掌握 PHP构建高效、可维护的RESTful API服务能力。

179

2025.11.26

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

454

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

546

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

334

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

82

2025.09.10

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

22

2026.03.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
快速入门Node.JS全套完整版
快速入门Node.JS全套完整版

共83课时 | 9.1万人学习

nodejs开发基础教程
nodejs开发基础教程

共15课时 | 4.6万人学习

JavaScript设计模式视频教程
JavaScript设计模式视频教程

共28课时 | 5.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号