JavaScript client
You can connect to a Topical server that has been exposed by an adapter, using the JavaScript client. The client is available on npm:
npm install @topical/core
(Or you may prefer to use the React client - see below.)
type ListModel = {
items: Record<string, { text: string, done: boolean }>;
order: string[];
}
// Setup the socket
const socket = new Socket("ws://example.com/socket");
// Subscribe to a topic (returns a function to unsibscribe)
const unsubscribe = socket.subscribe<ListModel>(
["lists", "foo"],
(list: ListModel) => { console.log(value); },
(error) => { ... }
);
// Execute an action
const itemId = await socket.execute(["lists", "foo"], "add_item", "First item");
// (The subscription should have been updated)
// Send a notification
socket.notify(["lists", "foo"], "update_item", itemId, "Inaugural item")
// (The subscription should have been updated again)
// Unsubscribe
unsubscribe();
react-client
React client
Instead of using the JavaScript client directly, you can use the React client. Install it from npm:
npm install @topical/react
Setup the socket using the provider:
import { SocketProvider } from "@topical/react";
function getSocketUrl() {
// TODO
return "ws://example.com/socket";
}
function App() {
return (
<SocketProvider url={getSocketUrl()}>
// ...
</SocketProvider>
);
}
Then use the useTopic
hook in your components to subscribe to your topic:
import { useTopic } from "@topical/react";
function List({ id }) {
const [list, { execute, notify, loading, error }] = useTopic<models.List>("lists", id);
const addItem = useCallback(
(text: string) => execute("add_item", text),
[execute]
);
if (loading) {
return <p>Loading...</p>;
} else if (error) {
return <p>Error.</p>
} else {
return (
// ...
);
}
}
If you need access to the underlying socket (or the status), you can use the useSocket
hook:
import { useSocket } from "@topical/react";
function SocketStatus() {
const [_socket, state] = useSocket();
return <p>{state}</p>;
}