Controlling a HTML page via Socket.io

Question

I´d like to control the look of a HTML page using the strings I receive from my Node.js server via Socket.io. Each string I receive becomes an entry in a list (see screenshot below). Until here it works. Now, I want to use these strings to control other things, for example the color of the heading

I´m using a string comparison. I tried to turn the heading green whenever the received string is "on". However, the following command does not turn the heading green:

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

But if I tell my computer to turn the heading green when any message other than "on" comes in. Then the heading is turning green. However the incoming message is exactly "on"! In this case the heading should not become green!

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

What am I doing wrong?

Here is the complete client-side HTML code and the link to a screenshot.

<!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>

Screenshot: https://i.stack.imgur.com/14FW8.jpg

Has anyone an idea? I don´t get it. – wurstbrotrest Sep 21 '14 at 21:50 — wurstbrotrest, Sep 21 '14 at 21:50

score 0 · Accepted Answer · edited May 23 '17 at 12:12

0

This seems like a problem with String comparison. Are you sure that there is no whitespace or some weird unicode characters in receivedData? Try it again with .trim().

Check these:

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

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

edited May 23 '17 at 12:12

Community

1
1

answered Sep 22 '14 at 12:28

DerM

1,497
1
14
27

1

Yes, this solved my problem, thanks! I´m sure the problem was a newline which was sent by my Arduino to the server. receivedData = msg.trim(); removed the invisible newline characters. – wurstbrotrest Sep 22 '14 at 18:48

Controlling a HTML page via Socket.io

1 Answers1