首页 > 其他分享 >在vue3+vite3中使用socket.io-client踩坑记录

在vue3+vite3中使用socket.io-client踩坑记录

时间:2023-02-27 00:34:32浏览次数:45  
标签:socket process vue3 client io child vite

1 版本问题
服务端socket.io版本和client端一定要对应,否则会连接不上。前端封装业务逻辑之前,要去和后台首先确定下自己团队所需要采用的版本。

2 低版本socket.io-client和vite兼容问题

很高兴,你看到这一步了

如果你使用的不是最新版本的socket.io-client(目前最新是v4.5.2),很有可能使用的3.X或者2.X版本。那么就一定把这一段看完。
当你引入socket.io-client到你的项目中去,前端页面不能加载出来,报错child_proccess模块不在浏览器中引入了。

这是因为vite运行项目时,不会将node环境给整体打包进入到项目中,而低版本的socket.io-client是需要child_proccess这个环境的。但是目前的浏览器,又没有内置这个模块,所以就会造成,程序找不到这个child_proccess模块。

解决步骤
1 yarn add vite-plugin-optimizer
安装vite-plugin-optimizer 用来引入child_proccess

2 vite.config.ts中使用
import optimizer from ‘vite-plugin-optimizer’
optimizer({ child_process: () => ({ find: /^(node:)?child_process$/, code: const child_process = import.meta.glob(‘child_process’); export { child_process as default } }) })

 

 

然后就解决问题了。

3 polling连接方式
需求就是,后台需要sid就行判断传输客户端。
自己项目设置了proxy代理,所以这个时候的polling方式无法使用。

 

 设置forceJSONP用来解决这个问题,在此请求socket连接,就会携带sid。

原文:https://blog.csdn.net/qq_42761482/article/details/126719661

标签:socket,process,vue3,client,io,child,vite
From: https://www.cnblogs.com/jackal1234/p/17158310.html

相关文章

  • vue3动态组件
    markRow:标记一个对象,使其不能成为一个响应式对象。toRaw:将响应式对象(由reactive定义的响应式)转换为普通对象。shallowRef:只处理基本数据类型的响应式,不进行对象的响应式......
  • vue3异步组件(defineAsyncComponent、Suspense的使用)
    异步组件按需引入,用到的时候再加载,异步组件的引入需要用​​defineAsyncComponent​​进行注册。​​defineAsyncComponent​​工厂函数需要返回一个Promise对象,接收对象类......
  • Vue3 | 右键菜单插件推荐v-contextmenu
    v-contextmenu-githubv-contextmenu-docv-contextmenu-预览可以非常快速实现鼠标右键菜单O(∩_∩)O~......
  • vue3 通过文件名称 插槽里只显示指定名称组件
    vue3过滤插槽里的组件获取到插槽,也就是VNode,根据type的名称把不符合名称的组件过滤出去想实现类似ElementUI的select效果,在el-sleect组件中放文本div或是别的组件都不显......
  • 使用vue3重构项目的一点思考
    vue3如何做整页面复用?场景是,monorepo项目,子项目间总有可以复用的页面,比如说登录页、用户管理和权限管理等。这些页面大部分情况下都相同,但可能具有不同的用户权限分类,有......
  • 解决python 操作 hbase报错:TTransportException(type=4,message=’TSocket read 0 byt
    ```text#解决报错:hbase报错TTransportException(type=4,message=’TSocketread0bytes’)这种情况一般协议问题和服务端没开启,如果服务端是开启的,且正常的.那么考虑协......
  • client-go核心组件Informer
    Kubernetes组件在工作过程中需要大量监控并查询集群中的资源对象。以Deployment控制器为例,它需要实时关注Deployment和要控制的ReplicaSet的状态变更,实时收敛ReplicaSet的......
  • websocket报错集锦-不断更新中
    问题1:Failedtoconstruct'WebSocket':AninsecureWebSocketconnectionmaynotbeinitiatedfromapageloadedoverHTTPS.问题描述MixedContent:Thepageat......
  • 【vue3】vue3+ts+vite项目创建
    1、npminitvite@lastest 2、项目目录结构  3、npminstall(i) 安装依赖(是根据package.json中devDependencies的依赖安装的)启动命令 dev  打包命令build预......
  • Vue3 + Vite +TS 项目问题总结
    最近做的几个Vue项目基本都收尾了,总结一下在项目中遇到的问题,希望能帮助遇到同样问题的小伙伴项目情况:我做的项目都是Vue3.2(setup语法)+Vite+TS,一个H5项目,一个PC前......