1.下载安装
npm install vue-socket.io --save
2.在main.js中引用
import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ debug: true, // connection: SocketIO ('http://127.0.0.1:5000',{'timeout': 300000,'reconnectionDelayMax':1000,'reconnectionDelay':500}), connection: 'http://localhost:5000', options: { 'timeout': 300000,'reconnectionDelayMax':1000,'reconnectionDelay':500} })) new Vue({ el: '#app', router, store, gsap, render: h => h(App) })
注:connection 连接方式很重要,我第一种写的
connection: SocketIO ('http://127.0.0.1:5000',{'timeout': 300000,'reconnectionDelayMax':1000,'reconnectionDelay':500}),是不可行的
3.在mounted中执行连接
mounted() { this.$socket.emit('startRead');//发布消息 this.sockets.subscribe('card message', (msg) => {//订阅消息,返回的是服务端发送的消息 var data = base.decode(msg); var data=JSON.parse(data); console.log("连接成功") this.studentInfo=data console.log("retcode:" + data.retcode + "retmsg:" + data.retmsg + " errmsg:" + data.errmsg + "卡类型:"+data.CardType+ " 姓名:" + data.name +" 英文姓名:"+data.EngName+" 性别:" + data.sex + " 民族:" + data.nation + " 出生:" + data.born + " 住址:" + data.address +" 身份证号:" + data.cardno + " 有效期开始:" + data.userlifeb + " 有效期结束:" + data.userlifee + " 发证机关:" + data.police +" 指纹信息:" + data.FpDescribe+" 指纹特征值base64:"+data.FpData +"通行证号码:" + data.PassID +"签发次数:" + data.IssuesTimes ) }) },