"vue-socket.io": "^3.0.7"

 

最新版本 3.0.9 不好使

nodejs

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/');
const fun = () => {
io.on('connection', function(socket) {
for (let i = 0; i < 100; i++) {
setTimeout(() => {
socket.emit('progress', i);    //io是广播  socket是私发  io.emit('progress', i);
console.log("当前进度为", i + 1);
}, 300 * i)
}
//接收数据
socket.on('login', function(obj) {
// 发送数据
socket.emit('relogin', {
msg: `你好`,
code: 200
});
});
});
http.listen(8888, function() {
console.log('listening on *:8888');
});
}
module.exports = {
fun
};

**********************************************************

vue

main.js

import Vue from 'vue'; 
import socket from 'socket.io-client'
import VueSocketio from 'vue-socket.io'
Vue.use(new VueSocketio({
debug: true,
connection: socket('http://localhost:8888')
}))

import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app')

 

 

.vue

<template>
<div class="process" style="background-color: #f00;" @click="aaaaa">
<progress max="100" :value="progressValue"></progress>
</div>
</template>
<script>
export default {
data() {
return {
progressValue: 0, // 进度值
}
},
sockets: {
connect(){
console.log('socket connected')
this.aaaaa()
},
relogin(data) {
console.log(data)
},
progress(res) {
this.progressValue = res;
}
},
methods: {
aaaaa() {
this.$socket.emit('login');
}
}
}
</script>
<style scoped>
.process {
text-align: center;
}
</style>

 

 

 不要使用hotnode，否则内存溢出