ueberdosis / hocuspocus

The CRDT Yjs WebSocket backend for conflict-free real-time collaboration in your app.
https://tiptap.dev/docs/hocuspocus/introduction
MIT License
1.31k stars 126 forks source link

Too many keystrokes break Websocket connection #739

Closed wasular closed 10 months ago

wasular commented 1 year ago

Which packages did you experience the bug in?

hocuspocus

What Tiptap version are you using?

2.1.6

What’s the bug you are facing?

Hello, I am not sure if this issue would be better placed in Hocuspocus but I try here.

I am currently using Tip Tap with the Hocuspocus backend scaled with redis over multiple instances.

When I'm typing comically fast in my editor I get WebSocket connection to 'ws://127.0.0.1:808/' failed: Insufficient resources errors. This is probably not a bug and rather a design decision or question of architecture but maybe someone can hint me to the right keywords

import Document from '@tiptap/extension-document';
import Bold from '@tiptap/extension-bold';
import Italic from '@tiptap/extension-italic';
import Text from '@tiptap/extension-text';
import CustomParagraph from '../customExtensions/CustomParagraph';
import CustomHeading from '../customExtensions/CustomHeading';
import { BulletList } from '@tiptap/extension-bullet-list';
import { OrderedList } from '@tiptap/extension-ordered-list';
import { HorizontalRule } from '@tiptap/extension-horizontal-rule';
import { Blockquote } from '@tiptap/extension-blockquote';
import { ListItem } from '@tiptap/extension-list-item';
import { Strike } from '@tiptap/extension-strike';
import { HardBreak } from '@tiptap/extension-hard-break';
import { Gapcursor } from '@tiptap/extension-gapcursor';
import History from '@tiptap/extension-history';
import { Highlight } from '@tiptap/extension-highlight';
import { Code } from '@tiptap/extension-code';
import { Link } from '@tiptap/extension-link';
import { Underline } from '@tiptap/extension-underline';
import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
import Focus from '@tiptap/extension-focus';
import { Dropcursor } from '@tiptap/extension-dropcursor';
import Placeholder from '@tiptap/extension-placeholder';

import VideoNode from '../components/video/VideoNode';
import ImageNode from '../components/image/ImageNode';
import { CodeBlockComponent } from '../components/code/CodeBlockComponent';
import PreventImageDeleteExtension from '../extensions/PreventImageDeleteExtension';
import { CharacterCount } from '@tiptap/extension-character-count';

import PreventMaxExceedPaste from '../extensions/PreventMaxExceedPasteExtension';
import { Collaboration } from '@tiptap/extension-collaboration';
import { HocuspocusProvider } from '@hocuspocus/provider';
import * as Y from 'yjs';
import { IndexeddbPersistence } from 'y-indexeddb';

let lowlight;

if (typeof window !== 'undefined') {
  import('lowlight').then((module) => {
    lowlight = module.lowlight;
  });
}

// const ydoc = new Y.Doc();
// new IndexeddbPersistence('example-document', ydoc);
export const usePageEditor = (pageId) => {
  let provider;
  if (typeof window !== 'undefined') {
    provider = new HocuspocusProvider({
      url: 'ws://127.0.0.1:808',
      name: `document-${pageId}`,
    });
  }

  return {
    provider: provider,
    editor: useEditor({
      extensions: [
        Document,
        Bold,
        Italic,
        Text,
        ImageNode,
        VideoNode,
        CustomParagraph,
        PreventMaxExceedPaste,

        CharacterCount.configure({
          limit: 1000000,
          mode: 'nodeSize',
        }),
        Collaboration.configure({
          document: provider.document,
        }),

        CustomHeading,
        // PreventImageDeleteExtension,
        BulletList,
        OrderedList,
        HorizontalRule,
        Blockquote,
        ListItem,
        Strike,
        HardBreak,
        Gapcursor,
        History,
        Highlight,
        Code,
        Underline,
        CodeBlockLowlight.extend({
          addNodeView() {
            return ReactNodeViewRenderer(CodeBlockComponent);
          },
        }).configure({ lowlight }),
        Focus,
        Dropcursor.configure({
          color: 'rgb(138,206,193)',
          width: 3,
        }),

        Placeholder.configure({
          placeholder: 'Press "/" for commands',
          includeChildren: true,
        }),
      ],
    }),
  };
};
janthurau commented 12 months ago

hey @wasular, that's weird! Haven't seen this so far. Is it possible that you are opening multiple websocket connections somehow? This error sounds like you hit the websocket connection limit