JavaScript Web

you can integrate the ditto sdk with your web and node js projects developed using javascript and https //www typescriptlang org/ languages for the api reference, see https //software ditto live/js/ditto/4 7 1/api reference/ for a complete overview of the platforms, transports, and devices the javascript sdk supports, select javascript web from the docid\ bxacgichvbjo0xib1 lxl if you're using node js and want instructions on how to create a task app, see the docid 2zfhnxmxpocro4htygn2e and the docid\ tnfb5qllmjktmduhnztom tutorial to install the javascript sdk /#prerequisites confirm that you meet the minimum requirements /#installing dependencies add the ditto package to your environment /#integrating ditto and starting sync import and initialize ditto in your app /#running ditto authenticate with the big peer and start syncing offline prerequisites following are the minimum requirements that must be met before attempting to install ditto https //nodejs org/en/ active or maintenance long term support (lts) version linux, macos version 11+, or windows version 10+ installing dependencies install the @dittolive/ditto package into your project bash npm install @dittolive/ditto integrating ditto and starting sync import and initialize ditto, and then provide your access credentials for one time authentication with the big peer from the top most scope of your app, import ditto using async/await, initialize ditto provide your access credentials by replacing the placeholders in the snippet below with values obtained from the ditto portal replace the appid placeholder value with the app id that identifies your app in ditto replace the token placeholder value with your playground token that the big peer uses to verify your digital identity before issuing your playground certificate make sure to instantiate the ditto instance in the top most scope of your app otherwise, it may be inadvertently garbage collected and no longer accessible throughout the lifecycle of your app for instructions on how to obtain your access credentials, see docid\ ymrwjnmdrnovdt3qbptxk for an introduction to authentication in ditto, see security > docid yd5xvjr9dasxkavmeyqb import { init, ditto } from "@dittolive/ditto"; let ditto; async function main() { await init() ditto = new ditto({ type "onlineplayground", appid "your app id", token "your playground token" }) // enable mutating dql statements and ensure you only sync with peers using version 4 0 or higher of the ditto sdk await ditto disablesyncwithv3() // initialize the sync process ditto startsync() } main() running ditto you can now run your basic snippet using node and should not see any errors bash node index js add a sync subscription add a sync subscription to receive updates on documents that match its query from connected peers in the docid\ nuxtqirzyk9gye59ixzy4 use registersubscription() in the ditto sync namespace to add a sync subscription import { init, ditto } from '@dittolive/ditto' let ditto async function main () { await init() ditto = new ditto({ type "onlineplayground", appid "your app id", token "your playground token" }) // enable mutating dql statements and ensure you only sync with peers using version 4 0 or higher of the ditto sdk await ditto disablesyncwithv3() // initialize the sync process ditto startsync() // add a sync subscription ditto sync registersubscription(` select from tasks where isdeleted = false`) } main() listening to changes now that your app is ready to receive updates to documents from other peers, you might want to react to those changes as soon as they happen for this you can use the registerobserver() method on ditto store the passed in callback closure is invoked by ditto everytime it registers new changes to documents matching the query for a step by step demonstration of how to create a basic task app, see the docid\ xx32axjdeiwshidu4ob4o tutorial import { init, ditto } from '@dittolive/ditto' let ditto async function main () { await init() ditto = new ditto({ type "onlineplayground", appid "your app id", token "your playground token" }) // enable mutating dql statements and ensure you only sync with peers using version 4 0 or higher of the ditto sdk await ditto disablesyncwithv3() // initialize the sync process ditto startsync() // add a sync subscription ditto sync registersubscription(` select from tasks where isdeleted = false`) // add a store observer ditto store registerobserver(` select from tasks where isdeleted = false`, (result) => { console log(`tasks have been updated ${result items}`) } ) const newtask = { iscompleted false, isdeleted false, body "hello world!" } // insert a new document await ditto store execute(` insert into tasks documents (\ newtask)`, { newtask }) } main()