-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b989db1
commit e61f2a8
Showing
3 changed files
with
132 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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>; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); |