Real-time room · Netless

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:

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.
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:

Because the browser window window changes, thediv size changes.
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