闖過從WebSocket的

Question

消息好吧，我有這樣的代碼

<script type="text/javascript"> 
    var ws; 
    var userName = ""; 
    var displayOnTextArea = function (msg) { 
     var tarea = $('#textarea'); 
     tarea.prepend ( '<div style="background: rgb(51, 51, 51); color: white; padding: 31px; border: 1px solid rgba(0, 0, 0, 0.44); border-radius: 10px; padding-top: 40px; padding-bottom: 20px;">' + msg + '</div><br>'); 
    } 

    var sendMessage = function (msg) { 
     if (userName == "SYSTEM") 
      ws.send ("<div style='background: rgb(88, 86, 86); background: -webkit-repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); border: 1px solid rgba(0, 0, 0, 0.44); color: white; width: 100px; text-align: center; margin-left: 751px;; margin-top: -55px; padding: 5px; border-radius: 10px; font-family: josefin_sansbold;'>" + userName + "</div> " + msg); 
     else 
      ws.send ("<div style='background: rgb(88, 86, 86); <? if(User::isAdmin()) { echo 'background: -webkit-repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);'; } ?> border: 1px solid rgba(0, 0, 0, 0.44); color: white; width: 100px; text-align: center; margin-left: 751px;; margin-top: -55px; padding: 5px; border-radius: 10px; font-family: josefin_sansbold;'>" + userName + "</div> " + msg); 
    } 

    var safe_tags = function(str) { 
     return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') ; 
    } 

    $(document).keypress (function (event) { 
     if (event.which == 13) { 
      if ($('#input_').val() != "") { 
       if ($('#input_').val() != " ") { 
        displayOnTextArea ("<div style='background: rgb(88, 86, 86); <? if(User::isAdmin()) { echo 'background: -webkit-repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);'; } ?> border: 1px solid rgba(0, 0, 0, 0.44); color: white; width: 100px; text-align: center; margin-left: 751px;; margin-top: -55px; padding: 5px; border-radius: 10px; font-family: josefin_sansbold;'><?=$User->username?></div>" + safe_tags($('#input_').val())); 
        sendMessage (safe_tags($('#input_').val())); 
        $('#input_'). val (""); 
       } 
      } 
     } 
    }); 

    $(document).ready (function () { 
      userName = "<? echo $User->username; ?>"; 
      console.log ("Attempting to connect to server"); 
      ws = new WebSocket ("ws://scribblehost.ws:1035/avatarrealms162882"); //We need a serverip. 
      ws.onopen = function () { 
       console.log ("Connected"); 
       userName = "SYSTEM"; 
       displayOnTextArea ("<div style='background: rgb(88, 86, 86); background: -webkit-repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); border: 1px solid rgba(0, 0, 0, 0.44); color: white; width: 100px; text-align: center; margin-left: 751px;; margin-top: -55px; padding: 5px; border-radius: 10px; font-family: josefin_sansbold;'>SYSTEM</div> Welcome <?=$User->username?> to the chat!"); 
       sendMessage ("Welcome <?=$User->username?> to the chat!"); 
       userName = "<? echo $User->username; ?>"; 
      } 

      ws.onmessage = function (evt) { 
       console.log (evt.msg);  
       displayOnTextArea (evt.data); 
      } 
    }); 
</script> 
<input type='text' id='input_' style='font-size:20px;height:30px;width: 100%;' autofocus="autofocus" /></div> 
<div id='textarea' style='padding-top: 15px; background: none; resize: none; border: none; font-size: 20px; padding-bottom: 185px; max-height: 389px; padding-left: 145px; margin-top: -6px; overflow-y: hidden;'></div> 

我怎樣才能讓我這樣當用戶喬伊斯聊天，它顯示聊天5條最新消息？ 我試過循環，但我不知道什麼/在哪裏循環

基本上，我想它顯示聊天時的最新消息，當他們加入，所以他們知道用戶在說什麼，等等。

Answer 1

TL; DR：爲什麼不把最後的五條消息保存在一個數組中，然後在連接時發送數組？

消息從用戶進來並添加到數組/列表的末尾，數組的第一個元素將從列表中彈出。

當用戶連接時，向所有用戶發送消息，指示新用戶已連接。該用戶發送數組的內容，並按正確的順序打印。

編輯爲包含代碼。

這些片段取自我正在研究的基於Websockets的演示系統。

App.js

var express = require('express'); 
var app = express(); 
var server = require('http').createServer(app); 
var io = require('socket.io').listen(server); 
var previousMessages = []; 

server.listen(1337, function() { 
    "use strict"; 
    console.log("Application start!") 
}); 

// Usual application start stuff, use your best judgement. 
app.get('/', function(request, response) { 
    "use strict"; 
    var index = path.join(__dirname, "public", "index.html"); 
    response.sendfile(index); 
}); 

io.sockets.on('connection', function(socket) { 
    "use strict"; 

    // On websocket connection send previous messages. 
    io.sockets.emit("msgRecv", { 
    "msg": previousMessages 
    }); 

    socket.on("msgSend", function(data) { 
    // New message arrived, re-calculate the previous messages 
    // that users will see when they connect. 
    if (previousMessages.length > 4) { 
     previousMessages.split(1, 1); 
     previousMessages.push(data.msg); 
    } 

    // Send the latest message, not the previous messages, 
    // the user is already connected. 
    io.sockets.emit("msgRecv", { 
     "msg": data.msg 
    }) 
    }); 
}); 

stuff.js

var socket = io.connect("meh:1337"); 

function sendMessage() { 
    "use strict"; 

    // Assuming a textbox/textfield here... 
    var msg = document.getElementById("msg").value; 
    socket.emit("msgSend" { 
    "msg": msg 
    }); 
} 

function RecvMessage() { 
    "use strict"; 

    socket.on("msgRecv", function(data) { 
    console.log(data); 
    } 
} 

請使用，因爲你需要，但記住這是斷章取義塊從另一個項目。我已經對整個項目進行了測試，但不是孤立的這些代碼片段，除非我完全看到您的代碼，否則我現在無法提供更多建議。