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：为什么不将最后五条消息保留在一个数组中，然后在连接时发送该数组？

消息来自用户，并被添加到数组/列表的末尾，然后从列表中弹出数组的第一个元素。

当用户连接时向所有用户发送消息，指示新用户已连接。该用户发送数组的内容，并按正确的顺序打印。

已编辑包含代码。

这些片段来自我正在研究的基于网页的演示系统。

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

请根据需要使用此功能，但请记住，这是来自其他项目的上下文块。我已经测试了整个项目，但不是孤立的这些片段，除非我完全看到你的代码，否则我现在无法提出更多建议。

从websocket获取过去的消息

1 个答案: