diff --git a/examples/with-sockets/nuxt.config.js b/examples/with-sockets/nuxt.config.js
index 7d11af313f..7ca9c60b1f 100644
--- a/examples/with-sockets/nuxt.config.js
+++ b/examples/with-sockets/nuxt.config.js
@@ -1,5 +1,14 @@
module.exports = {
build: {
vendor: ['socket.io-client']
+ },
+ head: {
+ meta: [
+ { charset: 'utf-8' },
+ { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+ ]
+ },
+ env: {
+ HOST_URL: process.env.HOST_URL || 'http://localhost:3000'
}
}
diff --git a/examples/with-sockets/pages/index.vue b/examples/with-sockets/pages/index.vue
index 78e126b805..857c101360 100644
--- a/examples/with-sockets/pages/index.vue
+++ b/examples/with-sockets/pages/index.vue
@@ -3,7 +3,7 @@
-
-
+
- {{ message.date.split('T')[1].slice(0, -2) }}: {{ message.text }}
@@ -25,11 +25,17 @@ export default {
})
})
},
+ watch: {
+ 'messages': 'scrollToBottom'
+ },
beforeMount () {
socket.on('new-message', (message) => {
this.messages.push(message)
})
},
+ mounted () {
+ this.scrollToBottom()
+ },
methods: {
sendMessage () {
if (!this.message.trim()) return
@@ -40,6 +46,11 @@ export default {
this.messages.push(message)
this.message = ''
socket.emit('send-message', message)
+ },
+ scrollToBottom () {
+ this.$nextTick(() => {
+ this.$refs.messages.scrollTop = this.$refs.messages.scrollHeight
+ })
}
},
head: {
diff --git a/examples/with-sockets/plugins/socket.io.js b/examples/with-sockets/plugins/socket.io.js
index 216592c82c..5e553166cd 100644
--- a/examples/with-sockets/plugins/socket.io.js
+++ b/examples/with-sockets/plugins/socket.io.js
@@ -1,4 +1,4 @@
import io from 'socket.io-client'
-const socket = io('http://localhost:3000')
+const socket = io(process.env.HOST_URL)
export default socket
diff --git a/examples/with-sockets/server.js b/examples/with-sockets/server.js
index 0cbd84f0e6..1f3312b7b6 100644
--- a/examples/with-sockets/server.js
+++ b/examples/with-sockets/server.js
@@ -15,24 +15,22 @@ app.use(nuxt.render)
if (config.dev) {
nuxt.build()
.catch((error) => {
- console.error(error) // eslint-disable-line no-console
+ console.error(error) // eslint-disable-line no-console
process.exit(1)
})
}
// Listen the server
server.listen(port, '0.0.0.0')
-console.log('Server listening on localhost:' + port)
+console.log('Server listening on localhost:' + port) // eslint-disable-line no-console
// Socket.io
let messages = []
io.on('connection', (socket) => {
- console.log('New connection');
socket.on('last-messages', function (fn) {
fn(messages.slice(-50))
});
socket.on('send-message', function (message) {
- console.log('Message received', message);
messages.push(message)
socket.broadcast.emit('new-message', message)
})