Add socket.io example

This commit is contained in:
Sébastien Chopin 2017-01-18 17:25:06 +01:00
parent 9ee7ef2ac8
commit 8f4fbc1bdb
6 changed files with 210 additions and 0 deletions

View File

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

View File

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

View File

@ -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"
}
}

View File

@ -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>

View File

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

View File

@ -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)
})
});