2014-09-26 36 views
1

消息好吧,我有这样的代码闯过从WebSocket的

<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条最新消息? 我试过循环,但我不知道什么/在哪里循环

基本上,我想它显示聊天时的最新消息,当他们加入,所以他们知道用户在说什么,等等。

+0

相关http://stackoverflow.com/questions/17359871/how-to-send-old-messages-with-websockets – 2014-09-26 11:25:05

+0

也许这有助于 http://stackoverflow.com/questions/17359871/how - 发送旧邮件与Websockets/26177047#26177047 – 2014-10-03 13:31:45

回答

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

请使用,因为你需要,但记住这是断章取义块从另一个项目。我已经对整个项目进行了测试,但不是孤立的这些代码片段,除非我完全看到您的代码,否则我现在无法提供更多建议。

+2

我是这种事情的小白菜,所以我会怎么去做这件事? – 2014-09-26 10:12:23

+0

@尼尔我该怎么做?我也有同样的问题。 – 2014-09-26 10:55:11