diff --git a/example/index.html b/example/index.html index 0e9a82c..8f19058 100644 --- a/example/index.html +++ b/example/index.html @@ -16,10 +16,13 @@
-
- -
- +
+
+ +
+ +
+
@@ -33,7 +36,10 @@
    -
  • {{m.name}} - {{m.message}}
  • +
  • +
    {{m.name}}
    + {{m.message}} +
@@ -55,7 +61,7 @@ - + \ No newline at end of file diff --git a/example/server/server.js b/example/server/server.js new file mode 100644 index 0000000..f218c1b --- /dev/null +++ b/example/server/server.js @@ -0,0 +1,63 @@ +var socket = require('socket.io'); + +var io = socket.listen(1923); + +var users = []; +var messages = []; + +var names = []; + +io.on('connection', function (client) { + + + client.on('join', function (name) { + + client.join('chat'); + + users.push(name); + names[client.id] = name; + + client.emit('users', users); + client.emit('messages', messages); + client.emit('joined', true); + client.broadcast.emit('adduser', name); + }); + + + client.on('send', function (message) { + + var data = { + name: names[client.id], + message: message + }; + + if (messages.length > 10) { + messages.splice(0, 10); + } + + messages.push(data); + + io.emit('onmessage', data); + + }); + + + client.on('disconnect', function () { + + var name = names[client.id]; + + + delete names[client.id]; + + var index = users.indexOf(name); + + if (index != -1) { + delete users[index]; + } + + io.emit('users', users); + + }); + + +}); \ No newline at end of file diff --git a/example/style.css b/example/style.css index e10dca2..c8919cd 100644 --- a/example/style.css +++ b/example/style.css @@ -55,6 +55,29 @@ body { height: 240px; margin: 0; overflow-y: scroll; + padding-top: 5px; +} + +.chat .messages ul li .name { + font-size: 12px; + font-weight: bold; + margin-bottom: 5px; +} + +.chat .messages ul li { + margin-bottom: 10px; +} + +.chat .messages ul li span { + border-radius: 5px !important; + background: #E0EDFF; + padding: 5px 12px; + font-size: 15px; +} + +.chat .messages ul li.me { + text-align: right; + margin-right: 10px; } .chat .input {