当前位置:   article > 正文

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

vite-plugin-optimizer

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。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/814757
推荐阅读
相关标签
  

闽ICP备14008679号