Update example

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'
   }
 }

examples/with-sockets/pages/index.vue

@@ -3,7 +3,7 @@
     <ul class="pages">
       <li class="chat page">
         <div class="chatArea">
-          <ul class="messages">
+          <ul class="messages" ref="messages">
             <li class="message" v-for="message in messages"><i :title="message.date">{{ message.date.split('T')[1].slice(0, -2) }}</i>: {{ message.text }}</li>
           </ul>
         </div>
@@ -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: {

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

examples/with-sockets/server.js

@@ -22,17 +22,15 @@ if (config.dev) {
 
 // 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)
   })