Clone project
# Clone main repo
[email protected]:phuong/co-browsing-demo.git
# Clone submodule
cd co-browsing-demo
git submodule update --init --recursive
Start api server (you can use current vs environment)
uvicorn api:app --reload --port 8011 --host 0.0.0.0
Build the bundle
cd syncit/packages/ui
npm install
npm run-script build
cd public
Edit app.html: update new transporter
new syncit.App({
target: document.body,
props: {
createTransporter({ role, uid }) {
return new syncitTransporter.WebSocketTransporter({
role,
uid,
url: 'ws://localhost:8011/ws/any_client_id'
});
},
},
});
Edit the embed.html and update to the new transporter
new syncit.Embed({
target: document.body,
props: {
createTransporter({ role, uid }) {
return new syncitTransporter.WebSocketTransporter({
role,
uid,
url: 'ws://localhost:8011/ws/any_client_id'
});
},
},
});
Open app.html and embed.html in browsers and play. If you get issue with CORS, please use Node serve or python simple http server to serve public directory as a "localhost" website.
To embed code to any random test website. Please serve public
as a website (Accessable via http, for example i used serve at port 3001) and add
following code into test website.
<link rel="stylesheet" href="http://localhost:3001/bundle.css" />
<script src="https://cdn.jsdelivr.net/npm/@syncit/[email protected]/dist/index.js"></script>
<script src="http://localhost:3001/bundle.js"></script>
<script>
new syncit.Embed({
target: document.body,
props: {
createTransporter({ role, uid }) {
return new syncitTransporter.WebSocketTransporter({
role,
uid,
url: 'ws://localhost:8011/ws/any_client_id'
});
},
},
});
</script>