From 4514c2c49f0e0ec7cf9911dc254a8d20644d5def Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 5 Aug 2015 21:28:20 -0400 Subject: pushing messages into a div --- public/js/lib/views/room/chat.js | 63 ++++++++++++++++++++++++++++++++++++ public/js/lib/views/room/index.js | 10 ------ public/js/lib/views/room/room.js | 29 +++++++++++++++++ public/js/lib/views/room/userlist.js | 15 +++++++++ 4 files changed, 107 insertions(+), 10 deletions(-) create mode 100644 public/js/lib/views/room/chat.js delete mode 100644 public/js/lib/views/room/index.js create mode 100644 public/js/lib/views/room/room.js create mode 100644 public/js/lib/views/room/userlist.js (limited to 'public/js/lib/views/room') diff --git a/public/js/lib/views/room/chat.js b/public/js/lib/views/room/chat.js new file mode 100644 index 0000000..2c1140e --- /dev/null +++ b/public/js/lib/views/room/chat.js @@ -0,0 +1,63 @@ +var ChatView = View.extend({ + + el: "#chat", + + template: $("#message_template").html(), + + events: { + "submit form": "send", + "scroll #messages": "scroll", + }, + + initialize: function(){ + var $msg = this.$msg = this.$("#message") + this.$messages = this.$("#messages") + this.messages = this.$messages.get(0) + this.$msg.focus() + $(window).focus(function(){ $msg.focus() }) + }, + + seen: {}, + add: function(msg){ + var key = msg.date + "_" + msg.nick + if (key in this.seen) return + this.seen[key] = true + + var $el = $( this.template ) + $el.find(".nick").html(msg.nick) + $el.find(".msg").html(msg.msg) + this.$messages.append($el) + if (! this.scrolled) { + this.scrollToBottom() + } + }, + + send: function(e){ + e && e.preventDefault() + console.log("hi") + var val = this.$msg.sanitize() + this.$msg.focus() + if (! val) return + this.$msg.val("") + var msg = {} + msg.room = room.name + msg.msg = val + msg.nick = user.username + msg.date = +new Date + this.add(msg) + app.socket.send("message", msg) + }, + + empty: function(){ + this.$messages.empty() + }, + + scrolled: false, + scroll: function(){ + this.scrolled = (this.messages.scrollTop > this.messages.scrollHeight - this.$el.height() - 100) + }, + scrollToBottom: function(){ + this.messages.scrollTop = document.body.scrollHeight + } + +}) diff --git a/public/js/lib/views/room/index.js b/public/js/lib/views/room/index.js deleted file mode 100644 index 58d7449..0000000 --- a/public/js/lib/views/room/index.js +++ /dev/null @@ -1,10 +0,0 @@ -var RoomView = View.extend({ - - events: { - }, - - initialize: function(name){ - app.socket = ws.connect(name) - } - -}) \ No newline at end of file diff --git a/public/js/lib/views/room/room.js b/public/js/lib/views/room/room.js new file mode 100644 index 0000000..c8d7f3f --- /dev/null +++ b/public/js/lib/views/room/room.js @@ -0,0 +1,29 @@ +var chat + +var RoomView = View.extend({ + + events: { + }, + + initialize: function(name){ + this.name = name + chat = this.chatView = new ChatView () + this.userlist = new UserlistView () + + app.socket = ws.connect(name) + + app.socket.on("joined", function(msgs){ + msgs && msgs.forEach(chat.add) + }) + + app.socket.on("messages", function(msgs){ + msgs && msgs.forEach(chat.add) + }) + + app.socket.on("message", function(msg){ + chat.add(msg) + }) + + } + +}) \ No newline at end of file diff --git a/public/js/lib/views/room/userlist.js b/public/js/lib/views/room/userlist.js new file mode 100644 index 0000000..d638a02 --- /dev/null +++ b/public/js/lib/views/room/userlist.js @@ -0,0 +1,15 @@ +var UserlistView = View.extend({ + + el: "#userlist", + + events: { + }, + + initialize: function(){ + }, + + update: function(users){ + + }, + +}) \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 0809c1c3a02943d51c6882039004365daa3e3920 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 5 Aug 2015 21:40:04 -0400 Subject: functioning chat --- public/js/lib/views/room/chat.js | 2 +- public/js/lib/views/room/room.js | 2 ++ server/ws.js | 5 +++++ 3 files changed, 8 insertions(+), 1 deletion(-) (limited to 'public/js/lib/views/room') diff --git a/public/js/lib/views/room/chat.js b/public/js/lib/views/room/chat.js index 2c1140e..058d02d 100644 --- a/public/js/lib/views/room/chat.js +++ b/public/js/lib/views/room/chat.js @@ -45,7 +45,7 @@ var ChatView = View.extend({ msg.nick = user.username msg.date = +new Date this.add(msg) - app.socket.send("message", msg) + app.socket.emit("message", msg) }, empty: function(){ diff --git a/public/js/lib/views/room/room.js b/public/js/lib/views/room/room.js index c8d7f3f..10c4d08 100644 --- a/public/js/lib/views/room/room.js +++ b/public/js/lib/views/room/room.js @@ -11,6 +11,8 @@ var RoomView = View.extend({ this.userlist = new UserlistView () app.socket = ws.connect(name) + + app.socket.emit("join", { nick: user.username }) app.socket.on("joined", function(msgs){ msgs && msgs.forEach(chat.add) diff --git a/server/ws.js b/server/ws.js index 75f430c..7199ac3 100644 --- a/server/ws.js +++ b/server/ws.js @@ -14,6 +14,7 @@ ws.add = function(name){ var messages = room.messages = [] room.users = {} sockets = {} + console.log("new room >> " + name) var ns = ws.io.of('/' + name) @@ -21,8 +22,10 @@ ws.add = function(name){ var nick + console.log("new connection ...") socket.on('join', function(data){ nick = data.nick + console.log("joined >> " + nick) if (sockets[nick]) { // already connected? sockets[nick].disconnect() @@ -33,6 +36,8 @@ ws.add = function(name){ }) socket.on('message', function(data){ + console.log(data) + console.log("<" + data.nick + "> " + data.msg) if (messages.length > 20) { messages.shift() } messages.push(data) ns.emit('message', data) -- cgit v1.2.3-70-g09d2 From 78f7f5ae58d9357e240873c137e8940e0647fbbd Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 6 Aug 2015 01:15:05 -0400 Subject: userlist stuph --- public/js/lib/views/room/chat.js | 2 +- public/js/lib/views/room/room.js | 19 ++++++++++--------- public/js/lib/views/room/userlist.js | 20 +++++++++++++++++--- server/ws.js | 8 +++----- 4 files changed, 31 insertions(+), 18 deletions(-) (limited to 'public/js/lib/views/room') diff --git a/public/js/lib/views/room/chat.js b/public/js/lib/views/room/chat.js index 058d02d..222522f 100644 --- a/public/js/lib/views/room/chat.js +++ b/public/js/lib/views/room/chat.js @@ -9,7 +9,7 @@ var ChatView = View.extend({ "scroll #messages": "scroll", }, - initialize: function(){ + initialize: function(socket){ var $msg = this.$msg = this.$("#message") this.$messages = this.$("#messages") this.messages = this.$messages.get(0) diff --git a/public/js/lib/views/room/room.js b/public/js/lib/views/room/room.js index 10c4d08..3b3b253 100644 --- a/public/js/lib/views/room/room.js +++ b/public/js/lib/views/room/room.js @@ -6,20 +6,21 @@ var RoomView = View.extend({ }, initialize: function(name){ - this.name = name - chat = this.chatView = new ChatView () - this.userlist = new UserlistView () app.socket = ws.connect(name) + + var base = this + this.name = name + chat = this.chatView = new ChatView (socket) + this.userlist = new UserlistView (socket) + app.socket.emit("join", { nick: user.username }) - - app.socket.on("joined", function(msgs){ - msgs && msgs.forEach(chat.add) - }) - app.socket.on("messages", function(msgs){ - msgs && msgs.forEach(chat.add) + app.socket.on("welcome", function(room){ + room.messages.forEach(chat.add) + base.userlist.users = room.users + base.userlist.update() }) app.socket.on("message", function(msg){ diff --git a/public/js/lib/views/room/userlist.js b/public/js/lib/views/room/userlist.js index d638a02..600f647 100644 --- a/public/js/lib/views/room/userlist.js +++ b/public/js/lib/views/room/userlist.js @@ -5,11 +5,25 @@ var UserlistView = View.extend({ events: { }, - initialize: function(){ + users: {}, + initialize: function(socket){ + var base = this + app.socket.on("joined", function(data){ + base.users[data.nick] = true + base.update() + }) + app.socket.on("parted", function(data){ + delete base.users[data.nick] + base.update() + }) }, - update: function(users){ - + update: function(){ + base.el.empty() + Object.keys(base.users).sort().forEach(function(nick){ + var el = document.createElement("div") + base.el.appendChild(el) + }) }, }) \ No newline at end of file diff --git a/server/ws.js b/server/ws.js index 7199ac3..92c7d5a 100644 --- a/server/ws.js +++ b/server/ws.js @@ -22,22 +22,19 @@ ws.add = function(name){ var nick - console.log("new connection ...") socket.on('join', function(data){ nick = data.nick - console.log("joined >> " + nick) if (sockets[nick]) { // already connected? sockets[nick].disconnect() sockets[nick] = socket room.users[nick] = true - socket.emit("messages", messages) + socket.emit("welcome", room) + ns.emit('joined', data) } }) socket.on('message', function(data){ - console.log(data) - console.log("<" + data.nick + "> " + data.msg) if (messages.length > 20) { messages.shift() } messages.push(data) ns.emit('message', data) @@ -46,6 +43,7 @@ ws.add = function(name){ socket.on('disconnect', function(){ delete sockets[nick] delete room.users[nick] + ns.emit('parted', {nick:nick}) }) }) -- cgit v1.2.3-70-g09d2 From 3c3a30c3676c1abef87b8faaf7921f9a7244730d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 6 Aug 2015 02:20:00 -0400 Subject: relocating events --- public/js/lib/views/room/chat.js | 5 ++--- public/js/lib/views/room/room.js | 9 +++------ public/js/vendor/util.js | 1 + 3 files changed, 6 insertions(+), 9 deletions(-) (limited to 'public/js/lib/views/room') diff --git a/public/js/lib/views/room/chat.js b/public/js/lib/views/room/chat.js index 222522f..0932e47 100644 --- a/public/js/lib/views/room/chat.js +++ b/public/js/lib/views/room/chat.js @@ -24,8 +24,8 @@ var ChatView = View.extend({ this.seen[key] = true var $el = $( this.template ) - $el.find(".nick").html(msg.nick) - $el.find(".msg").html(msg.msg) + $el.find(".nick").html(sanitize(msg.nick)) + $el.find(".msg").html(sanitizeHTML(msg.msg)) this.$messages.append($el) if (! this.scrolled) { this.scrollToBottom() @@ -34,7 +34,6 @@ var ChatView = View.extend({ send: function(e){ e && e.preventDefault() - console.log("hi") var val = this.$msg.sanitize() this.$msg.focus() if (! val) return diff --git a/public/js/lib/views/room/room.js b/public/js/lib/views/room/room.js index 3b3b253..13f08ce 100644 --- a/public/js/lib/views/room/room.js +++ b/public/js/lib/views/room/room.js @@ -1,5 +1,3 @@ -var chat - var RoomView = View.extend({ events: { @@ -11,20 +9,19 @@ var RoomView = View.extend({ var base = this this.name = name - chat = this.chatView = new ChatView (socket) + this.chatView = new ChatView (socket) this.userlist = new UserlistView (socket) - app.socket.emit("join", { nick: user.username }) app.socket.on("welcome", function(room){ - room.messages.forEach(chat.add) + room.messages.forEach(base.chat.add) base.userlist.users = room.users base.userlist.update() }) app.socket.on("message", function(msg){ - chat.add(msg) + base.chat.add(msg) }) } diff --git a/public/js/vendor/util.js b/public/js/vendor/util.js index 73a25ad..3637f49 100644 --- a/public/js/vendor/util.js +++ b/public/js/vendor/util.js @@ -14,6 +14,7 @@ function trim (s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") } function sanitize (s){ return (s || "").replace(new RegExp("[<>&]", 'g'), "") } function sanitizeName (s){ return (s || "").replace(new RegExp("[^-_a-zA-Z0-9]", 'g'), "") } function stripHTML (s){ return (s || "").replace(/<[^>]+>/g, "") } +function sanitizeHTML (s){ return (s || "").replace(/&/g, "&").replace(//g, ">") } function capitalize (s){ return s.split(" ").map(capitalizeWord).join(" ") } function capitalizeWord (s){ return s.charAt(0).toUpperCase() + s.slice(1) } function slugify (s){ return (s || "").toLowerCase().replace(/\s/g,"-").replace(/[^-_a-zA-Z0-9]/g, '-').replace(/-+/g,"-") } -- cgit v1.2.3-70-g09d2