using jQuery with socket.io

Question

I am trying to use jQuery in my socket.io js (index.js) file.

Whenever I try to do

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script> 
<script src="index.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));
  });
  socket.on('new user', function(data){
    $('#newUserMessage').text(data);
  });        
</script> 

I get this error in my console

GET http://localhost:3000/index.js 

ReferenceError: $ is not defined

I'm not sure why this would happen?

But if I remove it I cant use jQuery's functions in index.js?

My index.js file

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

var $usernameInput = $('.usernameInput');

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  socket.broadcast.emit('new user', 'New User Joined, Say Hi :D');
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

function setUsername () {
  username = cleanInput($usernameInput.val().trim());

  if (username) {
    socket.emit('add user', username);
  }
}

Solution

You are a little confused, you have your front end and you have your back end.

Your index.js is your back end, you run that using NodeJS and you don't try to use jQuery on your back end, there's no DOM to manipulate. Also you don't include index.js on your front end, that's back end code.

This is wrong:

var $usernameInput = $('.usernameInput');

You can't access your DOM to get that value you have to send it to the back end, with some kind of event like this:

Front end

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script> 
<script>
  var socket = io();
  $('form').submit(function(){
    socket.emit('chatMessage', $('#m').val());
    $('#m').val('');
    return false;
  });
  socket.on('connect', function(){
    socket.emit('setUser', $('.usernameInput').val().trim());
  });
  socket.on('chatMessage', function(msg){
    $('#messages').append($('<li>').text(msg));
  });
  socket.on('newUser', function(data){
    $('#newUserMessage').text(data);
  });        
</script>

Back end

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

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  socket.broadcast.emit('newUser', 'New User Joined, Say Hi :D');
  socket.on('setUser', function(username){
    console.log(username); //here you have your user name
  });
  socket.on('chatMessage', function(msg){
    io.emit('chatMessage', msg);
  });
});