在vue中使⽤socket.io
前⾔：前端与后端交互时，⼀般都使⽤ajax，但ajax⽆法实时获取更新的数据，采⽤轮询⽅式开销会⾮常⼤，且后端也⽆法主动推送数据给前端。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 SocketIO from "socket.io-client"
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
debug: true,
connection: SocketIO ('ws://socket地址：端⼝号'),
vuex: {      // 不需要⽤到vuex这个可以不加
store,
actionPrefix: 'SOCKET_',
mutationPrefix: 'SOCKET_'
}
websocket和socket
}))
四、在组件中使⽤
注意：下⾯的 connect ⽅法和 message ⽅法是我对接的后台写的监听事件名称，实际使⽤时每个后台定义的名称都不会⼀样，这个要事先和你的后台确认好。
<script>
export default {
data() {
id: '',
},
mounted() {
this.$it('login', loginId);      //触发socket连接
},
sockets: {
connect() {
this.id = this.$socket.id;
this.$it('login', loginId);      //监听connect事件
};
message(data) {                                //监听message事件，⽅法是后台定义和提供的
console.log(data);
}
},
methods: {
clickButton: function(val){                      //添加按钮事件向服务端发送数据
this.$it('emit_method', val);
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。