.
├── client
│ ├── package.json (client_package.json)
│ ├── public
│ │ └── index.html (client_public_index.html)
│ ├── src
│ │ ├── components
│ │ │ └── app.vue (client_src_components_app.vue)
│ │ ├── main.js (client_src_main.js)
│ │ └── stores
│ │ └── main.js (client_src_stores_main.js)
│ └── vue.config.js (client_vue.config.js)
└── server
├── main.js (server_main.js)
└── package.json (server_package.json)
Last active
September 2, 2019 05:28
-
-
Save tomasevich/70f36fa6a63ea2281999e300654ee7eb to your computer and use it in GitHub Desktop.
Vue + Vuex + Socket
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "client", | |
| "version": "0.1.0", | |
| "scripts": { | |
| "serve": "NODE_ENV=development vue-cli-service serve", | |
| "build": "NODE_ENV=production vue-cli-service build" | |
| }, | |
| "dependencies": { | |
| "core-js": "^2.6.9", | |
| "socket.io-client": "^2.2.0", | |
| "vue": "^2.6.10", | |
| "vuex": "^3.1.1" | |
| }, | |
| "devDependencies": { | |
| "@vue/cli-service": "^3.8.0", | |
| "vue-template-compiler": "^2.6.10" | |
| }, | |
| "postcss": { | |
| "plugins": { | |
| "autoprefixer": {} | |
| } | |
| }, | |
| "browserslist": [ | |
| "> 1%", | |
| "last 2 versions" | |
| ], | |
| "babel": { | |
| "presets": [ | |
| "@vue/app" | |
| ] | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0" /> | |
| <title>Vue + Vuex + Socket</title> | |
| </head> | |
| <body> | |
| <noscript id="root">Please enable JavaScript to continue...</noscript> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div> | |
| <template v-if="server_status"> | |
| <p>Online</p> | |
| </template> | |
| <template v-else> | |
| <p>Offline</p> | |
| </template> | |
| <pre>{{ server_status }}</pre> | |
| </div> | |
| </template> | |
| <script> | |
| export default { | |
| computed: { | |
| server_status() { | |
| console.log('component: `server_status` is activated') | |
| return this.$store.state.server_status | |
| } | |
| }, | |
| created() { | |
| console.log('component: is `created`') | |
| this.$store.dispatch('server_status') | |
| } | |
| } | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Vue from 'vue' | |
| import { store } from '@/stores/main.js' | |
| import app from '@/components/app.vue' | |
| Vue.config.productionTip = false | |
| new Vue({ | |
| store, | |
| render: h => h(app) | |
| }).$mount('#root') |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Vue from 'vue' | |
| import Vuex from 'vuex' | |
| import SocketIO from 'socket.io-client' | |
| const io = SocketIO() | |
| Vue.use(Vuex) | |
| export const schema = { | |
| state: { | |
| server_status: false | |
| }, | |
| mutations:{ | |
| server_status(state, payload) { | |
| console.log('vuex: mutation is activated') | |
| state.server_status = payload | |
| } | |
| }, | |
| actions: { | |
| server_status() { | |
| console.log('vuex: action is activated') | |
| io.emit('server_status') | |
| } | |
| } | |
| } | |
| export const store = new Vuex.Store(schema) | |
| io.on('server_status', response => { | |
| console.log('vuex: socket listen `server_status`') | |
| store.commit('server_status', response) | |
| }) | |
| io.on('disconnect', reason => { | |
| console.log('vuex: socket listen `disconnect`, reason: ' + reason) | |
| store.commit('server_status', false) | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| lintOnSave: false, | |
| publicPath: process.env.NODE_ENV === 'production' ? './' : '/', | |
| devServer: { | |
| host: 'localhost', | |
| port: 9090, | |
| proxy: 'http://localhost:8080/' | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const server = require('http').createServer() | |
| const io = require('socket.io')(server) | |
| io.on('connection', socket => { | |
| console.log(`socket ${socket.id} connected`) | |
| socket.on('server_status', () => { | |
| console.log('send `server_status` true') | |
| socket.emit('server_status', true) | |
| setTimeout(() => { | |
| console.log('send `server_status` false') | |
| socket.emit('server_status', false) | |
| }, 3000) | |
| setTimeout(() => { | |
| console.log('disconnect') | |
| socket.disconnect(true) | |
| }, 5000) | |
| }) | |
| }) | |
| server.listen(8080) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "server", | |
| "version": "0.1.0", | |
| "scripts": { | |
| "serve": "NODE_ENV=development nodemon main.js", | |
| "start": "NODE_ENV=production node main.js" | |
| }, | |
| "dependencies": { | |
| "socket.io": "^2.2.0" | |
| }, | |
| "devDependencies": { | |
| "nodemon": "^1.19.1" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment