Question

I’m trying to create a simple WebSocket example using the HTML5/JS API. Based on what I trace out on the server, it seems like the socket is connecting, but none of the events fire (onopen, onmessage, onclose, etc). I’m a Flash developer so I’m not very good at debugging the JavaScript and I’m hoping someone can help me out. Here’s the client side code I’m using:

<script type="text/javascript" charset="utf-8">
    function startSocket()
    {
        if("WebSocket" in window)
        {
            var ws = new WebSocket("ws://localhost:1740");

            ws.onopen = function() {
                window.alert("open!");
            }

            ws.onmessage = function(event) {
                window.alert(event.data);
            }
            
            ws.onclose = function() {
                window.alert("Closed");
            }   
            
            ws.onerror = function() {
                window.alert("trouble in paradise");
            }           
        }
        
    }
    

</script>

And here’s my socket server code (which works just fine from Flash, but that may not mean anything):

<?php

create_connection('localhost',1740);

function create_connection($host,$port)
{
    $socket = socket_create(AF_INET,SOCK_STREAM,SOL_TCP);
    
    if (!is_resource($socket)) {
        echo 'Unable to create socket: '. socket_strerror(socket_last_error()) . PHP_EOL;
    } else {
        echo "Socket created.\n";
    }
    
    if (!socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, 1)) {
        echo 'Unable to set option on socket: '. socket_strerror(socket_last_error()) . PHP_EOL;
    } else {
        echo "Set options on socket.\n";
    }
    
    if (!socket_bind($socket, $host, $port)) {
        echo 'Unable to bind socket: '. socket_strerror(socket_last_error()) . PHP_EOL;
    } else {
        echo "Socket bound to port $port.\n";
    }
    
    if (!socket_listen($socket,SOMAXCONN)) {
        echo 'Unable to listen on socket: ' . socket_strerror(socket_last_error());
    } else {
        echo "Listening on the socket.\n";
    }
    
    while (true)
    {
        $connection = @socket_accept($socket);
        
        if($connection)
        {       
            echo "Client $connection connected!\n";
            send_data($connection);

        } else {
            echo "Bad connection.";
        }
    }
}

function send_data($connection)
{
    echo $connection;
    // Create a number between 30 and 32 that will be our initial stock price.
    $stock_price = rand(30,32);
    while (true)
    {
        socket_write($connection,"$stock_price\n",strlen("$stock_price\n"));
        sleep(1);
        
        // Generate a random number that will represent how much our stock price
        // will change and then make that number a decimal and attach it to the 
        // previous price.
        $stock_offset = rand(-50,50);
        $stock_price = $stock_price + ($stock_offset/100);
        echo "$stock_price\n";
    }
}


?>

Answer 1

Maybe this is completely obvious, but if anyone else gets this, the problem is that you need to add a handshake. In Flash this isn’t required and I still don’t fully understand it, but I was able to modify this project – http://code.google.com/p/phpwebsocket/ – and it worked as it was supposed to by adding the gethandshake code after my socket_accept code ran.