学习笔记之vue项目中使用socket.io

服务端代码

使用express+socket.io

var app = require('express')()
var http = require('http').createServer(app)
var io = require('socket.io')(http)

io.on('connection',function(socket){
  console.log('a user connected')
  //接收客户端传来的数据，名为msg
  socket.on('msg',(data,fn)=>{
    console.log('msg：'+data)
  })
  let i = 0
  //每隔1秒向客户端发数据，模拟服务端主动推送数据
  setInterval(() => {
    i++
    socket.emit('res','服务端主动推送'+i)
  }, 1000);
})

http.listen(8001,()=>{
  console.log('服务器启动成功！')
})

客户端代码

vue-socket.io的老版本和新版本都试过，使用方法有所不同，踩了不少坑，

老版本（2.1.1）

安装两个包

npm install vue-socket.io socket.io-client

然后引用

Vue.use(VueSocketio,socketio('ws://localhost:8001'))
new Vue({
  router,
  store,
  sockets: {
    connect: function () {
      console.log('socket connected');
    }
  },
  render: h => h(App)
}).$mount('#app')

然后vue模板使用sockets，注意这里是与data，methods等同级

<template>
	<div>
		<button @click="close">关闭连接</button>	
		<button @click="connect">打开连接</button>	
	</div>
</template>
<script>
export default {
	data() {
		return {}
	},
	mounted() {
	//向服务端发送数据，名为msg
			this.$socket.emit('msg', 'hello,我是客户端')
	},
	methods: {
		close() {
			this.$socket.close()
			console.log('连接已关闭')
		},
		connect(){
			this.$socket.connect()
		}
	},
	sockets: {
		res(value) {
			console.log(value)
		},
	},
}
</script>

新版本（3.0.7）

目前最新的是3.0.9，但该版本存在bug(sockets中的connect函数无法执行),因此建议使用3.0.7，只需安装
vue-socket.io即可。

Vue.use(new VueSocketio({
	debug:true,  //是否开启debug模式
	connection:'ws://localhost:8001',
	options:{
		autoConnect:false  //设置是否自动连接
	}
}))

踩坑记录

1. 新老版本Vue.use内的写法不一样，新版本不能用

   Vue.use(VueSocketio,'url')
   

   而要new一个Vue-socket.io对象，否则会报错：
   TypeError: Cannot call a class as a function
2. 服务端使用socket.io，那么客户端也要使用socket.io，不能使用原生websocket，否则报错。