`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 wor

Answer 1

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

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

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