라이브 채팅: Modulus 및 Node.js를 사용하여 구현됨
- PHPz원래의
- 2023-09-03 23:25:131012검색
이 튜토리얼에서는 Node.js, Socket.IO 및 MongoDB를 사용하여 실시간 채팅 애플리케이션을 구현하는 방법을 보여주고 해당 애플리케이션을 Modulus에 함께 배포하겠습니다.
먼저 글 마지막 부분에서 보게 될 애플리케이션의 최종 모습을 보여드리겠습니다.
Node.js는 애플리케이션의 핵심, MVC로 Express, 데이터베이스로 MongoDB, 소켓이 될 것입니다. IO는 실시간 통신에 사용됩니다. 완료되면 애플리케이션을 Modulus에 배포합니다. MongoDB 부분은 실제로 Modulus 내부에 있습니다.
1.장면
- John은 우리 앱을 사용하고 싶어하며 브라우저에서 앱을 엽니다.
- 첫 페이지에서는 채팅 중 사용한 닉네임을 선택하고 채팅에 로그인합니다.
- 그는 텍스트 영역에 무언가를 쓰고 Enter 키를 누릅니다.
- 텍스트는 RESTful 서비스(Express)로 전송되고 MongoDB에 기록됩니다.
- 동일한 텍스트가 MongoDB에 작성되기 전에 현재 채팅 앱에 로그인한 사용자에게 방송됩니다.
보시다시피 이것은 매우 간단한 애플리케이션이지만 웹 애플리케이션이 제공하는 거의 모든 것을 다루고 있습니다. 애플리케이션에는 채널 시스템이 없지만 소스 코드를 포크하고 채널 모듈을 구현하여 연습할 수 있습니다.
2.처음부터 프로젝트 디자인하기
프로젝트의 작은 부분을 먼저 설명하고 마지막에 정리하도록 노력하겠습니다. 백엔드부터 시작해서 프론트엔드까지 작업하겠습니다. 이제 도메인 개체(MongoDB 모델)부터 시작해 보겠습니다.
2.1. 모델
데이터베이스 추상화를 위해 Mongoose를 사용합니다. 이 프로젝트에는 Message。 这个消息模型只包含 text, createDate, 和 作者。 作者没有像User这样的模型，因为我们不会完全实现用户注册/登录系统。将会有一个简单的昵称提供页面，并且该昵称将被保存到cookie中。这将在 Message 模型中用作 author Text in field라는 모델이 하나만 있습니다. 아래에서 샘플 JSON 모델을 볼 수 있습니다.
이러한 문서를 생성하려면 다음 Mongoose 함수를 사용하여 모델을 구현할 수 있습니다.
으아아아Mongoose 모듈을 가져오고, JSON 형식의 필드 및 필드 속성으로 모델을 정의하고, Message라는 모델을 생성하기만 하면 됩니다. 사용하려는 페이지에 모델이 포함됩니다.
이미 동일한 채널의 사용자에게 이 메시지를 방송하고 있는데 왜 메시지를 데이터베이스에 저장하고 싶은지 궁금하실 것입니다. 채팅 메시지를 저장할 필요가 없다는 것은 사실이지만 데이터베이스 통합 레이어에 대해 설명하고 싶었습니다. 어쨌든 우리는 프로젝트의 컨트롤러에서 이 모델을 사용할 것입니다. 제어 장치?
2.2. 컨트롤러
앞서 말했듯이 MVC 부분은 Express를 사용하겠습니다. 그리고 C 这里代表的是Controller. 우리 프로젝트에는 메시징 엔드포인트가 두 개뿐입니다. 그 중 하나는 최근 채팅 메시지를 로드하는 것이고, 두 번째는 데이터베이스에 저장된 후 채널로 브로드캐스트되는 전송된 채팅 메시지를 처리하는 것입니다.
첫 번째 및 두 번째 컨트롤러는 채팅 및 로그인 페이지에 정적 HTML 파일을 제공하는 데만 사용됩니다. 세 번째는 쌍을 처리하는 데 사용됩니다 /messages 端点的发布请求，以创建新消息。在该控制器中，首先将请求正文转换为 Message 模型，然后使用 Mongoose 函数 save.
Mongoose에 대해 자세히 알아보지는 않겠습니다. 자세한 내용은 설명서를 확인하세요. 문제가 있는지 확인하기 위해 save 함수에 콜백 함수를 제공할 수 있습니다. 성공하면 마지막 5개 기록을 createDate 내림차순으로 가져오고 채널의 클라이언트에게 5개 메시지를 브로드캐스트합니다.
자, MC는 끝났습니다. MC。 让我们切换到 View
보기 섹션으로 전환해 보겠습니다. 2.3. 보기
일반적으로 Express에서는 Jade, EJS, Handlebars와 같은 템플릿 엔진을 사용할 수 있습니다. 하지만 페이지가 하나뿐이고 이는 채팅 메시지이므로 정적으로 제공하겠습니다. 실제로 위에서 말했듯이 이 정적 HTML 페이지를 제공하는 컨트롤러가 두 개 더 있습니다. 정적 HTML 페이지를 제공하는 데 다음이 사용되는 것을 볼 수 있습니다.
으아아아
res.sendFile 提供 index.html 和 login.html。 index.html 和 login.html 与 server.js 位于同一文件夹中，这就是我们在 HTML 文件名之前使用 __dirname이 엔드포인트는 res.sendFile을 사용하여 index.html 및 login.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 仪表板。点击左侧的数据库菜单，然后点击创建数据库。
在弹出表单中填写必填字段，如下所示。
当您填写必填字段并点击创建时，它将创建一个 MongoDB 数据库您将在屏幕上看到您的数据库 URL。我们将使用 MONGO URI， 因此请复制该 URI。
在我们的项目中，Mongo URI是从环境变量MONGO_URI中获取的，您需要在仪表板中设置该环境变量。转到信息中心，点击项目菜单，在列表中选择您的项目，然后点击左侧菜单中的管理。在此页面中，向下滚动页面时您将看到环境变量部分，如下所示。
您可以通过两种方式部署到 Modulus：
- 使用仪表板上传项目 ZIP 文件
- 使用 Modulus CLI 从命令行进行部署
我将继续使用命令行选项，因为另一个很容易做到。首先，安装 Modulus CLI：
npm install -g modulus
转到您的项目文件夹并执行以下命令以登录 Modulus。
modulus login
当您执行上述命令时，系统会提示您输入用户名和密码：
如果您已使用 GitHub 创建帐户，则可以使用 --github 选项.
modulus login --github
现在您已登录 Modulus，可以创建项目了。使用以下命令创建项目：
modulus project create "Realtime Chat"
当您运行此函数时，系统会询问您运行时。选择第一个选项，即 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 기업 제품에 대한 자세한 내용을 보려면 여기를 클릭하세요.
위 내용은 라이브 채팅: Modulus 및 Node.js를 사용하여 구현됨의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!