Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Replace XMLHttpRequest with fetch #4980

Open
Juraj-Masiar opened this issue Mar 19, 2024 · 1 comment
Open

Replace XMLHttpRequest with fetch #4980

Juraj-Masiar opened this issue Mar 19, 2024 · 1 comment
Labels
enhancement New feature or request

Comments

@Juraj-Masiar
Copy link

Is your feature request related to a problem? Please describe.
Currently, socket.io can't be used in Chrome extension background script, since modern Manifest V3 extensions are using service worker as a background script (which doesn't have XMLHttpRequest, only fetch).
Example error:

reason
'xhr poll error'
description
TypeError: xhr.open is not a function
    at Request.create (polling.js:250:1)
    at new Request (polling.js:237:1)
    at Polling.request (polling.js:190:1)
    at Polling.doPoll (polling.js:215:1)
    at Polling.poll (polling.js:96:1)
    at Polling.doOpen (polling.js:56:1)
    at Polling.open (transport.js:46:1)
    at Socket.open (socket.js:170:1)
    at new Socket (socket.js:111:1)
    at Manager.open (manager.js:108:1)

Describe the solution you'd like
Replacing XMLHttpRequest with modern fetch.

Describe alternatives you've considered
I think using transports: ['websocket'], would help, but that way I can't use extraHeaders which I use for authorization.

Additional context

"socket.io-client": "^4.7.5",
@Juraj-Masiar Juraj-Masiar added the enhancement New feature or request label Mar 19, 2024
@darrachequesne
Copy link
Member

We could indeed provide another implementation for the HTTP long-polling transport, something like:

import { io } from "socket.io-client";

const socket = io({
  transports: [
    PollingWithFetch,
    WebSocket
  ]
});

Related: socketio/engine.io-client#716

darrachequesne added a commit to socketio/engine.io-client that referenced this issue Apr 23, 2024
Usage:

```js
import { Socket, transports, Fetch } from "engine.io-client";

transports.polling = Fetch;

const socket = new Socket("https://example.com");
```

Note: tree-shaking unused transports is not currently supported and
will be added later.

Related:

- socketio/socket.io#4980
- #716
darrachequesne added a commit to socketio/engine.io-client that referenced this issue May 31, 2024
This commit adds the ability to provide a list of transport
implementations to use when connecting to an Engine.IO server.

This can be used to use HTTP long-polling based on `fetch()`, instead
of the default implementation based on the `XMLHttpRequest` object.

```
import { Socket, Fetch, WebSocket } from "engine.io-client";

const socket = new Socket({
  transports: [Fetch, WebSocket]
});
```

This is useful in some environments that do not provide a
`XMLHttpRequest` object, like Chrome extension background scripts.

> XMLHttpRequest() can't be called from a service worker, extension or
otherwise. Replace calls from your background script to
XMLHttpRequest() with calls to global fetch().

Source: https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers#replace-xmlhttprequest

Related:

- #716
- socketio/socket.io#4980

This is also useful when running the client with Deno or Bun, as it
allows to use the built-in `fetch()` method and `WebSocket` object,
instead of using the `xmlhttprequest-ssl` and `ws` Node.js packages.

Related: socketio/socket.io-deno#12

This feature also comes with the ability to exclude the code related to
unused transports (a.k.a. "tree-shaking"):

```js
import { SocketWithoutUpgrade, WebSocket } from "engine.io-client";

const socket = new SocketWithoutUpgrade({
  transports: [WebSocket]
});
```

In that case, the code related to HTTP long-polling and WebTransport
will be excluded from the final bundle.

Related: socketio/socket.io#4393
@darrachequesne darrachequesne added this to the socket.io-client@next milestone Sep 18, 2024
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants