Pub/Sub
Properties
name | type | Description |
---|---|---|
myTopicList | TopicListType [ ] | null | myTopicList list |
mySubscribeList | SubscribeListType [ ] | null | mySubscribeList list |
Methods
name | type | Parameters Description | response |
---|---|---|---|
createTopic | function | topic_name: string | Promise:CreateTopicResponse |
subscribeTopic | function | topicid: string | Promise:SearchUsersResponse |
publishTopicMessage | function | TopicMessageType | Promise:SearchUsersResponse |
getMyCreateTopicList | function | PageParams | Promise:TopicListType |
getMySubscribeTopicList | function | PageParams | Promise:SubscribeListType |
Prerequisites
init() see: init
register() see: register
login() see: login
Init and get Client
To use the functions of the current module, please complete the following steps first.
tip
After successful login, you can get the secret key pair from the returned result
import { useEffect, useState } from 'react';
import { Client } from '@web3mq/client';
export const App = () => {
const [fastestUrl, setFastUrl] = useState<string | null>(null);
useEffect(() => {
Client.init({
connectUrl: '', //
app_key: 'app_key', // temporary authorization key obtained by applying, will be removed in future testnets and mainnet
}).then(data => {
setFastUrl(data);
});
}, [])
if (!fastestUrl) return;
const {
tempPrivateKey,
tempPublicKey,
pubkeyExpiredTimestamp,
mainPrivateKey,
mainPublicKey,
} = loginRes
const keys = {
PrivateKey: tempPrivateKey,
PublicKey: tempPublicKey,
userid: localStorage.getItem('userid')
};
const client = Client.getInstance(keys);
return (
<Child client={client} />
)
}
Methods
Pub/Sub Example
- Copy the Root Components Code to App.tsx
- Create a Child.tsx file and copy the Child Components Code to Child.tsx
import React, { useEffect, useState } from 'react';
import { Client } from '@web3mq/client';
interface IProps {
client: Client;
}
const Child: React.FC<IProps> = (props) => {
const { client } = props;
const [topicName, setTopicName] = useState<string>('');
const [topicId, setTopicId] = useState<string>('');
const [notifyList, setNotifyList] = useState<any>([]);
const [myTopicList, setMyTopicList] = useState<any>(null);
const [mySubscribeList, setMySubscribeList] = useState<any>(null);
const handleEvent = (event: { type: string }) => {
const { type } = event;
if (type === 'notification.getList') {
console.log('notification list -------', client.notify.notificationList);
setNotifyList([...notifyList, ...(client.notify.notificationList as [])]);
}
if (type === 'notification.getMyTopicList') {
console.log('MyTopicList------', client);
setMyTopicList(client.topic.myTopicList);
}
if (type === 'notification.getMySubscribeList') {
console.log('MySubscribeList------', client.topic.mySubscribeList);
setMySubscribeList(client.topic.mySubscribeList);
}
};
const getMyTopicList = async () => {
const data = await client.topic.getMyCreateTopicList({
page: 1,
size: 100,
});
console.log(data);
};
const getMySubscribeList = async () => {
const data = await client.topic.getMySubscribeTopicList({
page: 1,
size: 100,
});
console.log(data);
};
useEffect(() => {
client.on('notification.getList', handleEvent);
client.on('notification.getMyTopicList', handleEvent);
client.on('notification.getMySubscribeList', handleEvent);
return () => {
client.off('notification.getList', handleEvent);
client.off('notification.getMyTopicList', handleEvent);
client.off('notification.getMySubscribeList', handleEvent);
};
}, [notifyList]);
useEffect(() => {
getMyTopicList();
getMySubscribeList();
}, []);
const handleCreate = async () => {
const data = await client.topic.createTopic(topicName);
console.log(data);
await getMyTopicList();
};
const handleSubscribe = async () => {
const data = await client.topic.subscribeTopic(topicId);
console.log(data);
await getMySubscribeList();
};
const handlePublishMsg = async () => {
const params = {
topicid: topicId,
title: 'test title',
content: 'test content',
};
await client.topic.publishTopicMessage(params);
};
return (
<div>
<h1>1. Create Topic</h1>
<div>
Write topic name------
<input
type='text'
value={topicName}
onChange={(e) => {
setTopicName(e.target.value);
}}
/>
<button onClick={handleCreate}>Create Topic</button>
</div>
<h4>My Topic List</h4>
{myTopicList?.map((item: any, idx: number) => (
<div key={item.topicid}>
{`topicid${idx + 1}-------`} <b>{item.topicid}</b>
</div>
))}
<br />
<br />
<h1>2. Subscribe Topic</h1>
<div>
Write subscribe topic ID------
<input
type='text'
value={topicId}
onChange={(e) => {
setTopicId(e.target.value);
}}
/>
<button onClick={handleSubscribe}>Subscribe Topic</button>
</div>
<h4>My Subscribe List</h4>
{mySubscribeList?.map((item: any, idx: number) => (
<div key={item.topicid}>
{`topicid${idx + 1}-------`}
<b>{item.topicid}</b>
</div>
))}
<br />
<br />
<h1>3. Publish Msg</h1>
<div>
Write subscribe topic ID------
<input
type='text'
value={topicId}
onChange={(e) => {
setTopicId(e.target.value);
}}
/>
<button onClick={handlePublishMsg}>publish Msg</button>
</div>
<h1>4. Notify List</h1>
{notifyList?.map((item: any, idx: number) => (
<div key={item.timestamp}>
{`notify${idx + 1}-------title:`}
<b>{item.title}</b>, content: <b>{item.content}</b>
</div>
))}
</div>
);
};
export default Child;
createTopic
Create your topic, customize the name of the topic
import { Client } from '@web3mq/client';
interface IProps {
client: Client;
}
export const Child = (props: IProps) => {
const { client } = props;
const handleCreate = async () => {
const data = await client.notify.createTopic('topic_name');
console.log(data);
setTopic(data.topicid);
};
return (
<div>
<button onClick={handleCreate}>Create Topic</button>
</div>
);
};
subscribeTopic
Subscribe to other topics by topicid.
import { Client } from '@web3mq/client';
interface IProps {
client: Client;
}
export const Child = (props: IProps) => {
const { client } = props;
const handleSubscribe = async () => {
const data = await client.notify.subscribeTopic('topicid');
console.log(data);
};
return (
<div>
<button onClick={handleSubscribe}>Subscribe Topic</button>
</div>
);
};
publishTopicMessage
Choose your topic and post content.
import { Client } from '@web3mq/client';
interface IProps {
client: Client;
}
export const Child = (props: IProps) => {
const { client } = props;
const handlePublishMsg = async () => {
const params = {
topicid: 'topic',
title: 'test title',
content: 'test content',
};
await client.notify.publishTopicMessage(params);
};
return (
<div>
<button onClick={handlePublishMsg}>publish Msg</button>
</div>
);
};
getMyCreateTopicList
Get the list of topics I created.
import { useEffect } from 'react';
import { Client } from '@web3mq/client';
interface IProps {
client: Client;
}
export const Child = (props: IProps) => {
const { client } = props;
const handleEvent = (event: { type: any }) => {
if (event.type === 'notification.getMyTopicList') {
console.log(client.notify.myTopicList);
}
};
useEffect(() => {
client.on('notification.getMyTopicList', handleEvent);
return () => {
client.off('notification.getMyTopicList');
};
}, []);
const getMyTopicList = async () => {
const data = await client.notify.getMyCreateTopicList({
page: 1,
size: 100,
});
console.log(data);
};
return (
<div>
<button onClick={getMyTopicList}>getMyCreateTopicList</button>
</div>
);
};
getMySubscribeTopicList
Get the list of my subscribed topics.
import { useEffect } from 'react';
import { Client } from '@web3mq/client';
interface IProps {
client: Client;
}
export const Child = (props: IProps) => {
const { client } = props;
const handleEvent = (event: { type: any }) => {
if (event.type === 'notification.getMySubscribeList') {
console.log(client.notify.mySubscribeList);
}
};
useEffect(() => {
client.on('notification.getMySubscribeList', handleEvent);
return () => {
client.off('notification.getMySubscribeList');
};
}, []);
const getMySubscribeList = async () => {
const data = await client.notify.getMySubscribeTopicList({
page: 1,
size: 100,
});
console.log(data);
};
return (
<div>
<button onClick={getMySubscribeList}>getMySubscribeTopicList</button>
</div>
);
};
get NotificationList
Get the list of notifications in the
notification.getList
event.
import { useEffect } from 'react';
import { Client } from '@web3mq/client';
interface IProps {
client: Client;
}
export const Child = (props: IProps) => {
const { client } = props;
const handleEvent = (event: { type: any }) => {
if (event.type === 'notification.getList') {
console.log(client.notify.notificationList);
}
};
useEffect(() => {
client.on('notification.getList', handleEvent);
return () => {
client.off('notification.getList');
};
}, []);
return <div>Notify Test</div>;
};