Netless

Netless

  • JavaScript
  • Android
  • iOS
  • Server
  • FAQ
  • GitHub
  • 🇨🇳 中文

›Quick start

Document structure

  • Outline

Installation guide

  • SDK install
  • Version history
  • Open source
  • Debug

Quick start

  • Precondition
  • Room authentication
  • Real-time room
  • replay

Initialization

  • SDK parameters
  • Room parameters
  • Replay parameters

Features

  • Tools
  • Perspective operation
  • Page (scene) management
  • Status listen
  • Whiteboard operation
  • Custom event
  • Cursor position sync
  • Document conversion
  • Replay
  • Big class read-only
  • Plugins

Upgrade

  • SDK v2 migration

Real-time room

initialization

// TODO

Here the json is in get roomToken json object obtained in step

// For more initialization sdk parameters, please see the [initialization parameters] document
var whiteWebSdk = new WhiteWebSdk();
// For more initialization room parameters, please see the [Initialization Parameters] document
whiteWebSdk.joinRoom({
    uuid: json.msg.room.uuid,
    roomToken: json.msg.roomToken
}).then(function(room) {
    // Bind the room instance to a global variable. All subsequent API instances will directly call room
    window.room = room;
    room.bindHtmlElement(document.getElementById("whiteboard"));
})

Exit the room

room.disconnect().then(function() {
    console.log("Leave room success");
});

After leaving the room, the room instance can no longer be used. If you re-enter the room, please call joinRoom ofsdk to prevent regenerating the room instance.

Note

Exception handling

Developers need to handle the following situations manually:

  1. Whiteboard failed to join:
    • Mostly for whiteboard authentication or network connection issues. At this time, you can pop up the window to inform the user. If it is a 401 error, please check whether the room roomToken is correct.
  2. Whiteboard disconnected halfway
    • The whiteboard comes with a part of disconnection logic. When the network is interrupted, the whiteboard will try to reconnect. If the internal whiteboard fails to reconnect, it will fail.

Whiteboard size changes

When the size of the div bound by the whiteboard changes, you need to actively call therefreshViewSize method of room.

Including but not limited to:

  1. Because the browser window window changes, thediv size changes.
  2. Due to business needs, actively adjust the page layout, causing the size of the div to change. After the above situation, the developer needs to manually execute the room.refreshViewSize () method.
function refreshViewSize() {
    // Action when the room variable is exposed to a global variable.
    room && room.refreshViewSize();
};
window.addEventListener("resize", refreshViewSize);
// When the div is removed from the HTML DOM, call removeEventListener to remove the listener.

Online code

codepen source code
codepen web page

推荐

  • Initialization parameters -> room parameters:Relevant configuration can be performed when the room is initialized.
  • Status monitoring: Listen for changes in room status (members join and exit, room pages, etc.).
  • Tool operation: Use brush,rectangle, round to insertpicture.
  • Perspective operation: Control user visible range, zoom, and move behavior.
  • Whiteboard operation: Control user permissions.
  • Custom event: Enhance the whiteboard function to realize the business requirements of global notification.
  • Page operations: Realize multi-page whiteboards and switch needs.
Last updated on 1/14/2020 by 伍双
← Room authenticationreplay →
  • initialization
  • Exit the room
  • Note
    • Exception handling
    • Whiteboard size changes
  • Online code
  • 推荐
Netless
Let's interactive.
Product
ConsoleHomepageDemoGithub
Company
Join usServicePrivacy
Contact
support@netless.linkCommunity
Copyright © 2020 Netless