my socket on connect and disconnect functions arent working (js and html/css)

this is my code; why doesn’t it send the message on connect/disconnect? when the user leaves or enters the chatroom, it is supposed to send user joined the chatroom or user left the chatroom

back end

io.on('connection', socket => {
    console.log(socket.id, "connected");
    socket.on("chat", (chat) => {
        io.sockets.emit("chat", chat);
    //msg.push([{ name: "x", key: "val" }]);
    //await db.set('messages', msg);
  });
    socket.on("connect", () => {
    
      var u = socket.username;
      socket.emit('joinedUser', u);
      const users = db.get('onlineUsers');
      users.push(socket.username);
      db.set('onlineUsers', users);
});
    socket.on("disconnect", () => {
    
      var u = socket.username;
        
  
      socket.emit('leftUser', u);
      const users = db.get('onlineUsers');
      const index = users.toString().indexOf(socket.username);
      if (index > -1) {
        users.splice(index, 1); // 2nd parameter means remove one item only
      }
});
});

front end

socket.on('joinedUser', (user) => {
var div = document.getElementById('messages-container')
div.innerHTML += `<div id = "serverMessage"><div id ="messageAuthorS">Server</div> <div id="messageValueS">${user.username} joined the chatroom</div></div>
`;
  div.scrollTop = div.scrollHeight;
});



socket.on("leftUser", (user) => {
  var div = document.getElementById('messages-container')
    div.innerHTML += `<div id = "serverMessage"><div id ="messageAuthorS">Server</div> <div id="messageValueS">${user.username} left the chatroom</div></div>
`;
div.scrollTop = div.scrollHeight;
});