Before that, you need to register an enterprise account in Netless's management console and create an application. Then get the
App Identifier
and the app'sSDK Token
.
You can read 《Project and Authority》 to understand the specific operation. After success, you will get the following content.
# App Identifier:
-_-AcIBWEeqEdX1jHT9ZPg/i25mN7NEhbum6g
# SDK Token:
NETLESSSDK_YWs9UU9JSkJobEZfYlBPLXdNeSZub25jZT0xNTg3MDkyMzUxMTQ0MDAmcm9sZT0wJnNpZz1mYmUzOTI3MjhkZmVhNTc4MzllZTdhZMxDYMYNzK1k1MxDymYgf1zYmj2RhZYMzY2RhZYMZYZYZYZYXD
This paragraph is just an example. You need to do it yourself to get your content.
We will start a React project using the library create-react-app
. Open Terminal, switch to the appropriate folder, and execute the following commands.
npm
# npm init <initializer> is available in npm 6+
$ npm init react-app my-board
npx
# npx from npm 5.2+ or higher
$ npx create-react-app my-board
yarn
# yarn create is available in Yarn 0.25+
$ yarn create react-app my-board
After the execution is complete, a directory named my-board
will be created in the current directory. In that directory, it will generate the initial project structure and install dependencies:
my-board
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
Enter the my-board
folder and execute the following commands in Terminal.
npm
npm install white-react-sdk
yarn
yarn add white-react-sdk
Open the my-board/src/App.js
file with an editor and add more code to the file until all the business logic codes of the interactive whiteboard application are written.
Remember to replace the 9th and 11th lines of the following code with the content you prepared in advance
import'./App.css';
import React from'react';
import {WhiteWebSdk, RoomWhiteboard} from "white-react-sdk";
class App extends React.Component {
static sdkToken = "Read "Apps and Permissions" to obtain SDK Token";
static whiteWebSdk = new WhiteWebSdk({
appIdentifier: "Read "Apps and Permissions" to get AppIdentifier",
});
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
var self = this;
var roomUUID = "";
this.createRoom().then(function(roomJSON) {
// The room is created successfully, get the roomJSON describing the content of the room
roomUUID = roomJSON.uuid;
return self.createRoomToken(roomUUID);
}).then(function (roomToken) {
// The roomToken of the room has been checked out
return App.whiteWebSdk.joinRoom({
uuid: roomUUID,
roomToken: roomToken,
});
}).then(function(room) {
self.setState({room: room});
}).catch(function(err) {
// failed to create room
console.error(err);
});
}
createRoom() {
var url = "https://shunt-api.netless.link/v5/rooms";
var requestInit = {
method: "POST",
headers: {
"content-type": "application/json",
"token": App.sdkToken,
"region": "cn-hz",
},
};
return window.fetch(url, requestInit).then(function(response) {
return response.json();
});
}
createRoomToken(roomUUID) {
var url = "https://shunt-api.netless.link/v5/tokens/rooms/" + roomUUID;
var requestInit = {
method: "POST",
headers: {
"content-type": "application/json",
"token": App.sdkToken,
"region": "cn-hz",
},
body: JSON.stringify({
"lifespan": 0, // indicates that the Room Token will never expire
"role": "admin", // indicates that Room Token has Admin authority
}),
};
return window.fetch(url, requestInit).then(function(response) {
return response.json();
});
}
render() {
var whiteboardView = null;
// Creating and joining a room is an asynchronous operation.
// If this.state.room is not ready, the whiteboard will not be displayed.
if (this.state.room) {
whiteboardView = (
<RoomWhiteboard room={this.state.room}
style={{
width: "100%",
height: "100vh",
}}/>
);
}
return (
<div className="App">
{whiteboardView}
</div>
);
}
}
export default App;
Open Terminal in the my-board
folder and execute the following command to start the React application.
npm
npm start
yarn
yarn start
When the application starts successfully, it will automatically open the browser and visit the webpage of http://localhost:3000
. If the browser does not automatically open this web page, you can also manually open the browser to visit this address. Everything goes well and you will see a blank page. Use the mouse to write and draw on the page, if everything goes well, you can see the handwriting.