websocket是一个双向通行工具,解决了原来的http单向通信的弊端,可以让服务器主动向客户端推送数据
// 安装客户端的socket
npm i socket.io-client --save
/*
安装Vue配置socket的工具
注意:需要安装3.0.7版本的包,最新的包会有问题
*/
npm i vue-socket.io@3.0.7 --save
// 在main.js中引入设置
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(new VueSocketIO({
// 生产环境需要切换成false
debug: true,
// 连接的后端地址
connection: SocketIO('http://localhost:3000?token=ab'),
// 需要使用vuex的话,需要配置一下
vuex: {
store,
// mutation中定义方法的前缀
mutationPrefix: 'SOCKET_',
// actions中定义方法的前缀
actionPrefix: 'SOCKET_'
}
}))
组件中使用
<script>
export default {
mounted () {
// 像后端触发一个事件函数,像后端传递数据
this.$socket.emit('message', { name: '小美' })
}
/*
接收后端的事件函数传递的参数,在sockets对象中定义事件函数,
包括一些内置的事件方法
*/
sockets: {
// 内置的事件方法
connect () {
console.log('和服务器连接成功调用')
// 是否已经连接到服务器
console.log(this.$socket.connected)
// 是否和服务器断开连接
console.log(this.$socket.disconnected)
// 套接字会话的唯一标识符,在reconnect事件后更
console.log(this.$socket.id)
},
disconnect () {
console.log('和服务器断开连接时调用')
// 手动重新连接
this.$socket.open()
// 断开连接时重新连接,和open一样
this.$socket.connect()
},
reconnecting () {
console.log('尝试重新连接时触发')
},
reconnect_error () {
console.log('重新连接错误时触发')
},
// 服务器端触发的自定义事件
vueMessage (msg) {
console.log(msg)
// 像服务器端发送数据
this.$socket.send('来吧面对疾风吧')
}
}
}
</script>