Uncaught ReferenceError: io is not defined

[adopudi]

I have modified my hackathon-starter site according to the Readme file.
After running npm start and accessing the site from a client I get the following error:

Uncaught ReferenceError: io is not defined

The error is generated by the following client code:

$(document).ready(function () {
  // init socket.io
  const socket = io.connect(window.location.hostname + ':3001')
  socket.on('greet', (data) => {
    console.log(data)
    socket.emit('respond', { message: 'Hey there, server!' })
  })
})

While in the hackaton-starter code there is the following line in layout.pug :

script(src='/socket.io/socket.io.js')

I don't see the same in this repo, and if try to add it it gives another error since there is no socket.io library compiled by laravel-mix .

How is socket.io supposed to be loaded in the client side? am I missing something obvious?

Thank you in advance

[niallobrien]

Hi, good question - what's the error you receive when you add script(src='/socket.io/socket.io.js') to layout.pug?
Actually, I don't see socket.io listed in package.json, which would be required. So please try run npm install socket.io --save and let me know how you get on. Thanks.

[adopudi]

socket.io is already listed in package.json:

"socket.io": "^2.1.0",

and I have it installed.

The error with script(src='/socket.io/socket.io.js') is:

GET http://localhost:8080/socket.io/socket.io.js net::ERR_ABORTED 404 (Not Found)

However if I change that line to:

script(src='http://localhost:3001/socket.io/socket.io.js')

It works beautifully.
I also notice that out of these lines:

/**
 * Create Express & Socket.io servers.
 */
const socketIoPort = 3001
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(socketIoPort)

the server variable is not used anywhere.

[niallobrien]

Thanks for that. Is everything working perfectly now? :)

[adopudi]

For it to work I have changed port 3001 to 8080.
These are the changes that I have made.

app.js

/*
const socketIoPort = 3001
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(socketIoPort)
*/

const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server)

//app.use(expressStatusMonitor({websocket: io, port: socketIoPort}))
app.use(expressStatusMonitor({websocket: io, port: app.get('port')}))

/**
 * Start Express server.
 */
/*
app.listen(app.get('port'), () => {
  console.log('%s App is running at http://localhost:%d in %s mode', chalk.green('✓'), app.get('port'), app.get('env'));
  console.log('  Press CTRL-C to stop\n');
});
*/

/**
 * Start http server.
 */
server.listen(app.get('port'), () => {
  console.log('%s App is running at http://localhost:%d in %s mode', chalk.green('✓'), app.get('port'), app.get('env'));
  console.log('  Press CTRL-C to stop\n');
});

assets/scripts/app.js

// const socket = io.connect(window.location.hostname + ':3001')

const socket = io.connect(`${window.location.origin}`);

layout.pug

// Add before 
// script(src='/js/main.js') or 
// :mix(js) '/assets/scripts/app.js'
script(src='/socket.io/socket.io.js')