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);
  }
}

You have provided the client code, what is the server code?

Bald Bantha
– Bald Bantha

2016-05-20 14:36:53 +00:00
Commented May 20, 2016 at 14:36 — Bald Bantha
– Bald Bantha, Commented May 20, 2016 at 14:36
@BaldBantha I've included it

Kieron606
– Kieron606

2016-05-20 14:37:52 +00:00
Commented May 20, 2016 at 14:37 — Kieron606
– Kieron606, Commented May 20, 2016 at 14:37

Fabio Antunes · Accepted Answer · 2016-05-20 16:02:01Z

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);
  });
});

Hiren Makwana · Accepted Answer · 2019-07-09 12:40:34Z

0

Here is My code for socket IO

<script>
    var socket = io.connect('<?php echo $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['SERVER_NAME'] . ":8000" ?>');
    console.log("tests" + socket);
    socket.on('connect', function () {

    });
    socket.on('call_admin_notification', function (data) {
        getAdminNotification();
    });       

</script>

answered Jul 9, 2019 at 12:40

Hiren Makwana

5245 silver badges17 bronze badges

Collectives™ on Stack Overflow

using jQuery with socket.io

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related