Skip to content

fix: RTCDataChannel readyState race condition and improve typings #359

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Draft
wants to merge 15 commits into
base: master
Choose a base branch
from
Draft

fix: RTCDataChannel readyState race condition and improve typings #359

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
13dd568
fix(polyfill)(RTCDataChannel): fix readyState race condition and impr…
mertushka Jun 11, 2025
5863b40
Merge branch 'murat-dogan:master' into master
mertushka Jun 13, 2025
6e22bd1
revert: unstandard closing event
mertushka Jun 13, 2025
37e5283
chore: remove unnecessary checks
mertushka Jun 14, 2025
c62b15c
fix: close existing datachannels before closing peerconnection
mertushka Jun 14, 2025
05381db
fix(polyfill): returning instead of throwing on closing/closed state
mertushka Jun 17, 2025
5100ad9
fix(types): add explicit ArrayBuffer cast for sendMessageBinary calls
mertushka Jun 17, 2025
0ec58d2
chore: remove unneeded closing check
mertushka Jun 19, 2025
ddce92f
fix: also check for closing data channels
mertushka Jun 19, 2025
b291be2
fix: prevent another race condition window
mertushka Jun 19, 2025
2168c78
fix: dataChannel onClosed race condition
mertushka Jun 19, 2025
f3c71ec
fix: match the spec behaviour
mertushka Jun 19, 2025
dc6a887
chore: remove comment
mertushka Jun 19, 2025
0081313
fix(RTCPeerConnection): implement spec-compliant abrupt data channel …
mertushka Jun 21, 2025
9cbbf63
fix(RTCDataChannel): improve close event handling logic
mertushka Jun 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 25 additions & 29 deletions src/polyfill/RTCDataChannel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ export default class RTCDataChannel extends EventTarget implements globalThis.RT
#label: string;
#protocol: string;

#closeRequested = false;

// events
onbufferedamountlow: globalThis.RTCDataChannel['onbufferedamountlow'] = null;
onclose: globalThis.RTCDataChannel['onclose'] = null;
Expand Down Expand Up @@ -49,14 +47,18 @@ export default class RTCDataChannel extends EventTarget implements globalThis.RT

this.#dataChannel.onClosed(() => {
// Simulate closing event
if (!this.#closeRequested) {
if (this.#readyState === 'closed') return;

if (this.#readyState !== 'closing') {
this.#readyState = 'closing';
this.dispatchEvent(new Event('closing'));
}
Copy link
Contributor Author

@mertushka mertushka Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This logic was incorrect. Why would we simulate a "closing" event when the data channel is already closed? Instead, we start the "closing" state at the beginning of the <RTCDataChannel>.close() method, not here.

Copy link
Contributor

@achingbrain achingbrain Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a gap in the libdatachannel API. Step 4 of 6.2.4 says:

Unless the procedure was initiated by channel.close, set channel.[[ReadyState]] to "closing" and fire an event named closing at channel.

We don't get a "closing" notification from libdatachannel before the channel is actually closed so this is the best we can do in order to emit the events required by the spec.

Copy link
Contributor Author

@mertushka mertushka Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So how are we gonna handle both cases?

Step 5 of https://www.w3.org/TR/webrtc/#dom-rtcpeerconnection-close

NOTE

The RTCDataChannels will be closed abruptly and the closing procedure will not be invoked.

Copy link
Contributor

@achingbrain achingbrain Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The linked case is when the RTCPeerConnection is explicitly closed by the user so set a flag or a status and use that to decide whether or not to emit the event(s)?


setImmediate(() => {
this.#readyState = 'closed';
this.dispatchEvent(new Event('close'));
if (this.#readyState !== 'closed') {
this.#readyState = 'closed';
this.dispatchEvent(new Event('close'));
}
});
Copy link
Contributor Author

@mertushka mertushka Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no need to use setImmediate here. This can be done synchronously since the data channel already closed.

});

Expand All @@ -79,32 +81,22 @@ export default class RTCDataChannel extends EventTarget implements globalThis.RT

this.#dataChannel.onMessage((data) => {
if (ArrayBuffer.isView(data)) {
if (this.binaryType == 'arraybuffer') data = data.buffer;
else data = Buffer.from(data.buffer);
data =
this.binaryType === 'arraybuffer'
? (data.buffer as ArrayBuffer)
: Buffer.from(data.buffer);
}

