# JavaScript client SDK
This quickstart is for using Sending.Network (SDN) on the client side in the browser, or front-end. Let's explore how to make a simple Sending.Network client with the ability to sync messages, create a chat room, and post messages in the room.
When you complete this quickstart, you’ll have a fully running application that can send and receive messages from the comfort of your own web browser.
## Prerequisites
Before you start, make sure you have the following dependencies installed.
## Build the Client
### Step 1. Install
Use *npm* or *yarn* to install the sdk package.
```sh
npm i sendingnetwork-js-sdk
# Or
yarn add sendingnetwork-js-sdk
```
Then you are free to import the package in your code:
```javascript
import sdk from "sendingnetwork-js-sdk";
```
### Step 2. Configure Developer Key
You will need a developer key to access the Edge Network. For further insight into the mechanism and to request a developer key, please consult the provided guide [here](https://sending-network.gitbook.io/sending.network/sdk-documentation/developer-key).
Kindly establish a secure key server for the proper management of your developer key. Additionally, it is necessary to outline the following API, which enables the widget to send a challenge to be signed by the key server.
To successfully complete the key verification, you need to provide a function called `signWithDevKey`. This function should be attached to the `window` object and will be called during widget login. Here is a snippet of code for your reference:
```javascript
// Input Parameters: { message: string }
// Output Parameters: signature string
signWithDevKey = async ({ message }: any) => {
if (!message) return;
// Make a request to your backend API to sign the message and retrieve the signature.
// Note: This example demonstrates the concept; implement this API in your backend.
const response = await fetch(
'https://YOUR_KEY_SERVER/_api/appservice/sign',
{
method: 'POST',
body: JSON.stringify({ message }),
},
);
const { signature } = await response.json();
return signature;
};
// Pseudo Code for Login Flow
login = async () => {
// Other code logic, omitted here...
const { message: lMessage, updated, random_server } = await this._client.preDiDLogin1(preloginParams);
const devSign = await window.signWithDevKey({message: lMessage});
const loginParams = {
// Other parameters, omitted here...
identifier: {
// Other parameters, omitted here...
app_token: devSign
}
}
const { access_token, user_id } = await this._client.DIDLogin(loginParams);
// Other code logic, omitted here...
}
```
### Step 3. Register
Now, it's time to register a DID, creating a unique identifier in the P2P messaging network.
You can connect to a public node by configuring the `baseUrl` with **.
```javascript
import sdk from "sendingnetwork-js-sdk";
const baseUrl = 'https://portal0101.sending.network'
const client = sdk.createClient({
baseUrl,
});
const login = async () => {
const prefix = "did:pkh:eip155:1:";
const accounts = await window.ethereum.request({
method: "eth_requestAccounts",
});
const [address] = accounts;
const { data: [did] } = await client.getDIDList(address);
const preloginParams = did ? { did } : { address: `${prefix}${address}` };
const { message: lMessage, updated, random_server } = await client.preDiDLogin1(preloginParams);
const sign = await window.ethereum.request({
method: "personal_sign",
params: [lMessage, address, ""],
});
const devSign = signWithDevKey({message: lMessage});
const identifier = {
did,
address: did || `${prefix}${address}`,
token: sign,
app_token: devSign,
message: lMessage
};
const deviceId = localStorage.getItem("mx_device_id") || null;
const loginParams = {
type: "m.login.did.identity",
updated,
identifier,
random_server,
device_id: deviceId,
initial_device_display_name: this.defaultDeviceDisplayName
};
const { access_token, user_id } = await this._client.DIDLogin(loginParams);
localStorage.setItem("sdn_access_token", access_token);
localStorage.setItem("sdn_user_id", user_id);
localStorage.setItem("sdn_user_address", address);
}
```
### Step 4. Sync and Listen
The following code sets up the client that connects to the server. The client will start syncing and then listen for the response to get the latest state from the server:
```javascript
client.startClient();
client.once('sync', function(state, prevState, res) {
console.log(state); // state will be 'PREPARED' when the client is ready to use
});
```
Once the sync is complete, you can add listeners for events as follows.:
```javascript
client.on("event", function(event){
console.log(event.getType());
console.log(event);
})
```
You can listen to all incoming events, but that would be too much data for our simple application. Instead, let's listen to events that happens after you join a chat room:
```javascript
client.on("Room.timeline", function(event, room, toStartOfTimeline) {
console.log(event.event);
});
```
Call `client.stopClient` at the end of the component's lifecycle. For example:
```javascript
useEffect(() => {
client.startClient();
return () => client.stopClient();
}, [])
```
### Step 5. Create a room
Create a chat room and give it a name.
```javascript
client.createRoom({
name:"YOUR_ROOM_NAME",
}).then((room_info) => {
console.log(room_info);
}).catch(() => {
console.log(err);
});
```
### Step 6. Invite users to the room
To invite a friend, just call the `invite()` method and specify the user id and the chat room id.
```javascript
var room_id = "THE_ROOM_ID";
var user_id = "THER_USER_ID_YOU_WANT_INVITE";
client.invite(room_id, user_id).then(() => {
//console.log("invite user successfully");
}).catch((err) => {
console.log(err);
});
```
### Step 7. Join the room with room ID
You can also apply to join a room by specifying the room ID.
```javascript
client.joinRoom($roomId).then(room=>{
//console.log("joined successfully");
}).catch((err) => {
console.log(err);
});
```
### Step 8. Post messages to a room
To post a message, create a content object and specify a target room.
```javascript
var room_id = "THE_ROOM_ID";
var content = {
"body": "Hello World",
"msgtype": "m.text"
};
client.sendEvent(room_id, "m.room.message", content, "").then((res) => {
//console.log("post message successfully");
}).catch((err) => {
console.log(err);
})
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://sending-network.gitbook.io/sending.network/sdk-documentation/javascript-client-sdk.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.