The business state of the room is used to change the behavior of the whiteboard or to carry custom business logic. Note that business state and real-time room state are different concepts.
The real-time room has three dictionary-type object data structures: Global State, Member State, and Broadcast State. They are all key-value structures, and you can read and modify them arbitrarily on the client and front end.
This is a global dictionary type object data structure. It can be read and monitored by users in the entire room. Any information written by the user in this will also be seen by the entire room. You can implement custom business logic based on this feature.
Each writable user in the room has its own unique Member State, which is a dictionary type object. Its life cycle starts from when the user joins the room until the user leaves the room. After understanding its characteristics, you can freely modify it to implement custom business logic.
In addition, there are some predefined fields in Member State, and these custom fields are related to the behavior of teaching aids. details as follows.
Field name | Type | Description |
---|---|---|
currentApplianceName | string | Current teaching aid name |
strokeColor | [integer, integer, integer] | handwriting color |
strokeWidth | number | Handwriting thickness |
textSize | integer | text font size |
pencilOptions | object | Pencil tool parameters |
You may have noticed the strokeColor
field, which is used to describe the color of the current handwriting. You need R, G, B three numbers (values 0~255) to describe the color you want. (Refer to 《Three Primary Color Light Mode》Learn more.)
For example, with the following code, the color of handwriting can be changed to green.
room.setMemberState({
strokeColor: [0, 255, 0],
});
The pencil tool parameter pencilOptions
is an object, which has further substructures.
Field name | Type | Description |
---|---|---|
enableDrawPoint | boolean | Whether to allow points to be drawn: When only clicking the mouse, a point should be drawn or nothing can be drawn. |
disableBezier | boolean | Whether to prohibit drawing pencil handwriting with Bezier curve, understand 《Bezier curve》. |
sparseWidth | number | Thinning algorithm parameters |
sparseHump | number | Thinning algorithm parameters |
This is a dictionary type object, used to describe the broadcast view and the state of view following. For more details, you can refer to the 《Host and Followers|Viewing Angle and Coordinates》 chapter, here is only a brief description.
The field list and description of Broadcast State are as follows.
Name | Type | Description |
---|---|---|
mode | Enumerations: freedom, follower, broadcaster | Current viewing angle follow mode |
broadcasterId | number | userId of the current broadcaster. If there is no host, it is undefined. |
You can modify the mode
field with the following code.
room.setViewMode("broadcaster");
After joining the room in writable mode, you can insert a custom data structure. Once the custom data structure is passed in, it cannot be modified. When other people in the room get the user list, they can get the userPayload data passed in by each user in the list when they join the room. You can design custom business logic based on this feature.
Pass the following code to pass in a specific data structure when joining a room.
var userPayload = {
... // Custom data structure
};
whiteWebSdk.joinRoom({
uuid: uuid,
roomToken: roomToken,
userPayload: userPayload,
});
If you want every user who joins the room to be associated with a user in your own business database, you can bind your own User ID in userPayload
.
var userPayload = {
..., // Other custom data structures
userId: "User ID in the business database",
};
After binding the User ID of the business logic, you can query the online log of the Netless interactive whiteboard through the User ID. In this way, your business user system is associated with Netless's online log.