@zimjs/socket

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.

CDN

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";

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.

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

See the main ZIM NPM at <a href=https://www.npmjs.com/package/zimjs target=node>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()

})

SERVER

You can use our servers (like all the examples) for development. BUT... if you are running your app with lots of traffic, then please host your own version of ZIM Socket Server. Dowload the ZIP or get from NPM @zimjs/socket-server.

SOCKET EXAMPLES

ZIM Socket with Socket.IO - PATERNOIDS

ZIM Socket with Socket.IO - AVATAR

ZIM Socket with Socket.IO - EGG

ZIM Socket with Socket.IO - DIAGRAM

ZIM Socket with Socket.IO - GALLERY

ZIM Socket with Socket.IO - TURNS

ZIM Socket with Socket.IO - REMOTE

ZIM Socket with Socket.IO - CONTROL

ZIM Socket with Socket.IO - CHAT - HTML only

VIDEOS

ZIM Explore 88 - ZIM Socket in NodeJS NPM

ZIM Explore 81 - Multiuser ZIM in VR

ZIM Explore 53 - Multiuser Patternoids

ZIM Bubbling 133 - ZIM Sockets

ZIM Explore! 30. Grava (1) - Multiuser App

ZIM Explore! 30. Grava (2) - Multiuser App

ZIM Explore 4 - Sockets

ZIM

See the ZIM repository at https://github.com/danzen/zimjs for information on ZIM and open source license, etc.