ZIM 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:
// 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.
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.
import zim from "https://zimjs.org/cdn/016/zim_socket";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.
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()
})See the ZIM repository at https://github.com/danzen/zimjs for information on ZIM and open source license, etc.