CODEWITHSUNDEEP
javascripthtmlnode.jswebsocket
michael
michael

Reputation: 4483

NodeJS and HTML5 Websockets not working together

I have installed NodeJS on my Ubuntu machine and have created the following script....

var host = 'localhost'
var port = '8080'
var net = require('net');

net.createServer(function (socket) {
    socket.write("Echo server\r\n");
    socket.on("data", function (data) {
        socket.write(data);
    });
}).listen(port, host);

console.log('Server running at http://' + host + ':' + port + '/');

I then run...

node example.js

...in a terminal, which gives me the following...

Server running at http://localhost:8080/

I created a simple HTML page with the following code...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
      <script>
        $(document).ready(function(){
            if(!("WebSocket" in window)) {
                alert("Sorry, the build of your browser does not support WebSockets.");
                return;
            }

            ws = new WebSocket("ws://localhost:8080/");

            ws.onclose = function() {
                alert("socket closed");
            };
            ws.onopen = function() {
                alert("socked opened");
            };
            ws.onmessage = function() {
                alert("message received");
            };

            $( 'button' ).click( function() {
                ws.send( "testing" );
            });

            setInterval( function() {
                $( 'p.readyState' ).text( ws.readyState );
            }, 1000 );
        });
      </script>
    </head>
    <body>
        <button type="button">Click Me!</button>
        <p class="readyState"></p>
    </body>
</html>

But when I browse to the page I get no feedback and the readyState is always 0. If I stop the server whilst the page is still open I get the socket closed alert.

I have tested this script in Chrome (8.0.552.215), Firefox 4 (Beta 7) and Opera 11 (Beta).

Does anyone have any suggestions?

Thanks!

Upvotes: 3

Views: 3779

Answers (2)

Josh K
Josh K

Reputation: 28893

You aren't running a WebSocket server, you're running a HTTP server. I wrote a tutorial on WebSockets and Node.js, try reading through that for a more detailed explanation.

You need to elevate the connection to a WebSocket connection because a WS connection uses a standard HTTP request initially. Create a server around Node's WebSocket Server implementation instead of net.

Upvotes: 7

Hendrik Brummermann
Hendrik Brummermann

Reputation: 8312

I suggest that you have a look at socket.io which provides a common cross browser API, transparently using whatever the browser supports (including websockets). The official server side implementation is in NodeJS. It was suggested in this question.

Firefox has disabled Websockets in the upcoming pre-release because of a serious security vulnerability at the protocol level. Opera has announced to do the same in version 11.

Upvotes: 3

Related Questions