关于实时通讯之VueSocketIO（客户端）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情
在项目开发过程中，可能需要涉及到浏览器和服务器端的实时通讯，如聊天应用软件开发，监控硬件设备的实时状态呀，除了最基本的轮询，可以Socket.IO库建立长连接来实现。在客户端vue项目中，则可以使用VueSocketIO，VueSocketIO是通过对Socket.IO客户端(socket.io-client)进行二次封装，可以更为方便的对事件进行监听。

简单了解SocketIO

经常提到的WebSocket和SocketIO有什么区别呢？简单来说，WebSocket是一种通讯协议，Socket.IO是使用WebSocket的库。不仅是使用到WebSocket协议，还有轮询机制和其他的实时通讯方式等提供接口，通过TCP连接，可用于在客户端和Web服务器(Node.js)之间进行实时和全双工通信。同时，SocketIO对浏览器兼容较好，最低达IE5.5

简单使用VueSocketIO

交代项目的开发背景：vue2.0 +vue-cli3

首先安装VueSocketIO库

npm install --save vue-socket.io

开发过程中注意版本问题。

接下来在main.js中全局引入

//引入socket.io
import VueSocketIO from 'vue-socket.io'
​
Vue.use(new VueSocketIO({
    debug: true,  //是否开启控制台debug，可以看到socket连接和事件监听的信息
    //connection:process.env.VUE_SCOKET_API,
    //connection:'http://172.16.100.160:2021',
    connection: ':2021'//连接地址
}))

使用

• 通过$socket.emit('event', '消息')的emit方法，可以向服务器端发送消息，'event'为后台定义的字段，需与后台协定好。
• 通过vuesocketio自带的connect，disconnect和reconnect监听事件，可以查看socket是否渲染成功，检测是否断开和是否重连事件。
• 如下demo的message即为后台定义的事件，需要和后台协定好，在接收到该事件后，进行业务逻辑代码编写。

<script>
export default {
    mounted(){
        //当socket连接是静态写死的，则只需要通过this.$socket.emit('connect', 1) 向服务器直接发送连接即可。
        //当socket连接地址是动态的，是需要通过后台获取的话，存在异步请求时间差，需采用定时器的方法来执行connect
        var timer = window.setInterval(() => {
            if (this.$socket) {
                this.$socket.emit('connect', 1) //向服务器端发送连接
                window.clearInterval(timer)
                return;
            }
        }, 500)
    },
    sockets: {
            connect(data) {
                console.log('连接上啦~~~')
            },
             disconnect(){
                 console.log("发现连接断开~~~");
             }
            reconnect(){
                console.log('重新连接~~~')
                this.$socket.emit('connect', 1)
            },
            //客户端收到服务器端传输的data信息
            message(data){
              //编写业务代码
            }
        },
}
</script>

多说一点

引入vue-socket.io后发现低版本ie浏览器会出下如下报错：
chromium: [INFO:CONSOLE(23)] “Uncaught SyntaxError: Unexpected token =>”,
于是根据报错定位到源码指定位置发现，其使用了es6语法，所以低版本浏览器不兼容导致出现以上报错，使得页面无法访问。

解决办法:
babel 把它翻译成可兼容低版本浏览器的版本。
首先，在vue.config.js 里添加配置

transpileDependencies: ['vue-socket.io']

接着在 babel.config.js 配置 useBuiltIns，这里要注意配置是双层嵌套 [[xxxxx]]

module.exports = {
    presets: [
      [
        '@vue/app',
        {
          useBuiltIns: 'entry'
        }
      ]
    ]
  }