前言:前端与后端交互时,一般都采用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

三,在全局中引用组件

//demo.vue

后台搭建的node服务器