1

I generated an express app by using express-generator and when including socket.io I've noticed that socket.io client is not being loading by the browser. I've been 2 days searching on the internet for a solution with no success.

I followed socket.io instructions for express 3/4 and in fact the socket.io client that is exposed by the server on /socket.io/socket.io.js is being served (no 404 errors). The problem is that when javascript code that tries to use socket io client fails because "io is not defined"

Any ideas about why the browser is not loading the client although it states that HTTP GET to http://localhost:8080/socket.io/socket.io.js returns HTTP 200?

By the way, the app is also using Angular.js.

index.html

<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script type="text/javascript">
 // Uncaught ReferenceError: io is not defined
 var socket = io.connect('http://localhost:8080');
</script>

app.js (no error logs and socket.io server debug message says " socket.io:server serve client source +3s")

// setup server
app.set('port', process.env.PORT || 8080);

var server = require('http').Server(app);
var io = require('socket.io')(server);

console.log(app.get('port'));

server.listen(app.get('port'),  function() {
  console.log('Express server listening on port ' + server.address().port);

});


io.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

Update:

By using socket.io CDN the result is the same. It does not work

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
4
  • Do you have the right server-side version of socket.io installed server-side? Did you look at what http://localhost:8080/socket.io/socket.io.js gives you from the client? Is the file what you expect? Is io defined in it? Are there any other errors in the client? Do you need to clear your browser cache? Commented May 21, 2016 at 1:16
  • @jfriend00 socket.io version is 1.4.6. Regarding the file I'm getting from the client is this: gist.github.com/endymion00/a69c9f187c1dc9c3e8f05443f5cd0c57 . As I said the only error in the client is " Uncaught ReferenceError: io is not defined" and I also tried to clear browser cache several times as well trying it using anonymous browsing. Commented May 21, 2016 at 11:25
  • I can confirm that that file does not contain a definition of io so it's clearly not the right file or not the complete file. Something must be messed up with your server-side installation of socket.io. What did you do when installing socket.io on the server? Did you copy any files around manually after installing? Commented May 21, 2016 at 16:06
  • @jfriend00 quite strange, in fact the only thing I did when installing was the required "npm install socket.io --save". I also tested the socket.io example chat application and it works. The only difference between my app and chat example is that my app has more app.set/app.use calls and that is was generated using express-generator. I tried to alter the order of app."x" calls but with not success yet (and obviously I checked socket.io "get started"). Commented May 21, 2016 at 17:35

1 Answer 1

2

I'm answering my own question. I finally found a solution for this problem but I still don't know what was the cause.

The solution was to move <script src="/socket.io/socket.io.js"></script> before any other tags (there are 16 script declarations: angular, bootstrap, jquery, moment, etc.).

So if you get "Uncaught ReferenceError: io is not defined" message on the browser move first "" at the beginning of the page inside tags. It will save you a lot of effort trying to make it work.

Sign up to request clarification or add additional context in comments.

3 Comments

i dont understand .. what exactly is the solution ???
@dll_onFire solution is that socket.io reference on your html file must be placed before other libraries.
@testing_22 great, I'm glad this helped someone after more than 5 years! :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.