vue项目，本地环境访问线上环境的websokcet的配置问题

工作过程的随心小记

vue项目中，遇到的前端需要在本地代码中连接线上环境（假如线上环境是172.16.131.20）的websocket，且线上环境是https环境的，具体要如何操作呢？

其实发送websocket也是发送请求，本地连接线上接口联调，vue项目就是利用的webpack的proxy代理来实现的，同理，ws也是一样的，可以通过配置代理来实现。

实现代码

 taskProgress () {
 	// window.location.host 也可以直接写自己电脑的地址
 	// wsPath 全路径比如是10.25.35.5:8080/bendi/api-icsmp-platform-center/socket/taskSocket
 	
      let wsPath = `ws://${window.location.host}/bendi/api-icsmp-platform-center/socket/taskSocket`
      if (typeof WebSocket === 'undefined') {
        this.info(this.$t('lang.error'))
      } else {
        // 实例化socket
        this.socket = new WebSocket(wsPath)
        this.socket.onmessage = this.getMessage
      }
    }

vue.config.js里面的配置

proxy: {
    // 拦截websocket的转发
    '/bendi/api-icsmp-platform-center': {
      target: `https://172.16.131.20/api-icsmp-platform-center`, // 此处就是https,不是wss，因为ws属性设置为true,会自动将https转成wss协议
      ws: true,
      changeOrigin: true,
      pathRewrite: {
        '^/bendi/api-icsmp-platform-center': ``
      }
    },
    // 业务功能接口的代理转发
    '/api-icsmp-platform-center': {
      target: `http://172.16.131.20:10900/api-icsmp-platform-center`,
      ws: true,
      changeOrigin: true,
      pathRewrite: {
        '^/api-icsmp-platform-center': ``
      }
    }
 }

说明

1、/bendi/是没有实际意义的路径，仅仅是为了能够精准匹配到需要拦截的地址

2、从本地10.25.35.5:8080想访问线上172.16.131.20，发送的ws地址是：ws://10.25.35.5:8080/bendi/api-icsmp-platform-center/socket/taskSocket，

在f12中看到的request Url也是这个地址，然后webpack会通过代理拦击，命中了/bendi/api-icsmp-platform-center 这个对应的代理配置，将请求真正转发到 https://172.16.131.20，真正的请求地址是：https://172.16.131.20/api-icsmp-platform-center/socket/taskSocket，从而达到本地环境访问线上的环境ws的目的。

3、注意到，上面代码proxy中两个代理配置很像，为了保证ws的拦截可以匹配到，所以可以设置的精准特殊一些，区分于业务接口的拦截。

4、如果线上环境提供了可以直连的ws地址，前端也是可以直连的（不通过代理），一般直连的地址是带有端口的，整个合理的地址应该是 ws://172.16.131.20:22900/api-icsmp-platform-center/socket/taskSocket，这个就是单独ws服务的地址

5、本地直连是不需要经过nginx的，本地也不可以直接访问wss://xxx/xxx/dd这样的地址，是访问不到的，会跨域 所以要通过代理实现。通过代理访问线上https环境时，是需要通过NGINX的，服务上的nginx是需要配置正确的。

6、 ws的连接，成功状态就是101，一直保持连接状态时，f12中这个请求的Time是pending，如果地址不对，status直接finished。

7、 websocket前后端连接时，出现可以连接成功，但是一发送消息就立马断连，走onclose()的情况，一般可以考虑是前端send的信息格式不正确，导致后端服务接收报错，然后后端服务主动断开了ws的连接。