// you send your property values
{x:10, y:30}

// you receive objects of other people's values
{id:{x:20, y:40}, id2:{x:60, y:50}}

Using this technique, we no longer have to code on the server. ZIM Server handles all.

import zim from "https://zimjs.org/cdn/016/zim_socket";

import zim from "zimjs"
import { Socket } from "@zimjs/socket"

See the main ZIM NPM at ZIM package for starting an app with Vite or using another framework such as React, Vue, Angular, or Svelte. Once you have a project going, here is some sample test code for inside the ZIM Frame() ready event function:

// import zim and {socket} as above
// zimSocketURL will use our server for the ZIM Socket Server
// see the @zimjs/socket-server package for using your own server
// this simple example is included in the public folder of that package

const socket = new Socket(zimSocketURL, "test")
socket.on("ready", () => {

    const circle = new Circle().center();

    // check to see if someone has already moved the circle
    const latestX = socket.getLatestValue("x")
    const latestY = socket.getLatestValue("y")
    if (latestX != null) {
        circle.loc(latestX, latestY)
    }

    S.on("stagemousedown", () => {
        circle.animate({ x: F.mouseX, y: F.mouseY }, 1, "backOut")
        socket.setProperties({ x: F.mouseX, y: F.mouseY })
    })
    socket.on("data", (d) => {
        if (d.x != null) circle.animate({ x: d.x, y: d.y }, 1, "backOut")
    })

    S.update()

})