Nuxt/examples/with-sockets/pages/index.vue

156 lines
2.5 KiB
Vue
Raw Normal View History

2017-01-18 16:25:06 +00:00
<template>
<div>
<ul class="pages">
<li class="chat page">
<div class="chatArea">
<ul ref="messages" class="messages">
<li v-for="(message, index) in messages" :key="index" class="message">
2017-11-26 13:40:57 +00:00
<i :title="message.date">{{ message.date.split('T')[1].slice(0, -2) }}</i>: {{ message.text }}
</li>
2017-01-18 16:25:06 +00:00
</ul>
</div>
<input v-model="message" class="inputMessage" type="text" placeholder="Type here..." @keyup.enter="sendMessage" >
2017-01-18 16:25:06 +00:00
</li>
</ul>
</div>
</template>
<script>
2017-07-10 07:03:18 +00:00
import socket from '~/plugins/socket.io.js'
2017-01-18 16:25:06 +00:00
export default {
2017-10-31 13:43:55 +00:00
asyncData(context, callback) {
2017-01-18 16:25:06 +00:00
socket.emit('last-messages', function (messages) {
callback(null, {
messages,
message: ''
})
})
},
2017-01-18 17:04:41 +00:00
watch: {
'messages': 'scrollToBottom'
},
2017-10-31 13:43:55 +00:00
beforeMount() {
2017-01-18 16:25:06 +00:00
socket.on('new-message', (message) => {
this.messages.push(message)
})
},
2017-10-31 13:43:55 +00:00
mounted() {
2017-01-18 17:04:41 +00:00
this.scrollToBottom()
},
2017-01-18 16:25:06 +00:00
methods: {
2017-10-31 13:43:55 +00:00
sendMessage() {
2017-01-18 16:25:06 +00:00
if (!this.message.trim()) return
let message = {
date: new Date().toJSON(),
text: this.message.trim()
}
this.messages.push(message)
this.message = ''
socket.emit('send-message', message)
2017-01-18 17:04:41 +00:00
},
2017-10-31 13:43:55 +00:00
scrollToBottom() {
2017-01-18 17:04:41 +00:00
this.$nextTick(() => {
this.$refs.messages.scrollTop = this.$refs.messages.scrollHeight
})
2017-01-18 16:25:06 +00:00
}
},
head: {
title: 'Nuxt.js with Socket.io'
}
}
</script>
<style>
* {
box-sizing: border-box;
}
html {
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
html, input {
font-family:
"HelveticaNeue-Light",
"Helvetica Neue Light",
"Helvetica Neue",
Helvetica,
Arial,
"Lucida Grande",
sans-serif;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
ul {
list-style: none;
word-wrap: break-word;
}
/* Pages */
.pages {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
.page {
height: 100%;
position: absolute;
width: 100%;
}
/* Font */
.messages {
font-size: 150%;
}
.inputMessage {
font-size: 100%;
}
.log {
color: gray;
font-size: 70%;
margin: 5px;
text-align: center;
}
/* Messages */
.chatArea {
height: 100%;
padding-bottom: 60px;
}
.messages {
height: 100%;
margin: 0;
overflow-y: scroll;
padding: 10px 20px 10px 20px;
}
/* Input */
.inputMessage {
border: 10px solid #3B8070;
bottom: 0;
height: 60px;
left: 0;
outline: none;
padding-left: 10px;
position: absolute;
right: 0;
width: 100%;
}
</style>