получить последние сообщения от 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> 

Как я могу сделать я так когда Jois пользователь чат, он показывает 5 последних сообщений на чат? Я пытался зацикливаться, но я не могу понять, что/где зацикливаться

В основном, я хотел бы, чтобы он показывал последние сообщения в чате, когда они присоединяются, чтобы они знали, о чем говорят пользователи и т. Д.

Answer 1

TL; DR: Почему бы не сохранить последние пять сообщений в массиве, а затем отправить массив после соединения?

Сообщение приходит от пользователя и добавляется в конец массива/списка, тогда первый элемент массива выгружается из списка.

Когда пользователь подключается, отправьте сообщение всем пользователям, которые указывают, что подключены новые пользователи. Этот пользователь отправляет содержимое массива и печатается в правильном порядке.

ИЗМЕНИТЬ КОД.

Эти фрагменты взяты из системы представления презентаций на основе веб-карт, над которыми я работаю.

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); 
    } 
} 

Пожалуйста, используйте это, как вам нужно, но помните, что это из контекста куски из другого проекта. Я тестировал проект в целом, но не эти фрагменты изолированно, если только я не увидел ваш код целиком, я бы не смог предложить больше на этом этапе.