this.dispatchEvent(new MessageEvent('message', { data }));
});

// forward events to properties
this.addEventListener('message', (e) => {
if (this.onmessage) this.onmessage(e as MessageEvent);
});
this.addEventListener('bufferedamountlow', (e) => {
if (this.onbufferedamountlow) this.onbufferedamountlow(e);
});
this.addEventListener('error', (e) => {
if (this.onerror) this.onerror(e as RTCErrorEvent);
});
this.addEventListener('close', (e) => {
if (this.onclose) this.onclose(e);
});
this.addEventListener('closing', (e) => {
if (this.onclosing) this.onclosing(e);
});
this.addEventListener('open', (e) => {
if (this.onopen) this.onopen(e);
});
this.addEventListener('open', (e) => this.onopen?.(e));
this.addEventListener('message', (e) => this.onmessage?.(e as MessageEvent));
this.addEventListener('error', (e) => this.onerror?.(e as RTCErrorEvent));
this.addEventListener('close', (e) => this.onclose?.(e));
this.addEventListener('closing', (e) => this.onclosing?.(e));
this.addEventListener('bufferedamountlow', (e) => this.onbufferedamountlow?.(e));
}

set binaryType(type) {
Expand Down Expand Up @@ -168,7 +160,7 @@ export default class RTCDataChannel extends EventTarget implements globalThis.RT
return this.#readyState;
}

send(data): void {
send(data: string | Blob | ArrayBuffer | ArrayBufferView): void {
if (this.#readyState !== 'open') {
throw new exceptions.InvalidStateError(
"Failed to execute 'send' on 'RTCDataChannel': RTCDataChannel.readyState is not 'open'",
Expand All @@ -190,15 +182,19 @@ export default class RTCDataChannel extends EventTarget implements globalThis.RT
this.#dataChannel.sendMessageBinary(data);
} else {
if (process?.versions?.bun) {
this.#dataChannel.sendMessageBinary(Buffer.from(data));
this.#dataChannel.sendMessageBinary(Buffer.from(data as ArrayBuffer));
} else {
this.#dataChannel.sendMessageBinary(new Uint8Array(data));
this.#dataChannel.sendMessageBinary(new Uint8Array(data as ArrayBuffer));
}
}
}

close(): void {
this.#closeRequested = true;
if (this.#readyState === 'closing' || this.#readyState === 'closed') return;

this.#readyState = 'closing';
this.dispatchEvent(new Event('closing'));

setImmediate(() => {
this.#dataChannel.close();
});
Expand Down
7 changes: 7 additions & 0 deletions src/polyfill/RTCPeerConnection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,6 +354,13 @@ export default class RTCPeerConnection extends EventTarget implements globalThis
}

close(): void {
for (const dc of this.#dataChannels) {
if (dc.readyState !== 'closed') {
dc.close();
Copy link
Contributor Author

@mertushka mertushka Jun 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://www.w3.org/TR/webrtc/#dom-rtcpeerconnection-close

  1. Set the [[ReadyState]] slot of each of connection's RTCDataChannels to "closed".

NOTE

The RTCDataChannels will be closed abruptly and the closing procedure will not be invoked.

Do we actually need a separate method like forceCloseAbruptly for this case?

In the current PR DataChannel.close() implementation, the .readyState is set to "closing" immediately to prevent readyState race conditions, and only transitions to "closed" once the native layer confirms that the data channel has closed. However, according to the W3C WebRTC Data Channel specification, when a data channel is closed abruptly, the closing procedure is not invoked and .readyState must transition directly to "closed".

We should ensure that our implementation matches the expected behavior defined by the spec.

Copy link
Contributor Author

@mertushka mertushka Jun 17, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@murat-dogan I need your insights here.

Also, could you clarify why this implementation was removed in the first place?
b3000f1#diff-701dfe9764f8864403783f0e275aeac5f8f104601ac6b189f7deda2f9eaaa1f1L339-L340

}
}
this.#dataChannels.clear();

this.#peerConnection.close();
}

Expand Down