Multiuser CLient with Socket.IO for the ZIM JavaScript Canvas Framework. Also see @zimjs/socket-server if not using the ZIM Server for the server-side.
npm install @zimjs/socketZIM Socket is a helper module for the ZIM JavaScript Canvas Framework that works with Socket.IO.
ZIM Socket uses a simple yet powerful multiuser paradigm:
``JavaScript
`
// you send your property values
{x:10, y:30}
`JavaScript
`
// 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.
Usually we use ES Modules to bring in ZIM and if we want Sockets then use we the code below - see the starting template at the top of the https://zimjs.com/code page.
JavaScript
import zim from "https://zimjs.org/cdn/016/zim_socket";
`
NPM
This repository holds the NPM ZIM socket package so you can install from @zimjs/socket on NPM. It includes the socket.io-client package as a dependency. The ZIM package must be installed to work.
`JavaScript
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:
`JavaScript
// 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()
})
``
See the ZIM repository at https://github.com/danzen/zimjs for information on ZIM and open source license, etc.