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

[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]);
					}
				}
			};

[amRohitKumar]

@cornorghost Do you find any solution? I'm facing the same problem.

[amRohitKumar]

@cornorghost
Hey, I found the solution. You can keep some kind of variable to resolve this conflict.
I'm using this with Next.js, so I used the useRef hook.
Here is my code:

const isSocket = useRef(false);
// socket listener
socket.on("code-change-received", (changeEvent) => {
      isSocket.current = true;
      editorRef.current?.executeEdits("other-user", [
          changeEvent.range,
          text: changeEvent.text,
          forceMoveMarkers: true,
        },
      ]);
    });
// onChange function on editor
function handleEditorChange(value, event) {
    if (!isSocket.current) {
      console.log("here is the current model value:", event);
      socket.emit("code-change", event.changes[0]);
    } else {
      isSocket.current = false;
    }
  }