通过Socket.io控制HTML页面

时间:2014-09-20 19:51:16

标签: javascript jquery html node.js socket.io

我想使用我从Node.js服务器通过Socket.io收到的字符串来控制HTML页面的外观。 我收到的每个字符串都成为列表中的条目(参见下面的屏幕截图)。 直到这里它才有效。 现在,我想使用这些字符串来控制其他内容,例如标题的颜色

我正在使用字符串比较。 每当收到的字符串“打开”时,我都试图将标题变为绿色。 但是,以下命令不会将标题变为绿色:

if(receivedData == "on") 
{
    $("#currentData").css("color", "green");
}

但是如果我告诉我的电脑在“on”以外的任何消息进入时将标题变为绿色。 然后标题变绿了。但是传入的消息正好“开启”!在这种情况下,标题不应变为绿色!

if(receivedData != "on") 
{
    $("#currentData").css("color", "green");
}

我做错了什么?

以下是完整的客户端HTML代码和屏幕截图的链接。

<!doctype html>
<html>
    <head>
        <title>Browser Info Panel</title>
        <link rel="stylesheet" type="text/css" href="./styles.css">
    </head>

    <body>
        <div id="currentData"> <h1> CurrentData </h1> </div>
        <ul id="messages" /ul>


        <script src="/socket.io/socket.io.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
        <script>    
            var receivedData;
            var socket = io();
            socket.on('chat message', function(msg)
            {
                $('#messages').append($('<li>').text(msg));
                receivedData = msg;

                if(receivedData != "on") 
                {
                    $("#currentData").css("color", "green");
                }
            });
        </script>  
    </body>
</html>

截图: http://i.imgur.com/ruZP0x5.jpg

1 个答案:

答案 0 :(得分:0)

这似乎是String比较的问题。你确定receivedData中没有空格或一些奇怪的unicode字符吗? 请使用.trim()再次尝试。

检查这些:

https://stackoverflow.com/a/19649034/1528880

https://stackoverflow.com/a/1706650/1528880