Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@netless/app-embedded-page
Advanced tools
Netless App for embedding web apps, providing the ability to sync state and event messaging.
Readme
Netless App for embedding web apps, providing the ability to sync state and event messaging.
If you only want to insert a normal webpage into Whiteboard:
addApp
from WindowManager to add it to whiteboard.manager.addApp({
kind: "EmbeddedPage",
attributes: {
src: "<your-url>",
},
});
If you need the ability to store shared replayable states and send/receive replayable events, use @netless/app-embedded-page-sdk
:
import { createEmbeddedApp } from "@netless/app-embedded-page-sdk";
const app = await createEmbeddedApp();
// Initialize state. Only set value the key does not exist in `app.state`
app.ensureState({ count: 0 });
// Set partial state to `app.state` like `React.setState`
app.setState({ count: nextCount });
// Access states
console.log(app.state);
// Listen to state changes
app.onStateChanged.addListener(changedStates => {
if (changedStates.count) {
console.log(changedStates.count.newValue, changedStates.count.oldValue);
}
});
// Broadcast messages to other clients in the room
app.sendMessage({ type: "UPDATE_COUNT", uid: "222" });
// Listen to messages from other clients
app.onPageChanged.addListener(message => {
console.log(message);
});
If you need to let your user pass initial values dynamically when creating the app, they may set the state
attribute.
manager.addApp({
kind: "EmbeddedPage",
attributes: {
src: "<your-url>",
state: { initial: "state" }, // must be an object, will be `{}` by default
},
});
If you need whiteboard on top of your page, pass a scenePath
option:
manager.addApp({
kind: "EmbeddedPage",
options: {
scenePath: "/demo", // `scenePath` should be globally unique (across apps).
},
attributes: {
src: "<your-url>",
},
});
Important: When whiteboard drawing is enabled, the embedded page will not receive mouse events from user. Whiteboard drawing is disabled if and only if
room.state.memberState.currentApplianceName
isclicker
orselector
.
If your app has multiple pages and want to have multiple whiteboards for each page independently, you can use pages APIs from SDK.
import { createEmbeddedApp } from "@netless/app-embedded-page-sdk";
// Fake code for your page meta data
const pages = [
{ content: "page 1", pageNum: "1" },
{ content: "page 2", pageNum: "2" },
{ content: "page 3", pageNum: "3" },
];
// Fake code for rendering your page
const renderPage = pageNum => {
const page = pages.find(e => e.pageNum === pageNum);
$("#page-area").textContent = page.content;
};
const app = await createEmbeddedApp();
// Access page meta
renderPage(app.page || pages[0].pageNum);
$("#btn-to-page-2").onclick = () => {
// Switch to another page
app.setPage("2");
};
// Listen to page changes
app.onPageChanged.addListener(() => {
renderPage(app.page || pages[0].pageNum);
});
MIT @ netless
FAQs
Netless App for embedding web apps, providing the ability to sync state and event messaging.
The npm package @netless/app-embedded-page receives a total of 12 weekly downloads. As such, @netless/app-embedded-page popularity was classified as not popular.
We found that @netless/app-embedded-page demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.