Svelte/Sveltekit 和 socket.io-客户端在开发中不工作(在预览中工作)
Svelte/Sveltekit and socket.io-client not working in dev (works in preview)
我正在尝试让 socket.io-client
在一个精巧的前端应用程序中工作,以便与已经使用 socket.io 的现有 API 服务器通信。在经历了一些挑战之后,我设法完成了这项工作,但我只能让它在 sveltekit 的预览中使用,而不是在开发模式下使用。想知道对这些有一定了解的人是否可以解释原因或建议我需要做什么才能让它在开发中连接?
- 苗条 3.34.0
- sveltekit next-169
- socket.io(-客户端) 4.2.0
基本代码如下,目前在一个文件$lib/db.js
中,我定义了一些商店,这些商店被拉入布局以供一般使用..
import { io } from "socket.io-client";
import { browser } from '$app/env';
const initSocket = async () => {
console.log('creating socket...');
let socket = io('http://192.168.1.5:4000', { 'connect timeout': 5000 });
socket.on("connect", () => {
// always works in preview...
console.log('socket created with ID:', socket.id);
});
socket.on("connect_error", (error) => {
// permanently fired in dev...
console.error('Failed to connect', error);
});
socket.on("error", (error) => {
console.error('Error on socket', error);
});
socket.on("foo", data => {
// works in preview when server emits a message of type 'foo'..
console.log("FOO:", data);
});
};
if (browser) {
initSocket();
}
// stores setup and exports omitted..
with svelte-kit preview --host
我看到带有套接字 ID 的套接字创建日志消息,在记录相同 ID 的 api 服务器上也可以看到相同的消息。套接字正常工作并按预期接收数据。
with svelte-kit dev --host
但是,来自 socket.on("connect")..
的日志消息永远不会输出,我只是在浏览器控制台中看到来自 socket.on("connect_error")..
调用的无穷无尽的错误消息..
Failed to connect Error: xhr poll error
at XHR.onError (transport.js:31)
at Request.<anonymous> (polling-xhr.js:93)
at Request.Emitter.emit (index.js:145)
at Request.onError (polling-xhr.js:242)
at polling-xhr.js:205
重要的是,根本没有尝试实际联系服务器。服务器从未收到连接请求,并且 wireshark/tcpdump 确认没有数据包被传输到 192.168.1.5:4000
显然,每次代码更改时都必须重新构建和重新运行 预览模式,这让开发变得非常痛苦,有没有人知道这里的问题是什么或关于如何进行的建议?
我遇到过类似的问题,我通过将此代码添加到 svelte.config.js
:
来解决它
const config = {
kit: {
vite: {
resolve: {
alias: {
"xmlhttprequest-ssl": "./node_modules/engine.io-client/lib/xmlhttprequest.js",
},
},
},
},
};
解决方案由this comment从vite问题中提供。
我正在尝试让 socket.io-client
在一个精巧的前端应用程序中工作,以便与已经使用 socket.io 的现有 API 服务器通信。在经历了一些挑战之后,我设法完成了这项工作,但我只能让它在 sveltekit 的预览中使用,而不是在开发模式下使用。想知道对这些有一定了解的人是否可以解释原因或建议我需要做什么才能让它在开发中连接?
- 苗条 3.34.0
- sveltekit next-169
- socket.io(-客户端) 4.2.0
基本代码如下,目前在一个文件$lib/db.js
中,我定义了一些商店,这些商店被拉入布局以供一般使用..
import { io } from "socket.io-client";
import { browser } from '$app/env';
const initSocket = async () => {
console.log('creating socket...');
let socket = io('http://192.168.1.5:4000', { 'connect timeout': 5000 });
socket.on("connect", () => {
// always works in preview...
console.log('socket created with ID:', socket.id);
});
socket.on("connect_error", (error) => {
// permanently fired in dev...
console.error('Failed to connect', error);
});
socket.on("error", (error) => {
console.error('Error on socket', error);
});
socket.on("foo", data => {
// works in preview when server emits a message of type 'foo'..
console.log("FOO:", data);
});
};
if (browser) {
initSocket();
}
// stores setup and exports omitted..
with svelte-kit preview --host
我看到带有套接字 ID 的套接字创建日志消息,在记录相同 ID 的 api 服务器上也可以看到相同的消息。套接字正常工作并按预期接收数据。
with svelte-kit dev --host
但是,来自 socket.on("connect")..
的日志消息永远不会输出,我只是在浏览器控制台中看到来自 socket.on("connect_error")..
调用的无穷无尽的错误消息..
Failed to connect Error: xhr poll error
at XHR.onError (transport.js:31)
at Request.<anonymous> (polling-xhr.js:93)
at Request.Emitter.emit (index.js:145)
at Request.onError (polling-xhr.js:242)
at polling-xhr.js:205
重要的是,根本没有尝试实际联系服务器。服务器从未收到连接请求,并且 wireshark/tcpdump 确认没有数据包被传输到 192.168.1.5:4000
显然,每次代码更改时都必须重新构建和重新运行 预览模式,这让开发变得非常痛苦,有没有人知道这里的问题是什么或关于如何进行的建议?
我遇到过类似的问题,我通过将此代码添加到 svelte.config.js
:
const config = {
kit: {
vite: {
resolve: {
alias: {
"xmlhttprequest-ssl": "./node_modules/engine.io-client/lib/xmlhttprequest.js",
},
},
},
},
};
解决方案由this comment从vite问题中提供。