Контекст: Я пытаюсь создать живой редактор. Так что несколько пользователей могут видеть изменения вживую. В качестве редактора я использую Reaction-Quill . А для передачи данных я использую сокет .
Идея:
- При редактировании из клиента выдает изменения.
- Сокет-сервер получит изменения и выдаст все соединения.
- клиент получит внесенное изменение и отобразит его во всех редакторах.
Проблема: При наборе (быстро) в редакторе он автоматически выдает content.
Клиентская сторона:
export const QuillEditor = () => {
...
...
const [value, setValue] = useState('');
socket.on('emittedText', ({ content }) => {
setValue(content);
});
const emitEditorData = (content: any) => {
socket.emit('editorText', { content: content, id: id });
};
return (
<>
<ReactQuill
style={{ height: 300 }}
placeholder="Type and share..."
theme="snow"
value={value}
onChange={(content, delta, editor) => {
emitEditorData(content);
}}
/>
</>
);
};
Серверная сторона:
// handle socket connections and emits
io.on('connection', function(socket) {
console.log('a user connected');
socket.on('editorText', ({ content, id }) => {
//id for group data store
editorText[id] = content;
io.emit('emittedText', { content });
});
});
Это проблема с реакцией на перо или я делаю неправильно?