Monday 5 June 2017

Socket.io will not send when adding multiple fields

I am using Node.JS, Express, Socket.io, and MySQL to build a chat-like app. I have gotten the items to load, however, the usernames are not saving. I have created a form with a hidden userid input but it will not submit. The chat will work without the id field.
Here is the code: Users.js

    /* GET users listing. */
app.get('/classes/:classname', (req, res, next) => {
  var classesfindQuery = 'SELECT * FROM '+dbconfig.classlink_table+' INNER JOIN '+dbconfig.classes_table+' on '+dbconfig.classlink_table+'.roomID = '+dbconfig.classes_table+'.id WHERE userID = ?';
  connection.query(classesfindQuery, [req.user.id], function(err, classes){
    if(err){
      throw err;
    } else {
        var getoldQuery = 'SELECT * FROM '+dbconfig.messages_table+' INNER JOIN '+dbconfig.users_table+' on '+dbconfig.messages_table+'.senderID = '+dbconfig.users_table+'.id WHERE roomName = ?';
        connection.query(getoldQuery, [req.param('classname')], function(err, oldmessages){
        console.log(req.user.accessLevel);
        var accessLevel = req.user.accessLevel
        if(req.user.accessLevel === "student"){
          var canedit= false;
        } else {
          var canedit= true;
        }
        console.log(canedit);
        res.render('userhome', { user : req.user, classes: classes, messages: oldmessages, canedit: canedit });
        io.on('connection', function(socket){
          console.log('a user connected');
          socket.join('Test');
          socket.on('chat message', function(data){
            var time= new Date();
            var savemsgQuery = 'INSERT INTO '+dbconfig.messages_table+' (senderID, msg, roomName, datetime) VALUES (?,?,?,?)';
            connection.query(savemsgQuery, [data.userid, data.msg, req.param('classname'), time], function(err, success){
              if(err){
                console.log(err);
                throw err;
              }else{
                var finduserQuery = 'SELECT username FROM '+dbconfig.users_table+' WHERE id = ?';
                connection.query(finduserQuery, [data.userid], function(err, username){
                  console.log(username);
                  if(err){
                    console.log(err);
                    throw err;
                  } else {
                    var fromnot= moment(time).fromnow
                    var data = {
                      user: username,
                      msg: msg,

                    }
                    io.emit('chat message', data );
                    console.log('hmm');
                  }
                })

              }
            })
          });
          socket.on('disconnect', function(){
            console.log('user disconnected');
          });
        });
      });
    }
  });

});

Client socket js

var socket = io();
$('form').submit(function(){
  var msg='I am working';
  socket.emit('working', msg);
})

  $('#chatform').submit(function(){
    socket.emit('chat message', { msg : $('#m').val(), userid: $('#userid').val()});
    $('#m').val('');
    $('#userid').val('');
    return false;
  });
  socket.on('chat message', function(data){
  $('#messages').prepend('<div class="card"> <div class="card-block"> <h5 class="card-title">'+data.user+' </h5> <!--<h8 class="card-subtitle mb-2 text-muted"></h8>--!> <p class="card-text">'+data.msg+'</p>'
              );
});

Finally, pug file for this room

extends loggedin
block classes
  .classes(style='margin-bottom: 5%')
    each classs in classes
      a(href='/classes/'+classs.RoomName, style='color: white; padding-left: 6%;') #{classs.RoomName}
block content
  .row(style='height: 90vh')
    .col-12
      .card-columns#messages(style='height: 80vh; overflow-y: scroll; display: flex; flex-direction: column-reverse;')
        each message in messages.reverse()
          .card
            .card-block
              h5.card-title #{message.username}
              h8.card-subtitle.mb-2.text-muted #{message.time}
              p.card-text #{message.msg}
  .row(style='padding-top: 8%')
    .col-12
      form#chatform(action='', style='position: absolute; bottom: 10vh; width: 67vw; padding-top: 10px; margin-top: 5vh')
          .row(style='margin-right: 0')
            .col.col-md-12(style='margin-right: 0; width: 100%')
              if canedit
                .form-group
                  .form-inline
                    input#m.form-control.col-10(type='text', placeholder='Type your message here.')
                    input#userid.form-control.col-10(type='text', value=user.id, style='display: none;')
                    button.forn-control.col-2(type='button', style='background: none; border: none; width: 2vw')
                      i.material-icons.hovericons(style='color: #00304f') send
              else
                .form-group
                  .form-inline
                    input#m.form-control.col-10(type='text', placeholder='Type your message here.', disabled)
                    button.forn-control.col-2(type='button', style='background: none; border: none; width: 2vw', disabled)
                      i.material-icons.hovericons(style='color: #00304f') send            
block scripts
  script(src='../socket.io/socket.io.js')
  script(src='../js/initial.js')



via Cameron Sechrist

No comments:

Post a Comment