Skip to content

Commit

Permalink
Merge pull request #199 from prona-p4-learning-platform/fix-firefox-w…
Browse files Browse the repository at this point in the history 
…ebocket-lag

Fix firefox webocket lag
  • Loading branch information
@srieger1
srieger1 committed Jul 7, 2024
2 parents 9c19518 + 1d91e24 commit 36d544e
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 45 deletions.
108 changes: 66 additions & 42 deletions frontend/src/components/FileEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -350,14 +350,18 @@ export default class FileEditor extends Component<FileEditorProps> {
}

const collaborationId = fileName + "-group" + group;
console.log(
"Starting collaboration for user: " +
this.username +
" in group: " +
group +
" on: " +
collaborationId,
);
// Avoid console.log in production code, while opening websockets, as Firefox otherwise
// will will wait a long time before opening the connection, e.g., when switching terminals
// or files in the editor (y-websocket and/or monaco-languageclient)
//
// console.log(
// "Starting collaboration for user: " +
// this.username +
// " in group: " +
// group +
// " on: " +
// collaborationId,
// );

const doc = new Y.Doc();

Expand Down Expand Up @@ -413,18 +417,23 @@ export default class FileEditor extends Component<FileEditorProps> {
red.toString(16).padStart(2, "0") +
green.toString(16).padStart(2, "0") +
blue.toString(16).padStart(2, "0");
console.log("my color: " + hexColor);
// Avoid console.log in production code, while opening websockets, as Firefox otherwise
// will will wait a long time before opening the connection, e.g., when switching terminals
// or files in the editor (y-websocket and/or monaco-languageclient)
//
// console.log("my color: " + hexColor);

awareness.on(
"update",
({ added = [] as number[] /*, updated = [], removed = [] */ }) => {
added.forEach((client) => {
//yjs awareness debug:
//console.log("added client: " + client);
// yjs awareness debug:
//
//awareness.getStates().forEach((state, clientId) => {
// console.log("client state: " + clientId + " state: " + state.user.name + " color: " + state.user.color);
//});
// console.log("added client: " + client);
//
// awareness.getStates().forEach((state, clientId) => {
// console.log("client state: " + clientId + " state: " + state.user.name + " color: " + state.user.color);
// });

// add css class for new client
const awarenessState = awareness.getStates().get(client);
Expand All @@ -437,7 +446,7 @@ export default class FileEditor extends Component<FileEditorProps> {
const colorGreen = parseInt(color.substring(3, 5), 16);
const colorBlue = parseInt(color.substring(5, 7), 16);
const newClient = document.createElement("style");
//newClient.type = "text/css";
// newClient.type = "text/css";
newClient.innerHTML = `
.yRemoteSelection-${client} {
background-color: rgb(${colorRed}, ${colorGreen}, ${colorBlue}, .5)
Expand Down Expand Up @@ -488,13 +497,14 @@ export default class FileEditor extends Component<FileEditorProps> {
document.head.appendChild(newClient);
}
});
//no need to handle updated and removed clients for now, styles will be kept and will not change
//updated.forEach((client) => {
// console.log("updated client: " + client);
//});
//removed.forEach((client) => {
// console.log("removed client: " + client);
//});
// no need to handle updated and removed clients for now, styles will be kept and will not change
//
// updated.forEach((client) => {
// console.log("updated client: " + client);
// });
// removed.forEach((client) => {
// console.log("removed client: " + client);
// });
},
);
console.log("my client id: " + awareness.clientID);
Expand Down Expand Up @@ -532,8 +542,8 @@ export default class FileEditor extends Component<FileEditorProps> {
return;
}
this.binding?.destroy();
// WebRTC provider problem is room is taken, cannot be joined/created again
//this.collaborationProvider?.room?.destroy();
// WebRTC provider problem if room is taken, cannot be joined/created again
// this.collaborationProvider?.room?.destroy();
this.collaborationProvider?.disconnect();
}

Expand All @@ -553,7 +563,11 @@ export default class FileEditor extends Component<FileEditorProps> {
}

if (lspLanguage !== "") {
console.log("Starting language client for language: " + lspLanguage);
// Avoid console.log in production code, while opening websockets, as Firefox otherwise
// will will wait a long time before opening the connection, e.g., when switching terminals
// or files in the editor (y-websocket and/or monaco-languageclient)
//
// console.log("Starting language client for language: " + lspLanguage);

this.languageClientWebSocket = createWebSocket(
"/environment/" +
Expand All @@ -576,18 +590,26 @@ export default class FileEditor extends Component<FileEditorProps> {
// be sent to early and ignored

// save onmessage fn
//const defaultOnMessage = this.languageClientWebSocket.onmessage
// const defaultOnMessage = this.languageClientWebSocket.onmessage
this.languageClientWebSocket.onmessage = (e) => {
if (e.data === "backend websocket ready") {
// restore onmessage fn
console.log("backend websocket ready, starting language client");
//this.languageClientWebSocket.onmessage = (e) => {
//console.log("received message from backend: " + e.data);
//if (e.data === "pong") {
// ignore pong keep-alive message from backend
//}
//defaultOnMessage?.call(this.languageClientWebSocket, e);
//}

// Avoid console.log in production code, while opening websockets, as Firefox otherwise
// will will wait a long time before opening the connection, e.g., when switching terminals
// or files in the editor (y-websocket and/or monaco-languageclient)
//
// console.log("backend websocket ready, starting language client");

// keep-alive seams to be automatically ignored, hence "pong" handling is commented out
//
// this.languageClientWebSocket.onmessage = (e) => {
// console.log("received message from backend: " + e.data);
// if (e.data === "pong") {
// ignore pong keep-alive message from backend
// }
// defaultOnMessage?.call(this.languageClientWebSocket, e);
// }

// keep connection alive
this.languageClientWSTimerId = setInterval(() => {
Expand Down Expand Up @@ -622,16 +644,18 @@ export default class FileEditor extends Component<FileEditorProps> {

// workspaceFolder already set globally, no need to set it again, would only
// be necessary if workspaceFolders should be different for each selected file
//workspaceFolder: {
// uri: "file:///home/p4/"
//},
//
// workspaceFolder: {
// uri: "file:///home/p4/"
// },

// disable the default error handler
//errorHandler: {
//error: () => ({ action: ErrorAction.Continue }),
// maybe use restart of language client? e.g., to recover from conn loss?
//closed: () => ({ action: CloseAction.Restart })
//}
//
// errorHandler: {
// error: () => ({ action: ErrorAction.Continue }),
// maybe use restart of language client? e.g., to recover from conn loss?
// closed: () => ({ action: CloseAction.Restart })
// }
},
// create a language client connection from the JSON RPC connection on demand
connectionProvider: {
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/components/Terminal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,10 @@ export default function XTerminal(props: TerminalProps): JSX.Element {

// restore terminal state
terminalRef.write(terminalState ?? "");
terminalRef.write("\x1B[0m");
// ESC[0m resets all styles and colors
//terminalRef.write("\x1B[0m");
// ESC[1C moves cursor one position to the right
terminalRef.write("\x1B[1C");

// resize terminal
fitAddon.fit();
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/views/Environment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,8 +123,8 @@ function Environment(): JSX.Element {
stepLabels: [],
rootPath: "",
workspaceFolders: [],
useCollaboration: true,
useLanguageClient: true,
useCollaboration: false,
useLanguageClient: false,
});
const [terminalState, setTerminalState] = useState<TerminalStateType[]>([]);
const [activeStep, setActiveStep] = useState<number>(0);
Expand Down

0 comments on commit 36d544e

Please sign in to comment.