mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
Add socket.io example
This commit is contained in:
parent
9ee7ef2ac8
commit
8f4fbc1bdb
3
examples/with-sockets/README.md
Normal file
3
examples/with-sockets/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# Nuxt.js with Socket.io
|
||||
|
||||
> Description coming soon
|
5
examples/with-sockets/nuxt.config.js
Normal file
5
examples/with-sockets/nuxt.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
build: {
|
||||
vendor: ['socket.io-client']
|
||||
}
|
||||
}
|
17
examples/with-sockets/package.json
Normal file
17
examples/with-sockets/package.json
Normal 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"
|
||||
}
|
||||
}
|
142
examples/with-sockets/pages/index.vue
Normal file
142
examples/with-sockets/pages/index.vue
Normal 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>
|
4
examples/with-sockets/plugins/socket.io.js
Normal file
4
examples/with-sockets/plugins/socket.io.js
Normal file
@ -0,0 +1,4 @@
|
||||
import io from 'socket.io-client'
|
||||
const socket = io('http://localhost:3000')
|
||||
|
||||
export default socket
|
39
examples/with-sockets/server.js
Normal file
39
examples/with-sockets/server.js
Normal 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)
|
||||
})
|
||||
});
|
Loading…
Reference in New Issue
Block a user