How do I make socket.io + ejs + mongoose work properly?

Question

My goal is whenever someone press accept button it will, automatically increment the notifications on the navbar.

The logic

1) An admin press an accept button

2) User's navbar will listen to notify event and will increment the number of the count and append the message to the li element.

Here's the picture of the notification that Im hoping socket.io will update

However I don't see any real-time updates

Here's the code

the socket.io client side

<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script>
  var socket = io.connect('http://localhost:3000');
  $('form').submit(function(){
    var companyName = $("#companyName").val();
    var notification = "Accepted by " + companyName;
    var user_id = $('#candidate_id').val();
    var notificationCount = parseInt($('#notification').html());
    noticationCount += 1;
    socket.emit('notify', {notification: notification, userId: user_id, count: notificationCount});
  });
  socket.on('notify', function(msg){
    $('#notification').html(msg.count);
    $('#addNotification').append($('<li>').text(msg.notification));
  });
</script>

The HTML (EJS) codes -- this is where it supposed to update.

<li class="dropdown notifications-menu">

            <span id='notification' class="label label-warning"><%= user.notifications.length %></span>
          </a>
          <ul class="dropdown-menu">

            <li>

              <ul class="menu" id="addNotification">
                <% for(var i=0; i < user.notifications.length; i++)  { %>
                <li><!-- start notification -->
                  <a href="#">
                    <i class="fa fa-users text-aqua"></i> <%= user.notifications[i] %>
                  </a>
                </li>
                <% } %>
              </ul>
            </li>

          </ul>
        </li>

Serverside

io.on('connection', function(socket){
  socket.on('notify', function(msg){

      User.findById({ _id: msg.userId}, function(err, found) {
        if (typeof found === 'undefined') {
          // Do something but what should I do?s
        } else {
          found.notifications.push(msg.notification);
          found.save(function(err) {
            console.log(msg.notification); // Doesnt even console.log the data.

          });
        }
      });
  });
});

Again my goal is

1) Someone submit a button and it will emit all the hidden input values according to its tag's id like id="user_id".

2) socket.on('notify') --> Will listen and update it in real time via id of the targeted html tags

3) Save the data in the database.

However the above implementation, I have to refresh it then I can see the result. But if I add this line to socket.io clientside code

var notificationCount = parseInt($('#notification').html());
        noticationCount += 1;

It won't even save it to the database, where else to update it in real-time. I

Please lend me your real-time knowledge :)

score 0 · Answer 1 · answered Feb 04 '16 at 14:12

1) You should not include socket.js file from cdn, it is should be loaded like

<script src="http://localhost:3000/socket.io/socket.io.js"></script>

you don't need to save socket.io.js file anywhere in the project folder, this is handled by socket.io module

2) I see code to receive client message to server, not from there back to clients. It will look like this (for broadcast)

io.on('connection', function(socket){ socket.on('notify', function(msg){ // pass notification & count to client io.emit('notify', {notification:msg.notification, count:your_msg_count}); ....

I am not going deeper into your code, hope this will fix your issues.

How do I make socket.io + ejs + mongoose work properly?

1 Answers1