Node.js長いポーリングイベントループでコード全体が破損する

Question

私は完全にプログラミングに新しく、私のウェブサイトを開発するこの段階では、dbから最新のメッセージを取得し、それらを表示するために単純な長いポーリング要求を設定する必要がありますクライアントに送信します。 私は最後の日メッセージング・システムを作成し、今では、メッセージとユーザーの間で必要なすべての関係でメッセージを保存します...

ここに私がやったことです：

var express = require('express'); 
 
var router = express.Router(); 
 
var Conversation = require('../models/conversation'); 
 
var Promise = require('promise'); 
 

 
// Get Homepage 
 
router.get('/', function(req, res){ 
 
\t res.render('index'); 
 
}); 
 

 

 
var messages = []; 
 
router.get('/inbox', function(req, res){ 
 
\t var promise = new Promise(function (resolve, reject) { 
 
\t \t req.user.conversations.forEach(function(id){ 
 
\t \t \t Conversation.getConversationById(id, function(err, conv){ 
 
\t \t \t \t if (conv){ 
 
\t \t \t \t \t messages.push(conv); 
 
\t \t \t \t \t if(messages.length == req.user.conversations.length){ 
 
\t \t \t \t \t \t resolve(messages); 
 
\t \t \t \t \t \t messages = []; 
 
\t \t \t \t \t } 
 
\t \t \t \t } else { 
 
\t \t \t \t \t console.log(err); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t }); 
 
\t }).then(function(object){ 
 
\t \t res.render('inbox', {convers: object}); 
 
\t }).catch(function(err){ 
 
\t \t console.log(err); 
 
\t }); 
 
}); 
 

 
// Add new messages to messagesArray -> mesgArray to display them 
 
var mesgArray = []; 
 
var userIdFor = ""; 
 
router.post('/messages', function(req, res){ 
 
\t var convId = req.body.conversationId; 
 
\t userIdFor = req.user.id; 
 
\t var promise = new Promise(function(resolve, reject){ 
 
\t \t Conversation.getConversationById(convId, function(err, conver){ 
 
\t \t \t if (err){ 
 
\t \t \t \t console.log(err); 
 
\t \t \t } else { 
 
\t \t \t \t conver.messages.forEach(function(messa){ 
 
\t \t \t \t \t mesgArray.push({msg: messa.msg, owner: messa.msgOwner, ownerName: messa.msgOwnerName}); 
 
\t \t \t \t \t if(mesgArray.length == conver.messages.length){ 
 
\t \t \t \t \t \t resolve(mesgArray); 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t }); 
 
\t }).then(function(object){ 
 
\t \t res.send({allMessages: object, userId: userIdFor}); 
 
\t \t mesgArray = []; 
 
\t \t userIdFor = ""; 
 
\t }).catch(function(err){ 
 
\t \t console.log(err); 
 
\t }); 
 
}); 
 

 
// Save posted message to existent conversation 
 
router.post('/saveMsg', function(req, res){ 
 
\t var conversationId = req.body.conversationId; 
 
\t var messageToSave = req.body.message; 
 
\t console.log(messageToSave); 
 
\t console.log(conversationId); 
 
\t Conversation.getConversationById(conversationId, function(err, conversation){ 
 
\t \t if (err){ 
 
\t \t \t console.log(err); 
 
\t \t } else { 
 
\t \t \t Conversation.getConversationById(conversationId, function(err, conversation){ 
 
\t \t \t \t if(err){ 
 
\t \t \t \t \t console.log(err) 
 
\t \t \t \t } else { 
 
\t \t \t \t \t conversation.messages.push({ 
 
\t \t \t \t \t \t msg: messageToSave, 
 
\t \t \t \t \t \t msgOwner: req.user.id, 
 
\t \t \t \t \t \t msgOwnerName: req.user.firstName 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t conversation.save(function(err){ 
 
\t \t \t \t \t \t if(err){ 
 
\t \t \t \t \t \t \t console.log(err); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t }) 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t } 
 
\t }); 
 
}); 
 

 
module.exports = router;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<!-- REPLAY MESSAGE BOX --> 
 
<div class="contact-form-container hidden-mode"> 
 
    <div class="row hide-contact text-right"> 
 
    <img src="/images/close.png"> 
 
    </div> 
 
    <form> 
 
    <div class="inbox-all-messages-container"> 
 
     <div class="row inbox-all-messages"> 
 
     <!-- Here will be all the messages --> 
 
     </div> 
 
     <div class="row text-center inbox-send-input"> 
 
     <div class="col-lg-11 col-md-11 col-sm-11"> 
 
      <textarea class="inbox-message-response-txt" placeholder="Type your message here"></textarea> 
 
     </div> 
 
     <div class="col-lg-1 col-md-1 col-sm-1 text-center inbox-message-send-btn"> 
 
      <p class="inbox-message-send-msg-btn">Send</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div> 
 
<script> 
 
    $(document).ready(function(){ 
 

 
    var convId = ""; 
 
    $('.inbox-messager').on('click', function(){ 
 
    $('.inbox-all-messages').empty(); 
 
     var conversationId = this.getAttribute("data-conv-id"); 
 
     convId = conversationId; 
 
     $.ajax({ 
 
     url: '/messages', 
 
     method: 'POST', 
 
     contentType: 'application/json', 
 
     data: JSON.stringify({conversationId: conversationId}), 
 
     success: function(response){ 
 
      response.allMessages.forEach(function(message){ 
 
      if(message.owner == response.userId){ 
 
       $('.inbox-all-messages').append(
 
       '<div class="row inbox-message-structure-meNot">'+ 
 
        '<div class="row inbox-message-header">'+ 
 
         '<div class="inbox-message-ava col-lg-1 col-md-1 col-sm-1">'+ 
 
         '<img src="/images/avatar.jpg" class="inbox-message-header-ava-img">'+ 
 
         '</div>'+ 
 
         '<div class="inbox-message-header-senderName col-lg-3 col-md-3 col-sm-3">'+ 
 
         '<p>' + message.ownerName + '</p>'+ 
 
         '</div>'+ 
 
         '<div class="col-lg-3 col-lg-offset-5 col-md-3 col-md-offset-5 col-sm-3 col-sm-offset-5 inbox-message-header-sentTime text-right">'+ 
 
         '<p>24/05/2016</p>'+ 
 
         '</div>'+ 
 
        '</div>'+ 
 
        '<div class="row inbox-message-body">'+ 
 
        '<div class="col-lg-9 col-lg-offset-1 col-md-9 col-md-offset-1 col-sm-9 col-sm-offset-1 text-left">'+ 
 
         '<p>' + message.msg + '</p>'+ 
 
        '</div>'+ 
 
        '</div>'+ 
 
       '</div>' 
 
      ); 
 
       
 
      } else { 
 
       $('.inbox-all-messages').append(
 
       '<div class="row inbox-message-structure-me">'+ 
 
        '<div class="row inbox-message-header">'+ 
 
         '<div class="inbox-message-ava col-lg-1 col-md-1 col-sm-1">'+ 
 
         '<img src="/images/client.jpg" class="inbox-message-header-ava-img">'+ 
 
         '</div>'+ 
 
         '<div class="inbox-message-header-senderName col-lg-3 col-md-3 col-sm-3">'+ 
 
         '<p>' + message.ownerName + '</p>'+ 
 
         '</div>'+ 
 
         '<div class="col-lg-3 col-lg-offset-5 col-md-3 col-md-offset-5 col-sm-3 col-sm-offset-5 inbox-message-header-sentTime text-right">'+ 
 
         '<p>24/05/2016</p>'+ 
 
         '</div>'+ 
 
        '</div>'+ 
 
        '<div class="row inbox-message-body">'+ 
 
        '<div class="col-lg-9 col-lg-offset-1 col-md-9 col-md-offset-1 col-sm-9 col-sm-offset-1 text-left tester">'+ 
 
         '<p>' + message.msg + '</p>'+ 
 
        '</div>'+ 
 
        '</div>'+ 
 
       '</div>' 
 
      ); 
 
      } 
 
      }); 
 
      $('.inbox-all-messages').append('<div id="bottom"></div>'); 
 
      $('.inbox-all-messages').scrollTo('#bottom', 100, "max"); 
 
     } 
 
     }); 
 
     $('.contact-form-container').removeClass('hidden-mode'); 
 
     $('.messenger-contaner').addClass('stop-scroll'); 
 
     
 
    }); 
 

 
    $('.hide-contact').on('click', function(){ 
 
    $('.contact-form-container').addClass('hidden-mode'); 
 
    $('.messenger-contaner').removeClass('stop-scroll'); 
 
    }); 
 

 
    $('.inbox-message-send-msg-btn').on('click', function(){ 
 
    var messageToSend = $('.inbox-message-response-txt').val(); 
 
    $.ajax({ 
 
     url: '/saveMsg', 
 
     method: 'POST', 
 
     contentType: 'application/json', 
 
     data: JSON.stringify({message: messageToSend, conversationId: convId}), 
 
     success: function(response){ 
 
     alert('le message a bien ete enregistree'); 
 
     } 
 
    }); 
 
    }); 
 
}) 
 

 
</script>

今、私はメッセージを送信してmongoDBに保存することができますが、新しいメッセージを取得するためにページを更新する必要があります...だから私は長いポーリングリクエストを設定しようとしていますが、私のjQueryコードはページ全体を壊し、会話を開くことはできません。誰かが私のコードを改善し、ページをリフレッシュせずにメッセージを受け取るためのシンプルな技術を設定するのを手伝ってくれたらすごく素晴らしいだろう！

私の悪い英語のために申し訳ありません！そして私たちのためにそこに来てくれてありがとう！

Answer 1

あなたが言ったようにプログラミングを全く経験していない場合は、最初から問題がある機能を作成するのではなく、実際の解決策を使用する方が良い考えです。

あなたは、そのようなことのためにSocket.ioを使用することができます。長いポーリングを使用し、サポートされている場合はWebSocketにアップグレードしようとします。使い方はとても簡単です。ここでは、クライアントに要求を送信し、サーバーの全体の実施例である：

var path = require('path'); 
var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 
app.get('/', (req, res) => { 
    res.sendFile(path.join(__dirname, 'si.html')); 
}); 
io.on('connection', s => { 
    for (var t = 0; t < 3; t++) 
    setTimeout(() => s.emit('message', 'message from server'), 1000*t); 
}); 
http.listen(3002,() => console.error('listening on http://localhost:3002/')); 

そしてここでは、クライアント上の全体のJavaScriptコードは次のとおりです。

var l = document.getElementById('l'); 
var log = function (m) { 
    var i = document.createElement('li'); 
    i.innerText = new Date().toISOString()+' '+m; 
    l.appendChild(i); 
} 
log('opening socket.io connection'); 
var s = io(); 
s.on('connect_error', function (m) { log("error"); }); 
s.on('connect', function (m) { log("socket.io connection open"); }); 
s.on('message', function (m) { log(m); }); 

より多くの例と、より良い説明を参照してくださいthe project on GitHubましたクライアントにメッセージを送信する方法を説明するために作成しました。

は、詳細については、他の関連の質問を参照してください：

• Differences between socket.io and websockets
• socket.io no communication between server and client
• why web socket behave differently on nodejs ?
• getting an error when trying to use socket.io
• How to use Socket.io combined with Express.JS