在vue中使用socket.io

前言:前端与后端交互时,一般都使用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地址,端口号根据实际后台端口写

2019.09.18更新,今天看到官方文档引入方式有变,用上面的方式引入报错的可以试试下面这种

Vue.use(new VueSocketIO({

      debug: true,

      connection: 'socket地址:端口号',

      vuex: {       // 不需要用到vuex这个可以不加

            store,

            actionPrefix: 'SOCKET_',

            mutationPrefix: 'SOCKET_'

      }

}))

socket可以与vuex结合使用

import store from'./yourstore'

Vue.use(VueSocketio,socketio('http://socketserver.com:1923'), store);

四、在组件中使用

注意:下面的 connect 方法和 message 方法是我对接的后台写的监听事件名称,实际使用时每个后台定义的名称都不会一样,这个要事先和你的后台确认好。

你可能感兴趣的:(在vue中使用socket.io)