✨ Add more examples

Author: afterwind-io

example/README.md

@@ -15,3 +15,8 @@ This directory contains several basic examples, covering some common use cases.
 ## Pipe
 
 - [A pipe only send message when browser tab is active](pipe.activetab.ts)
+
+## General
+
+- [What if I still prefer the inheritance pattern?](general.inheritance.ts)
+- [Pipe, React Component and the Hooks](general.hook.tsx)

example/general.hook.tsx

@@ -0,0 +1,37 @@
+/**
+ * The following code is only for demonstration purpose.
+ *
+ * DO NOT use it in production.
+ */
+
+import { ComcatPipe } from 'comcat';
+import { useCallback, useEffect, useState } from 'react';
+
+const useExamplePipe = () => {
+  const [message, setMessage] = useState('');
+
+  /**
+   * **Pipe should be created only once.**
+   *
+   * The following code is just a rough idea,
+   * see https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
+   * for more implementations.
+   */
+  const [pipe] = useState(() => new ComcatPipe({ topic: 'example' }));
+  pipe.onMessage = useCallback((topic: string, data: unknown) => {
+    setMessage(data as string);
+  }, []);
+
+  /**
+   * Always stop the pipe when the component enters clean-up phase.
+   */
+  useEffect(() => () => pipe.stop(), []);
+
+  return message;
+};
+
+export const MyComponent = () => {
+  const message = useExamplePipe();
+
+  return <p>{message}</p>;
+};

example/general.inheritance.ts

@@ -0,0 +1,90 @@
+/**
+ * The following code is only for demonstration purpose.
+ *
+ * DO NOT use it in production.
+ */
+
+import {
+  ComcatPump,
+  ComcatPumpOptions,
+  ComcatPipe,
+  ComcatPipeOptions,
+} from 'comcat';
+
+/**
+ * NOTE
+ *
+ * This example shows how to create a new class derived from `ComcatPump`,
+ * or `ComcatPipe`, to achieve a little bit "cleaner" code.
+ */
+
+/**
+ * In case you need your own constructor parameters,
+ * you can extend the definition from `ComcatPumpOptions`.
+ */
+interface PollingPumpOptions extends ComcatPumpOptions {
+  myParams?: any;
+}
+
+class PollingPump extends ComcatPump {
+  private readonly interval = 60 * 1000;
+  private intervalHandler = -1;
+
+  public constructor(options: PollingPumpOptions) {
+    super(options);
+
+    // ...
+  }
+
+  /**
+   * When override the default callback, you should always use "Arrow Function".
+   */
+  public onConnect = () => {
+    this.intervalHandler = setInterval(() => {
+      fetch('http://worldtimeapi.org/api/ip')
+        .then((res) => {
+          return res.json();
+        })
+        .then((data) => {
+          /**
+           * Now you can directly use `pump` method.
+           */
+          this.pump('Time', data.datetime);
+          this.pump('Unix', data.unixtime);
+        });
+    }, this.interval);
+  };
+
+  public onDisconnect = /** Also "Arrow Function" here. */ () => {
+    clearInterval(this.intervalHandler);
+  };
+}
+
+const pump = new PollingPump({ category: 'example' });
+pump.start();
+
+/**
+ * Now let's create a derived pipe. It's basically the same as creating a pump.
+ */
+
+interface MyPipeOptions extends ComcatPipeOptions {
+  myParams?: any;
+}
+
+class MyPipe extends ComcatPipe {
+  public constructor(options: MyPipeOptions) {
+    super(options);
+
+    // ...
+  }
+
+  public onMessage = /** Also "Arrow Function" here. */ (
+    topic: string,
+    data: unknown
+  ) => {
+    // ...
+  };
+}
+
+const pipe = new MyPipe({ topic: 'example' });
+pipe.start();