webpack dev-server代理websocket问题

 更新时间:2024年08月30日 11:11:02   作者:AlsikeMou  
这篇文章主要介绍了webpack dev-server代理websocket问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

webpack dev-server 代理 websocket

在写东西的时候遇到websocket在开发中需要代理,并且基于http,部署后利用Nginx代理并使用https的情况,想协调两种配置但不太会写。尝试之后记下来。

首先用到https之后肯定是不能在页面中直接使用url去访问各个后端的,因此务必配置proxy。

proxy

开发环境中使用proxy进行多后端转发配置,转发表尽量与nginx配置相对应,方便部署。

下为用到的配置匿名版。

proxyTable: {
      //多后端配置
      '/a': {
        //target: http://xxxxx/xxxxxx
        target: config.a_target,//如上一行写成地址即可
        //changeOrigin: true,
        pathRewrite: {
          '^/a':'/'
        }
      },
      '/b':{
        target:config.b_target,
        pathRewrite: {
          '^/b':'/'
        }
      },
      '/c':{
        target: config.c_target,
        ws:true,//支持websokcet
        changeOrigin: true,
        pathRewrite: {
          '^/c':'/'
        }
      },
      '/':{
        target: config.real_target, 
        //ws: true,//支持websocket
        changeOrigin: true,
        pathRewrite: {
        }
      },

websocket

创建websocket时与http请求不同,不能使用/c/前缀直接匹配,而是要使用带有协议与地址端口等完整的路径

代码如下:

//根据http协议判断是否为ws或wss
let proto = document.location.protocol == 'http:'? 'ws:': 'wss:';
//取地址+端口,配置80端口时port是空的,所以判断一下
let address = document.location.port? 
document.location.hostname + ':' + document.location.port:  document.location.hostname ;
//拼接请求地址
const wsuri = proto + "//" + address + "/c/"+this.robotId;
console.log(wsuri);
this.websock = new WebSocket(wsuri);

部署后可能会遇到websocket不停断开重连,此时不启用根路径的websocket即可

'/':{
        target: config.real_target, 
        //ws: true,//注释掉,不启用即可
        changeOrigin: true,
        pathRewrite: {
        }
      },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue通过provide inject实现组件通信

    Vue通过provide inject实现组件通信

    这篇文章主要介绍了Vue通过provide inject实现组件通信,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • 浅谈Vue的响应式原理

    浅谈Vue的响应式原理

    让我们来回顾下Vue的介绍,可以发现Vue 最显著的一个功能是响应系统。那么它的实现原理有又是如何呢?下面小编和大家来一起学习一下
    2019-05-05
  • vue实现盒子内拖动方块移动的示例代码

    vue实现盒子内拖动方块移动的示例代码

    这篇文章主要给大家介绍了如何通过vue实现盒子内拖动方块移动,文章通过代码示例讲解的非常详细,具有一定的参考价值,感兴趣的小伙伴可以参考阅读本文
    2023-08-08
  • vue实现某元素吸顶或固定位置显示(监听滚动事件)

    vue实现某元素吸顶或固定位置显示(监听滚动事件)

    这篇文章主要为大家详细介绍了vue实现某元素吸顶或固定位置显示,监听滚动事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • 使用vue3指令封装一个图片预览功能

    使用vue3指令封装一个图片预览功能

    这篇文章主要为大家详细介绍了如何使用 vue3 指令封装一个后台管理系统图片预览功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • Vue3实现高性能虚拟列表的两种方法

    Vue3实现高性能虚拟列表的两种方法

    在前端开发中,大数据量列表渲染 一直是性能挑战,假设我们有一个 API 返回 1 万条数据,如果直接渲染到页面,必然会导致严重卡顿甚至浏览器崩溃,解决方案就是虚拟列表,所以本文给大家介绍了本文两种实现,并给出适用场景,需要的朋友可以参考下
    2025-08-08
  • 使用WebSocket+SpringBoot+Vue搭建简易网页聊天室的实现代码

    使用WebSocket+SpringBoot+Vue搭建简易网页聊天室的实现代码

    这篇文章主要介绍了使用WebSocket+SpringBoot+Vue搭建简易网页聊天室的实现,具体的步骤如下,需要的朋友可以参考下
    2023-03-03
  • Vue项目中引入ESLint校验代码避免代码错误

    Vue项目中引入ESLint校验代码避免代码错误

    这篇文章主要为大家介绍了Vue项目中引入ESLint插件校验代码避免代码错误的使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue2.0 如何在hash模式下实现微信分享

    vue2.0 如何在hash模式下实现微信分享

    这篇文章主要介绍了vue2.0 如何在hash模式下实现微信分享,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue实现搜索结果高亮显示关键字

    Vue实现搜索结果高亮显示关键字

    这篇文章主要为大家详细介绍了Vue实现搜索结果高亮显示关键字,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05

最新评论