前言：前端与后端交互时，一般都使用ajax，但ajax无法实时获取更新的数据，采用轮询方式开销会非常大,且后端也无法主动推送数据给前端。vue提供了socket.io来解决这个问题，一旦数据进行更新，服务端可主动将数据推送至客户端，常用于消息类推送的场景中。
socket.io的github地址：https://github.com/MetinSeylan/Vue-Socket.io
一、关于socket通信的简单说明
Socket是在应用层和传输层之间的一个抽象层，它把TCP/IP层复杂的操作抽象为几个简单的接口，供应用层调用实现进程在网络中的通信（来源百科）。它是一种全双工（服务端与客户端可同时收发消息）通信，当有数据更新时服务端可以主动的将消息推送到客户端。
Socket通信的运行流程如下：
1、服务端启动Socket监听端口，监听是否有客户端连接进来，即Watch Socket；
2、客户端通过http协议发送请求报文，服务端响应请求后会将协议升级为WebSocket，并创建一个新的Socket对象，客户端Socket随即与服务端Socket进行连接和通信，且客户端不再与Watch Socket通信；
3、Watch Socket继续监听是否有其它客户端连接。
二、安装依赖
npm install vue-socket.io --save
npm install socket.io-client --save
三、在全局中引入组件
在main.js中引入
import VueSocketio from 'vue-socket.io';
import socketio from 'socket.io-client';
Vue.use(VueSocketio, socketio('xxx:80')); //xxx填后台给的socket地址，端口号根据实际后台端口写
socket可以与vuex结合使用
import store from'./yourstore'
Vue.use(VueSocketio,socketio('http://socketserver.com:1923'), store);
四、在组件中使用
<script>
export default {
data() {
id: '',
},
mounted() {
this.$socket.emit('connect', connectMsg); //触发connect事件
},
sockets: {
connect() {
this.id = this.$socket.id;
this.$socket.emit('connect', emitData); //监听connect事件
};
message(data) { //监听message事件，方法是后台定义和提供的
console.log(data);
}
},
methods: {
clickButton: function(val){ //添加按钮事件向服务端发送数据
this.$socket.emit('emit_method', val);
}
}
</script>
网友评论