`require 'socket.io-client.js'` not working

Question

I was able to get the basic socket.io server application running on my own server, and request it directly through any web browser (I tried FF, chrome, and IE7 which all worked).

Now, the issue comes in that the client sample code doesn't work for me, and I get the following error in the javascript console in chrome:

"Uncaught ReferenceError: require is not defined" in reference to this line of code in socket.io.js: var client = require('socket.io-client');

This leads me to believe that it doesn't recognize the require command period, which seems odd. A couple of other things - I have apache running, and so moved all of my socket.io files into my apache directory htdocs to be accessed through http port 80 which were installed using cygwin and the guide at: https://github.com/joyent/node/wiki/Building-node.js-on-Cygwin-(Windows)

The socket.io files were also installed under the cygwin directory on my c: drive in windows, where they are not useful if accessed by apache. One other tidbit - I do have a socket.io-client.js file, but when I opened it to edit using wordpad, it looks corrupted, having only one line of text inside: <symlink>ÿþi

Answer 1

The require() function is a feature of Node.js and only works on the Javascript that is run on the server side. To include files in the browser, you would have to use the regular method:

<script src="/socket.io/socket.io.js"></script>

Node.js is usually set up in a way that the socket.io server is attached to an instance of web server, which is also part of the Node.js server. Code examples taken directly from the socket.io "how to use" page, this would be on the server side:

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

If used as above, Node.js is the server that also serves the static part of the web page, and address of Node.js server is the reference for including client side scripts.

Another use case is when the static html is served by your main web server and you are trying to connect to a Node.js instance that might be in another address or another port or both. Socket.io.js is not served by your main web server. It is served directly by the socket.io running on the Node.js server. You have to provide client browser the Node.js servers address to get the socket.io client side Javascript file, like this:

<script src="http://nodejs.address:port/socket.io/socket.io.js"></script>

<script>
  var socket = io.connect('http://nodejs.address:port');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
});
</script>

As a side note, there are client side javascript libraries that provide require() function, check Javascript require on client side

Answer 2

You can use Browserify (http://browserify.org) or WebPack (http://webpack.github.io) to use node-like CommonJS requires on the client-side.

Answer 3

I use browserify to manage all the require() resources for the browser-side code.

That said, I was able to require the socket.io-client on my browser-side code in the following way:

var io = require('socket.io-client');
var $ = require('jquery');

var socket = io();
$('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
});
socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));
});

As opposed to the following snippet using a traditional script tag format found on socket.io's github example: https://github.com/rauchg/chat-example/blob/master/index.html

<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
    var socket = io();
    $('form').submit(function(){
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
    });
    socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(msg));
    });
</script>

socket.io-client can be downloaded in your development environment as a node modulo by doing:

npm install socket.io-client