Skip to content
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

fix: web serial disconnect logic #3575

Merged
merged 1 commit into from
Sep 12, 2023
Merged

fix: web serial disconnect logic #3575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
46 changes: 34 additions & 12 deletions src/js/serial_backend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,23 @@ const serial = import.meta.env ? serialWeb : serialNWJS;

let mspHelper;
let connectionTimestamp;
let clicks = false;
let liveDataRefreshTimerId = false;

let isConnected = false;

const toggleStatus = function () {
isConnected = !isConnected;
};

function connectHandler(event) {
onOpen(event.detail);
toggleStatus();
}

function disconnectHandler(event) {
onClosed(event.detail);
}

export function initializeSerialBackend() {
GUI.updateManualPortVisibility = function() {
const selected_port = $('div#port-picker #port option:selected');
Expand Down Expand Up @@ -82,10 +96,6 @@ export function initializeSerialBackend() {
if (!GUI.connect_lock) {
// GUI control overrides the user control

const toggleStatus = function () {
clicks = !clicks;
};

GUI.configuration_loaded = false;

const selected_baud = parseInt($('div#port-picker #baud').val());
Expand All @@ -94,7 +104,7 @@ export function initializeSerialBackend() {
if (selectedPort.data().isDFU) {
$('select#baud').hide();
} else if (portName !== '0') {
if (!clicks) {
if (!isConnected) {
console.log(`Connecting to: ${portName}`);
GUI.connecting_to = portName;

Expand All @@ -109,10 +119,13 @@ export function initializeSerialBackend() {

serial.connect('virtual', {}, onOpenVirtual);
} else if (import.meta.env) {
serial.addEventListener('connect', (event) => {
onOpen(event.detail);
toggleStatus();
});
// Explicitly disconnect the event listeners before attaching the new ones.
serial.removeEventListener('connect', connectHandler);
serial.addEventListener('connect', connectHandler);

serial.removeEventListener('disconnect', disconnectHandler);
serial.addEventListener('disconnect', disconnectHandler);

serial.connect({ baudRate });
} else {
serial.connect(
Expand Down Expand Up @@ -276,7 +289,15 @@ function abortConnection() {
$('div#port-picker #port, div#port-picker #baud, div#port-picker #delay').prop('disabled', false);

// reset data
clicks = false;
isConnected = false;
}

/**
* purpose of this is to bridge the old and new api
* when serial events are handled.
*/
function read_serial_adapter(event) {
read_serial(event.detail.buffer);
}

function onOpen(openInfo) {
Expand Down Expand Up @@ -307,7 +328,8 @@ function onOpen(openInfo) {
$('input[name="expertModeCheckbox"]').prop('checked', result).trigger('change');

if(import.meta.env) {
serial.addEventListener('receive', (e) => read_serial(e.detail.buffer));
serial.removeEventListener('receive', read_serial_adapter);
serial.addEventListener('receive', read_serial_adapter);
} else {
serial.onReceive.addListener(read_serial);
}
Expand Down
73 changes: 49 additions & 24 deletions src/js/webSerial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { webSerialDevices } from "./serial_devices";

async function* streamAsyncIterable(stream) {
const reader = stream.getReader();
async function* streamAsyncIterable(reader, keepReadingFlag) {
try {
while (true) {
while (keepReadingFlag()) {
const { done, value } = await reader.read();
if (done) {
return;
Expand Down Expand Up @@ -34,10 +33,20 @@ class WebSerial extends EventTarget {
this.port = null;
this.reader = null;
this.writer = null;
this.reading = false;

this.connect = this.connect.bind(this);
}

handleReceiveBytes(info) {
this.bytesReceived += info.detail.byteLength;
}

handleDisconnect() {
this.removeEventListener('receive', this.handleReceiveBytes);
this.removeEventListener('disconnect', this.handleDisconnect);
}

async connect(options) {
this.openRequested = true;
this.port = await navigator.serial.requestPort({
Expand All @@ -48,6 +57,7 @@ class WebSerial extends EventTarget {
const connectionInfo = this.port.getInfo();
this.connectionInfo = connectionInfo;
this.writer = this.port.writable.getWriter();
this.reader = this.port.readable.getReader();

if (connectionInfo && !this.openCanceled) {
this.connected = true;
Expand All @@ -58,9 +68,8 @@ class WebSerial extends EventTarget {
this.failed = 0;
this.openRequested = false;

this.addEventListener("receive", (info) => {
this.bytesReceived += info.detail.byteLength;
});
this.addEventListener("receive", this.handleReceiveBytes);
this.addEventListener('disconnect', this.handleDisconnect);

console.log(
`${this.logHead} Connection opened with ID: ${connectionInfo.connectionId}, Baud: ${options.baudRate}`,
Expand All @@ -73,7 +82,9 @@ class WebSerial extends EventTarget {
// the stream async iterable interface:
// https://web.dev/streams/#asynchronous-iteration

for await (let value of streamAsyncIterable(this.port.readable)) {

this.reading = true;
for await (let value of streamAsyncIterable(this.reader, () => this.reading)) {
this.dispatchEvent(
new CustomEvent("receive", { detail: value }),
);
Expand Down Expand Up @@ -108,32 +119,46 @@ class WebSerial extends EventTarget {

async disconnect() {
chmelevskij marked this conversation as resolved.
Show resolved Hide resolved
this.connected = false;
this.transmitting = false;
this.reading = false;
this.bytesReceived = 0;
this.bytesSent = 0;

if (this.port) {
this.transmitting = false;
const doCleanup = async () => {
if (this.reader) {
this.reader.releaseLock();
this.reader = null;
}
if (this.writer) {
await this.writer.close();
await this.writer.releaseLock();
this.writer = null;
}
try {
if (this.port) {
await this.port.close();
this.port = null;
}
};

console.log(
`${this.logHead}Connection with ID: ${this.connectionId} closed, Sent: ${this.bytesSent} bytes, Received: ${this.bytesReceived} bytes`,
);
try {
await doCleanup();

this.connectionId = false;
this.bitrate = 0;
this.dispatchEvent(new CustomEvent("disconnect"));
} catch (error) {
console.error(error);
console.error(
`${this.logHead}Failed to close connection with ID: ${this.connectionId} closed, Sent: ${this.bytesSent} bytes, Received: ${this.bytesReceived} bytes`,
);
console.log(
`${this.logHead}Connection with ID: ${this.connectionId} closed, Sent: ${this.bytesSent} bytes, Received: ${this.bytesReceived} bytes`,
);

this.connectionId = false;
this.bitrate = 0;
this.dispatchEvent(new CustomEvent("disconnect", { detail: true }));
} catch (error) {
console.error(error);
console.error(
`${this.logHead}Failed to close connection with ID: ${this.connectionId} closed, Sent: ${this.bytesSent} bytes, Received: ${this.bytesReceived} bytes`,
);
this.dispatchEvent(new CustomEvent("disconnect", { detail: false }));
} finally {
if (this.openCanceled) {
this.openCanceled = false;
}
} else {
this.openCanceled = true;
}
}

Expand Down