Add socket.io example

examples/with-sockets/README.md

@@ -0,0 +1,3 @@
+# Nuxt.js with Socket.io
+
+> Description coming soon

examples/with-sockets/nuxt.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  build: {
+    vendor: ['socket.io-client']
+  }
+}

examples/with-sockets/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "nuxt-socketio",
+  "scripts": {
+    "dev": "nodemon -w server.js -w nuxt.config.js server.js",
+    "build": "nuxt build",
+    "start": "NODE_ENV=production node server.js"
+  },
+  "dependencies": {
+    "express": "^4.14.0",
+    "nuxt": "^0.9.5",
+    "socket.io": "^1.7.2",
+    "socket.io-client": "^1.7.2"
+  },
+  "devDependencies": {
+    "nodemon": "^1.11.0"
+  }
+}

examples/with-sockets/pages/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <ul class="pages">
+      <li class="chat page">
+        <div class="chatArea">
+          <ul class="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>
+        <input class="inputMessage" type="text" v-model="message" @keyup.enter="sendMessage" placeholder="Type here..." />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import socket from '~plugins/socket.io.js'
+
+export default {
+  data (context, callback) {
+    socket.emit('last-messages', function (messages) {
+      callback(null, {
+        messages,
+        message: ''
+      })
+    })
+  },
+  beforeMount () {
+    socket.on('new-message', (message) => {
+      this.messages.push(message)
+    })
+  },
+  methods: {
+    sendMessage () {
+      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)
+    }
+  },
+  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>

examples/with-sockets/plugins/socket.io.js

@@ -0,0 +1,4 @@
+import io from 'socket.io-client'
+const socket = io('http://localhost:3000')
+
+export default socket

examples/with-sockets/server.js

@@ -0,0 +1,39 @@
+const Nuxt = require('nuxt')
+const app = require('express')()
+const server = require('http').createServer(app)
+const io = require('socket.io')(server)
+const port = process.env.PORT || 3000
+const isProd = process.env.NODE_ENV === 'production'
+
+// We instantiate Nuxt.js with the options
+let config = require('./nuxt.config.js')
+config.dev = !isProd
+const nuxt = new Nuxt(config)
+app.use(nuxt.render)
+
+// Build only in dev mode
+if (config.dev) {
+  nuxt.build()
+  .catch((error) => {
+    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)
+
+// 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)
+  })
+});