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

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