javascript - Node sends data back multiple times everytime a user adds new data -
first of all, apologize horribly worded title; have been trying think of 1 past 20 minutes not know succinct way describe problem having. if has better suggestion, please let me know or edit title if able to.
background: in order learn nodejs, creating chat server. when user clicks createroombtn, event created containing name of room user created, , sent socket.js module in app.js, app.js appends room array of rooms (these rooms displayed list in browser), , creates broadcast event users including active user.
problem: let's there empty list, , user adds new room, titled "nodejs", display room on screen, , fine , dandy. now, if add room, socket.io, example, browser renders following result: socket.io, nodejs, nodejs. if add "javascript", result javascript, socket.io, nodejs, socket.io, node.js. basically, browser renders list on , on again, , each time list shrinks one. not have slightest idea of why happening. weird thing if press refresh, browser renders list correctly javascript, socket.io, nodejs. going on?
socket.js:
module.exports = function(io, rooms) { var chatrooms = io.of('/roomlist').on('connection', function(socket) { //io.of creates namespace console.log('connection established on server'); socket.emit('roomupdate', json.stringify(rooms)); socket.on('newroom', function(data) { console.log(data); rooms.push(data); socket.broadcast.emit('roomupdate', json.stringify(rooms)); socket.emit('roomupdate', json.stringify(rooms)); }) }) var messages = io.of('/messages').on('connection', function(socket) { console.log('connected chatroom!'); socket.on('joinroom', function(data) { socket.username = data.user; socket.userpic = data.userpic; socket.join(data.room); }) socket.on('newmessage', function(data) { socket.broadcast.to(data.room_number).emit('messagefeed', json.stringify(data)); }) }) } chatrooms.html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>{{title}}</title> <link rel="stylesheet" href="../css/chatrooms.css"> <script src="//code.jquery.com/jquery-1.11.0.min.js"> </script> <script src="/socket.io/socket.io.js"> </script> <script> $(function() { var host = '{{config.host}}'; var socket = io.connect(host + '/roomlist'); socket.on('connect', function() { console.log('connection established'); }) socket.on('roomupdate', function(data) { $('.roomlist').html(''); var procdata = json.parse(data); (var = 0; < procdata.length; i++) { var str = '<a href="room/' + procdata[i].room_number + '"><li>' + procdata[i].room_name + '<li></a>'; $('.roomlist').prepend(str); console.log(str); } }) $(document).on('click', '#createroombtn', function() { var room_name = $('#newroomtext').val(); console.log(room_name); if (room_name != '') { var room_number = parseint(math.random() * 10000); socket.emit('newroom', {room_name: room_name, room_number: room_number}); $('#newroomtext').val(''); } }) }) </script> </head> <body> <div class="cr-userbox"> <img src="{{user.profilepic}}" class="userpic"> <h3 class="username">{{user.fullname}}| <a href="/logout">logout</a></h3> </div> <div class="cr-container"> <h1> chatrooms</h1> <div class="cr-newroom"> <input type="text" id="newroomtext" autocomplete="off"> <input type="submit" id="createroombtn" value=" create room"> </div> <div class="cr-roomlist"> <ul class="roomlist"> </ul> </div> </div> </body> </html> please let me know if more information/modules required, , happy provide them.
update1: correctly suggested alex-rokabilis, have changed $('.roomlist').html() = '' $('.roomlist').html(''), however, problem continues persist.
i'm not sure if cause of problem or not you're getting nested list eliments because have 2 opening <li> tags in socket.on ('roomupdate') function
Comments
Post a Comment