Why does my node.js / socket.io app not work on iOS6?

I thought the whole point of socket.io was to not have to worry about modern browsers? lol

Anyway, I am new to socket programming. I have a small app that simply mimics mouse movements.

You open several browsers and when you move the mouse, your actions are recorded in the other browsers. It moves a small square. Kinda cool. However, when I open it on my iPad (iOS6) nothing! Sockets isn't connecting. I even put an alert message in the connect event and nothing.

Works in IE, FF and Chrome just fine on my laptop. The only difference is that my dev machine uses localhost while the iPad uses my machine's IP. However, when I connect to my local IP on my laptop, it still works. Just not in Safari/iPad.

Here is my server.

    var app = require('http').createServer(handler),
        io = require('socket.io').listen(app),
        fs = require('fs');


    app.listen(80);

    function handler(req, res) {
        var file = __dirname + '/public/index.html';
        fs.readFile(file, 
            function(err, data) {
                if(err) {
                    res.writeHead(500);
                    return res.end('Error loading index.html');
                }

                res.writeHead(200);
                res.end(data);
            }
        );
    }


    var rooms = ['abc', 'test1'];

    var sockets = [];
    io.sockets.on('connection', function(socket) {
        sockets.push(socket);

        socket.on('m', function(data) {
            socket.broadcast.to(socket.room).emit('relay', {msg: 'MouseX: ' + data.x + ' MouseY: ' + data.y, x: data.x, y: data.y});
        });

        socket.on('join', function(room) {
            socket.join(room);
            socket.emit('updateStatus', {msg: 'Joined room ' + room});
            console.log('Joined room ' + room);
        });

    });

Here is my client:

<!doctype html>
<html>
    <head>
        <style>
            body {
                padding: 40px;
            }
            #cursor {
                background:white;
                border:1px solid black;
                color: white;
                display: block;
                height:24px;
                padding:6px;
                position:absolute;
                width:24px;
                z-index:20;
            }
        </style>
    </head>
    <body>

        <input id='msg' type='text' size='100' /><br />
        <input id='box' type='text' size='100' />
        <div id='cursor'></div>

        <script src='/socket.io/lib/socket.io.js'></script>
        <script>
            var socket = io.connect('http://localhost');
            var b = document.getElementById('box');
            var m = document.getElementById('msg');
            var c = document.getElementById('cursor');

            // join custom room
            socket.on('connect', function() {
                socket.emit('join', 'abc');
            });

            // update status messages from server
            socket.on('updateStatus', function(data) {
                m.setAttribute('value', data.msg);
            });

            socket.on('relay', function(data) {
                b.setAttribute('value', data.msg);
                c.style.left = parseInt(data.x) + 'px';
                c.style.top = parseInt(data.y) + 'px';
            });

            document.onmousemove = function(event) {
                event = event || window.event;
                socket.emit('m', {x: event.clientX, y: event.clientY});
            }


        </script>

    </body>
</html>

Solution

Localhost is local to the machine. You're IP should use a ip address or domain name:

something like: io.connect('192.168.1.110'); or io.connect('test.myapp.com');