From b96b6d3ea606bab8de61e6afcd41498de187a62f Mon Sep 17 00:00:00 2001 From: Vladimir Goldobin Date: Tue, 10 Feb 2015 12:13:11 +0600 Subject: [PATCH 01/10] reformat code --- index.html | 4 ++-- index.js | 19 ++++++++++++------- package.json | 4 ++-- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 5f2767e98..7f67e1743 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ body { font: 13px Helvetica, Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } - form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } + form button, form label { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } @@ -16,7 +16,7 @@

diff --git a/index.js b/index.js index a322dca0f..b55ec0787 100644 --- a/index.js +++ b/index.js @@ -2,16 +2,21 @@ var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); -app.get('/', function(req, res){ - res.sendFile(__dirname + '/index.html'); +app.get('/', function (req, res) { + res.sendFile(__dirname + '/index.html'); }); io.on('connection', function(socket){ - socket.on('chat message', function(msg){ - io.emit('chat message', msg); - }); + console.log('a user connected'); + socket.on('chat message', function(msg){ + console.log('message: ' + msg); + io.emit('chat message', msg); + }); + socket.on('disconnect', function(){ + console.log('user disconnected'); + }); }); -http.listen(3000, function(){ - console.log('listening on *:3000'); +http.listen(3000, function () { + console.log('listening on *:3000'); }); diff --git a/package.json b/package.json index 46f75814b..e88f47fc9 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.0.1", "description": "my first socket.io app", "dependencies": { - "express": "4.10.2", - "socket.io": "1.2.0" + "express": "^4.10.2", + "socket.io": "^1.3.3" } } From 5129e0eed79b78f42d72f8447e9b6f396bf84d04 Mon Sep 17 00:00:00 2001 From: Vladimir Goldobin Date: Tue, 10 Feb 2015 14:53:07 +0600 Subject: [PATCH 02/10] readme: tasks, issues --- README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/README.md b/README.md index c18a098c0..6a66e794c 100644 --- a/README.md +++ b/README.md @@ -5,3 +5,23 @@ the [Getting Started](http://socket.io/get-started/chat/) guide of the Socket.IO website. Please refer to it to learn how to run this application. + +# Homework + +Here are some ideas to improve the application: + + - Broadcast a message to connected users when someone connects or disconnects + - Add support for nicknames + - Don’t send the same message to the user that sent it himself. Instead, append the message directly as soon as he presses enter. + - Add “{user} is typing” functionality + - Show who’s online + - Add private messaging + - Share your improvements! + + - Joining users see up to a 100 of latest messages in their personal message boards + - The message board clearly indicates the authorship of messages by the same user + - The anonymous user identity is assigned automatically, and it survives browser restarts + +# Issues + + - Client: handle server disconnect, do not loose outgoing messages From c9a8d40313e58c31bf05ee5d785d14a2eb42275f Mon Sep 17 00:00:00 2001 From: Vladimir Goldobin Date: Tue, 10 Feb 2015 16:15:06 +0600 Subject: [PATCH 03/10] resend last N messages to new client --- Queue.js | 11 +++++++++++ README.md | 2 +- index.js | 7 +++++++ 3 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 Queue.js diff --git a/Queue.js b/Queue.js new file mode 100644 index 000000000..b1d6bfdcf --- /dev/null +++ b/Queue.js @@ -0,0 +1,11 @@ +var Queue = function(limit) { + this.limit = limit; + this.elements = []; +} +Queue.prototype.push = function(elem) { + this.elements.push(elem); + while (this.elements.length > this.limit) { + this.elements.shift(); + } +} +module.exports = Queue; \ No newline at end of file diff --git a/README.md b/README.md index 6a66e794c..83c609b44 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ Here are some ideas to improve the application: - Add private messaging - Share your improvements! - - Joining users see up to a 100 of latest messages in their personal message boards + - (DONE) Joining users see up to a 100 of latest messages in their personal message boards - The message board clearly indicates the authorship of messages by the same user - The anonymous user identity is assigned automatically, and it survives browser restarts diff --git a/index.js b/index.js index b55ec0787..d75f92c2e 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,9 @@ var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); +var Queue = require('./Queue.js'); + +var queue = new Queue(1); app.get('/', function (req, res) { res.sendFile(__dirname + '/index.html'); @@ -8,8 +11,12 @@ app.get('/', function (req, res) { io.on('connection', function(socket){ console.log('a user connected'); + for (var i = 0; i < queue.elements.length; i++) { + socket.emit('chat message', queue.elements[i]); + } socket.on('chat message', function(msg){ console.log('message: ' + msg); + queue.push(msg); io.emit('chat message', msg); }); socket.on('disconnect', function(){ From 6f94e01bbd535b291ab8b0b10cf06d8b1c28bf19 Mon Sep 17 00:00:00 2001 From: Vladimir Goldobin Date: Tue, 10 Feb 2015 17:42:39 +0600 Subject: [PATCH 04/10] browser cookie with username, detect messages ownership --- README.md | 6 +++--- index.html | 10 ++++++++-- index.js | 2 +- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 83c609b44..b454ec3b7 100644 --- a/README.md +++ b/README.md @@ -18,9 +18,9 @@ Here are some ideas to improve the application: - Add private messaging - Share your improvements! - - (DONE) Joining users see up to a 100 of latest messages in their personal message boards - - The message board clearly indicates the authorship of messages by the same user - - The anonymous user identity is assigned automatically, and it survives browser restarts + - __(DONE)__ Joining users see up to a 100 of latest messages in their personal message boards + - __(DONE)__ The message board clearly indicates the authorship of messages by the same user + - __(DONE)__ The anonymous user identity is assigned automatically, and it survives browser restarts # Issues diff --git a/index.html b/index.html index 7f67e1743..1b80a9302 100644 --- a/index.html +++ b/index.html @@ -20,15 +20,21 @@ + diff --git a/index.js b/index.js index d75f92c2e..038f30002 100644 --- a/index.js +++ b/index.js @@ -15,7 +15,7 @@ io.on('connection', function(socket){ socket.emit('chat message', queue.elements[i]); } socket.on('chat message', function(msg){ - console.log('message: ' + msg); + console.log('message: ', msg); queue.push(msg); io.emit('chat message', msg); }); From 910137f183f61c25404b7d1d45be5d239fcea178 Mon Sep 17 00:00:00 2001 From: Vladimir Goldobin Date: Tue, 10 Feb 2015 17:47:24 +0600 Subject: [PATCH 05/10] increase queue limit to 100 --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 038f30002..15ffff067 100644 --- a/index.js +++ b/index.js @@ -3,7 +3,7 @@ var http = require('http').Server(app); var io = require('socket.io')(http); var Queue = require('./Queue.js'); -var queue = new Queue(1); +var queue = new Queue(100); app.get('/', function (req, res) { res.sendFile(__dirname + '/index.html'); From cd516b0a147c027cbd96a8cf9654f82bc457f721 Mon Sep 17 00:00:00 2001 From: Vladimir Goldobin Date: Tue, 10 Feb 2015 17:50:47 +0600 Subject: [PATCH 06/10] space --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 1b80a9302..b0112b3ec 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,7 @@ return false; }); socket.on('chat message', function(msg){ - $('#messages').append($('

').text((msg[0] === username ? 'me: ' : '?:' ) + msg[1])); + $('#messages').append($('

').text((msg[0] === username ? 'me: ' : '?: ' ) + msg[1])); }); From 1d5f6a2dacb3579020659c2885a44ec8510ca7b1 Mon Sep 17 00:00:00 2001 From: Vladimir Goldobin Date: Wed, 11 Feb 2015 09:32:08 +0600 Subject: [PATCH 07/10] mark same person messages --- index.html | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index b0112b3ec..eac77b58e 100644 --- a/index.html +++ b/index.html @@ -24,17 +24,30 @@ From b5acbbc3f83b35eb24c888851aa43166de5bb9a7 Mon Sep 17 00:00:00 2001 From: Vladimir Goldobin Date: Wed, 11 Feb 2015 09:46:21 +0600 Subject: [PATCH 08/10] restore messages from clients after server restart --- index.html | 5 +++++ index.js | 14 +++++++++++--- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index eac77b58e..df4621387 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@ var socket = io(); var username = $.cookie('username'); var usernames = []; + var messages = []; if (username === null) { username = Math.random().toString(); $.cookie('username', username); @@ -47,8 +48,12 @@ }; socket.on('chat message', function (msg) { + messages.push(msg); $('#messages').append($('

').text(nick(msg[0]) + ': ' + msg[1])); }); + socket.on('restore', function () { + socket.emit('restore', messages); + }); diff --git a/index.js b/index.js index 15ffff067..4c80ee2a8 100644 --- a/index.js +++ b/index.js @@ -9,17 +9,25 @@ app.get('/', function (req, res) { res.sendFile(__dirname + '/index.html'); }); -io.on('connection', function(socket){ +io.on('connection', function (socket) { console.log('a user connected'); for (var i = 0; i < queue.elements.length; i++) { socket.emit('chat message', queue.elements[i]); } - socket.on('chat message', function(msg){ + if (queue.elements.length === 0) { + socket.emit('restore', []); + } + socket.on('restore', function (messages) { + if (queue.elements.length === 0) { + queue.elements = messages; + } + }); + socket.on('chat message', function (msg) { console.log('message: ', msg); queue.push(msg); io.emit('chat message', msg); }); - socket.on('disconnect', function(){ + socket.on('disconnect', function () { console.log('user disconnected'); }); }); From 14908dc1960b45a7f31035bac3a2cfc1d2c5c064 Mon Sep 17 00:00:00 2001 From: Vladimir Goldobin Date: Wed, 11 Feb 2015 09:59:08 +0600 Subject: [PATCH 09/10] fix history scrolling, add an issue to readme --- README.md | 1 + index.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index b454ec3b7..ea2824013 100644 --- a/README.md +++ b/README.md @@ -25,3 +25,4 @@ Here are some ideas to improve the application: # Issues - Client: handle server disconnect, do not loose outgoing messages + - After server restart and restore message from first client, reconnected clients receive message history diff --git a/index.html b/index.html index df4621387..f6bdc17ad 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button, form label { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } - #messages { list-style-type: none; margin: 0; padding: 0; } + #messages { list-style-type: none; margin: 0; padding: 0; padding-bottom: 100px; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } From 05cc9ac9ed2a1da2757ae69f2e40b7d74e3a8ac2 Mon Sep 17 00:00:00 2001 From: Vladimir Goldobin Date: Wed, 11 Feb 2015 10:23:52 +0600 Subject: [PATCH 10/10] fix issue: After server restart and restore message from first client, reconnected clients receive message history --- README.md | 1 - index.html | 17 ++++++++++++++--- index.js | 10 +++++----- 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index ea2824013..b454ec3b7 100644 --- a/README.md +++ b/README.md @@ -25,4 +25,3 @@ Here are some ideas to improve the application: # Issues - Client: handle server disconnect, do not loose outgoing messages - - After server restart and restore message from first client, reconnected clients receive message history diff --git a/index.html b/index.html index f6bdc17ad..9d3b4485b 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,7 @@ username = Math.random().toString(); $.cookie('username', username); } + socket.emit('restoreClient', username); $('form').submit(function () { socket.emit('chat message', [username, $('#m').val()]); $('#m').val(''); @@ -47,12 +48,22 @@ return 'sameperson' + pos; }; - socket.on('chat message', function (msg) { + var onChatMessage = function (msg) { messages.push(msg); $('#messages').append($('

').text(nick(msg[0]) + ': ' + msg[1])); + }; + socket.on('chat message', onChatMessage); + socket.on('restoreServer', function () { + socket.emit('restoreServer', messages); }); - socket.on('restore', function () { - socket.emit('restore', messages); + socket.on('restoreClient', function (history) { + if (!messages.length) { + for (var i in history) { + if (history.hasOwnProperty(i)) { + onChatMessage(history[i]); + } + } + } }); diff --git a/index.js b/index.js index 4c80ee2a8..bdf925c98 100644 --- a/index.js +++ b/index.js @@ -11,13 +11,13 @@ app.get('/', function (req, res) { io.on('connection', function (socket) { console.log('a user connected'); - for (var i = 0; i < queue.elements.length; i++) { - socket.emit('chat message', queue.elements[i]); - } if (queue.elements.length === 0) { - socket.emit('restore', []); + socket.emit('restoreServer', []); } - socket.on('restore', function (messages) { + socket.on('restoreClient', function () { + socket.emit('restoreClient', queue.elements); + }); + socket.on('restoreServer', function (messages) { if (queue.elements.length === 0) { queue.elements = messages; }