Netless

Netless

  • 通用文档
  • 常见问题
  • JavaScript
  • Android
  • iOS
  • Server
  • GitHub
  • 🇬🇧 English

›快速开始

接入准备

  • 前提条件
  • 开源项目
  • 快速调试
  • 版本历史

快速开始

  • 原生 JavaScript
  • React

进阶教程

  • 安装
  • 实时房间
  • 教具
  • PPT 与页面管理
  • 视角
  • 禁止操作
  • 自定义行为
  • 回放

初始化参数

  • SDK参数
  • 房间参数
  • 回放参数

功能介绍

  • 教具操作
  • 视角操作
  • 页面(场景)管理
  • 状态监听
  • 白板操作
  • 自定义事件
  • 鼠标位置同步
  • 文档转换
  • 回放功能
  • 大课只读
  • 撤回与重做
  • 集成白板插件

迁移与升级

  • 2.9.0 迁移指南
  • 2.8.0 迁移指南

React

本章介绍使用 React 以及相关工具接入 White SDK,并开发一个互动白板应用。阅读本章前,你需要对 JavaScript 和 React 有基本了解。

在此之前,你需要在 Netless 的管理控制台注册一个企业账号,并创建一个应用。然后获取此应用中的 App Identifier 和,并生成此应用的 SDK Token。

准备工作

你可以阅读《应用与权限》来了解具体操作。成功之后,你会获得如下内容。

# App Identifier:
-_-AcIBWEeqEdX1jHT9ZPg/i25mN7NEhbum6g

# SDK Token:
NETLESSSDK_YWs9UU9JSkJobEZfYlBPLXdNeSZub25jZT0xNTg3MDkyMzUxMTQ0MDAmcm9sZT0wJnNpZz1mYmUzOTI3MjhkZmVhNTc4MzllZTdhNWQ3N2RhZjdjNjkyZmUwNzk1Y2M2MGFhMzE1Y2YxZDY1YmMxODkxNmRi

这段内容只是举个例子。你需要亲自操作获取自己的内容。

启动项目

我们将使用 create-react-app 这个库启动一个 React 项目。打开 Terminal,切换到合适的文件夹中,执行如下命令。

npm
npx
yarn
# npm init <initializer> 在 npm 6+ 中可用
$ npm init react-app my-board
# npx 来自 npm 5.2+ 或更高版本
$ npx create-react-app my-board
# yarn create 在 Yarn 0.25+ 中可用
$ yarn create react-app my-board

执行完毕后,会在当前目录中创建一个名为 my-board 的目录。在该目录中,它将生成初始项目结构并安装依赖项:

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

安装

进入到 my-board 文件夹中,在 Terminal 中执行如下命令。

npm
yarn
npm install white-react-sdk
yarn add white-react-sdk

实现互动白板应用

用编辑器打开 my-board/src/App.js 文件,在该文件中加入更多代码,直到写完互动白板应用的全部业务逻辑代码。

记得将下列代码的第 9 行和第 11 行替换成你提前准备好的内容

import './App.css';

import React from 'react';
import { WhiteWebSdk, RoomWhiteboard } from "white-react-sdk";

class App extends React.Component {

    static sdkToken = "阅读《应用与权限》获取 SDK Token";
    static whiteWebSdk = new WhiteWebSdk({
        appIdentifier: "阅读《应用与权限》获取 AppIdentifier",
    });

    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        var self = this;
        var roomUUID = "";

        this.createRoom().then(function(roomJSON) {
            // 房间创建成功,获取描述房间内容的 roomJSON
            roomUUID = roomJSON.uuid;
            return self.createRoomToken(roomUUID);

        }).then(function (roomToken) {
            // 房间的 roomToken 已签出
            return App.whiteWebSdk.joinRoom({
                uuid: roomUUID,
                roomToken: roomToken,
            });
        }).then(function(room) {
            self.setState({room: room});

        }).catch(function(err) {
            // 创建房间失败
            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,
            },
        };
        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,
            },
            body: JSON.stringify({
                "lifespan": 0, // 表明 Room Token 永不失效
                "role": "admin", // 表明 Room Token 有 Admin 的权限
            }),
        };
        return window.fetch(url, requestInit).then(function(response) {
            return response.json();
        });
    }

    render() {
        var whiteboardView = null;

        // 创建并加入房间是一个异步操作。
        // 如果 this.state.room 还没准备好,则不显示白板。
        if (this.state.room) {
            whiteboardView = (
                <RoomWhiteboard room={this.state.room}
                                style={{
                                    width: "100%",
                                    height: "100vh",
                                }}/>
            );
        }
        return (
            <div className="App">
                {whiteboardView}
            </div>
        );
    }
}

export default App;

运行

在 my-board 文件夹下打开 Terminal,执行如下命令启动 React 应用。

npm
yarn
npm start
yarn start

当应用启动成功后,会自动打开浏览器,并访问 http://localhost:3000 这个网页。如果浏览器没有自动打开这个网页,你也可以手动打开浏览器访问这个地址。一切顺利的画,你将看到一个空白页面。用鼠标在该页面上写写画画,若一切顺利,可以看到笔迹。

js-native

Last updated on 6/29/2020 by Tao Zeyu
← 原生 JavaScript安装 →
  • 准备工作
  • 启动项目
  • 安装
  • 实现互动白板应用
  • 运行
Netless
接入即互动
产品
管理控制台官网网站Demo 体验Github
公司
加入我们服务条款隐私协议
联系方式
support@netless.link社区
Copyright © 2020 Netless