Extensible Message Interface
Sending.Network provides an extension plug-in platform, enabling developers to enrich the messaging features by interacting with third-party dapps or smart contracts.
Currently, Sending.Network has 3 built-in plugin projects: message-type-plugin, did-method-plugin and social-graph-plugin, and developers are free to develop other plugin projects. Plugin projects are lightweight, pluggable, and easy to deploy. The following sections introduce how to compile and deploy message-type-plugin plugin projects in environments like Web, IOS, and Android.
Please contact [email protected] for the wasm files.
At the root directory of message-type-plugin
// generate the wasm package of the plugin project
cd message-type-plugin
./build-wasm.sh
A package called
message-type-plugin.wasm
will be found in the directory web/
.At the root directory of the Radix main project
// generate the wasm package of the Radix main project
cd radix
./build-wasm.sh
// generate service worker sw.js
cd web/
yarn install
yarn build
A package called server.wasm will be found in the directory
web/
. sw.js will be generated in the web/dist/
.Replace the sw.js and two wasm packages with the newly built ones, clear the web page cache data and refresh it.
By launching the
message-type-plugin.wasm
, the plugin will be automatically registered into Radix main Process. However, you can also register/unregister the plugin by executing console scripts. In the console of your Chrome browser, run the following scripts to register/unregister trading Dapp plugins like Lucky Box and Peer Swap.//Register LuckyBox
fetch('http://pluginoperate/register_plugin', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
'type': 'MessageType',
'name': 'LuckyBox',
'http_base_url': 'http://messagetypeplugin'
})
})
.then(response => response.json())
.then(response => console.log(JSON.stringify(response)));
//Unregister LuckyBox
fetch('http://pluginoperate/unregister_plugin', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
'type': 'MessageType',
'name': 'LuckyBox'
})
})
.then(response => response.json())
.then(response => console.log(JSON.stringify(response)));
//Register PeerSwap
fetch('http://pluginoperate/register_plugin', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
'type': 'MessageType',
'name': 'PeerSwap',
'http_base_url': 'http://messagetypeplugin'
})
})
.then(response => response.json())
.then(response => console.log(JSON.stringify(response)));
//Unregister PeerSwap
fetch('http://pluginoperate/unregister_plugin', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
'type': 'MessageType',
'name': 'PeerSwap'
})
})
.then(response => response.json())
.then(response => console.log(JSON.stringify(response)));
Plugin features can be used by calling the interfaces from the frontend.
For instance,
http://localhost/_api/media/v3/query_message_type
this interface can return all of the supported trading Dapp message types.The frontend can fetch all of the registered plugins by calling this API.
At the root directory of message-type-plugin:
// iOS
cd message-type-plugin
bash build/gobind-plugin/build.sh -i
//Android
cd message-type-plugin
bash build/gobind-plugin/build.sh -a
Then integrate the generated packages into your iOS or Android SDK.
In Web3 trading Dapps, there are always some scenes that you need to call a JS API to query data like a user profile. In Sending.Network, trading Dapps like LuckyBox and PeerSwap will fetch user profiles and interact with the P2P nodes. The following section provides a generic guide on how to call a JS API from third-party Dapps.
- 1.Install
postmate
yarn add postmate
- 1.Provide an iframe container to load Dapps:<div className="iframeContainer" ref={frameContainerRef}></div>
- 2.Create an iframe and load Dapp:const postmateRef = new Postmate({url,container: frameContainerRef.current,classListArray: ["iframe"],});
- 3.Define an API for Dapps:const actionMethods = (payload) => {if (payload.action === "api名称") {// fetch datalet data = fetch('**')// callback and return the data to DAppspayload.callback({id: payload.id,data,});}}const bindPostmate = () => {postmateRef.then((child) => {child.on("message.sending.me", ({ payload }) => {if (payload?.id) {payload.callback = (data) => {child.call("message.sending.me", data);};}actionMethods(payload);});});};
- 1.Define a JS class to perform callback:class SdmCallback {static callbacks: any = {}static addCallback(id:any, cb:any) {console.log(`add callback: \nid: ${id}\ncb:${cb}\n`);this.callbacks[id] = cb};static executeCallback(id: any, error: any, value: any) {console.log(`executing callback: \nid: ${id}\nvalue: ${value}\nerror: ${error}\n`)let callback = this.callbacks[id]if (error) {console.log(`executing error callback: \nid: ${id}\nvalue: ${value}\nerror: ${error}\n`)callback(error)} else {console.log(`executing success callback: \nid: ${id}\nvalue: ${value}\nerror: ${error}\n`)callback(value)}delete this.callbacks[id]};}
- 2.Expose your model to the Parent. Property values may be functions, promises, or regular values.const postmate = new Postmate.Model({"message.sending.me": ({id, error, data}: any )=>{SdmCallback.executeCallback(id, error, data)}});
- 3.Call the Parent's APIpostmate.then((parent)=>{const { id = Math.floor((Math.random() * 200000) + 1) } = {}SdmCallback.addCallback(id, callback)parent.emit('message.sending.me', {payload: {action: 'getMyProfile',id,}});})
Last modified 1mo ago