From fcf4b1bf390418ffea151a13ce831621c7cd6125 Mon Sep 17 00:00:00 2001 From: Metin Date: Mon, 9 May 2016 19:02:10 +0300 Subject: [PATCH] example --- example/index.html | 61 ++++++++++++++++++++++++++++++++++++++++++++ example/script.js | 49 ++++++++++++++++++++++++++++++++++++ example/style.css | 63 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 173 insertions(+) create mode 100644 example/index.html create mode 100644 example/script.js create mode 100644 example/style.css diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..0e9a82c --- /dev/null +++ b/example/index.html @@ -0,0 +1,61 @@ + + + + + + + + Vue-Socket.io + + + + + + + +
+ +
+
+ +
+ +
+ +
+
+

Users

+
    +
  • {{user}}
    • +
+
+
+ +
+
    +
  • {{m.name}} - {{m.message}}
    • +
+
+ + +
+
+
+ + + + +
+
+
+
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/example/script.js b/example/script.js new file mode 100644 index 0000000..0bf0dc7 --- /dev/null +++ b/example/script.js @@ -0,0 +1,49 @@ +Vue.use(VueSocketio, 'http://metinseylan.com:1923'); + +new Vue({ + el: '.container', + data: { + join: false, + name: null, + users: null, + message: null, + messages: {} + }, + methods: { + joinChat: function (name) { + if (name) { + this.$socket.emit('join', name); + } + }, + send: function (message) { + if (message) { + this.$socket.emit('send', message); + this.$set('message', null); + } + } + }, + watch: { + messages: function () { + setTimeout(function () { + $('.messages ul').scrollTop(999999999); + }, 100) + } + }, + sockets: { + users: function (users) { + this.$set('users', users); + }, + joined: function () { + this.$set('join', true) + }, + messages: function (data) { + this.$set('messages', data); + }, + onmessage: function (data) { + this.messages.push(data); + }, + adduser: function (user) { + this.users.push(user); + } + } +}); \ No newline at end of file diff --git a/example/style.css b/example/style.css new file mode 100644 index 0000000..e10dca2 --- /dev/null +++ b/example/style.css @@ -0,0 +1,63 @@ +body { + color: #373a3c; + background-color: #f9f9f9; +} + +* { + border-radius: 0 !important; +} + +.container { + max-width: 700px; + margin-top: 5%; + box-shadow: 0 2px 3px rgba(0, 0, 0, .05); + background-color: #fff; + border: 1px solid #eee; + padding: 15px; +} + +.users { + border-right: 1px solid #eee; + float: left; + width: 140px; +} + +.users ul { + height: 250px; + overflow-y: scroll; + margin: 0; +} + +.users h4 { + margin: 0; + border-bottom: 1px solid #eee; + padding-bottom: 3px; + margin-bottom: 5px; +} + +::-webkit-scrollbar { + width: 5px; +} + +::-webkit-scrollbar-thumb { + background: #666; +} + +.chat { + width: 528px; + float: left; + padding-left: 15px; + position: relative; + height: 278px; +} + +.chat .messages ul { + height: 240px; + margin: 0; + overflow-y: scroll; +} + +.chat .input { + position: absolute; + bottom: 0; +} \ No newline at end of file