Skip to content

I'm developing a codeshare app with monaco. how can i get keyboard event or how can i control when to emit? #2752

Description

@cornorghost

I'm developing a codeshare app with monaco. Client connect to my broardcast server and use onDidChangeModelContent to listen input. after changed, client send message to server, and server broadcast to all my cilent. After cilient recv message, i use executeEdits function to change the text ,but there is a problem, when using executeEdits func, it will triggle onDidChangeModelContent and send another message to server, that will make a endless loop. So i wonder know if there is a event to distinguish keyboard input or message from server, or can i define event myself? client js code below.

                       var global_id;
		
			var editor = monaco.editor.create(document.getElementById('container'), {
				value: [''].join('\n'),
				language: 'javascript'
			});
			
			var ws = new WebSocket('ws://');
			
			monaco.editor.setTheme('vs-dark');
			
                       //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
			//i listen change here, but i want to distinguish executeEdits event or keybord event
			editor.onDidChangeModelContent((event) => {
				 var changes=event.changes[0];
				 changes['uid']=global_id;
				 changes['mes_type']=1;
				 ws.send(JSON.stringify(changes));
			})
			
			
			console.log(ws.readyState);
			
			ws.onopen = () => {
				console.log('open connection');
			}

			ws.onclose = () => {
				console.log('close connection');
			}
			
			ws.onmessage = function(evt) {

				if(evt.data.constructor==Blob){
					
					const reader = new FileReader();
					reader.addEventListener('loadend', (e) => {
						console.log(e.srcElement.result.constructor);
						let text = JSON.parse(e.srcElement.result);
						console.log(text);
						switch (text['mes_type'])
						{ 
						  case 0:
							console.log("connect");
							global_id=text['uid'];
							editor.setValue(text['body'])
							break; 
						  case 1:
							console.log("message");
							if(global_id!=text['uid']){
								var options={range:text['range'], rangeLength:['range'], text:text['text'], rangeOffset:text['rangeOffset'], forceMoveMarkers:true,};
								editor.executeEdits(editor.root, [options]);
							}
							break; 
						}
						console.log(global_id)
					  
					});
					
					reader.readAsText(evt.data);

				}
				else if(evt.data.constructor==String){
					console.log("in text")
					let text=JSON.parse(evt.data);
					console.log(text)
					if(global_id!=text['uid']){
						var options={range:text['range'], rangeLength:['range'], text:text['text'], rangeOffset:text['rangeOffset'], forceMoveMarkers:true,};
						editor.executeEdits(editor.root, [options]);
					}
				}
			};

Activity

  1. locked and limited conversation to collaborators on Mar 3, 2023
  2. converted this issue into a discussion #3646 on Mar 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    *questionIssue represents a question, should be posted to StackOverflow (VS Code)

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions