hello everyone i am trying to explore socket in ZIM i have requested a zimserver successfully and register an app name using email, then i tried to use this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-User Puzzle</title>
<script src="https://zimjs.org/cdn/1.3.2/createjs.js"></script>
<script src="https://zimjs.org/cdn/cat/03/zim.js"></script>
<script src="https://zimjs.org/cdn/2.3.0/socket.io.js"></script>
<script src="https://zimjs.org/cdn/zimserver_urls.js"></script>
<script src="https://zimjs.org/cdn/zimsocket_1.1.js"></script>
<script>
const scaling = "fit"; // this will resize to fit inside the screen dimensions
const width = 1024;
const height = 768;
const color = darker; // ZIM colors like green, blue, pink, faint, clear, etc.
const outerColor = dark; // any HTML colors like "violet", "#333", etc. are fine to use
const frame = new Frame(scaling, width, height, color, outerColor);
frame.on("ready", () => { // ES6 Arrow Function - like function(){}
zog("ready from ZIM Frame"); // logs in console (F12 - choose console)
const stage = frame.stage;
let stageW = frame.width;
let stageH = frame.height;
class Avatar extends Container {
constructor(shape="circle", color=pink, number=6, radius=50) {
super(stageW, stageH);
this.shape = shape;
this.color = color;
this.make(number, radius);
}
make(num, radius) {
this.disposeAllChildren(); // remove all from Container to remake
this._number = num;
this._radius = radius;
let obj;
loop(num, (i, t) => {
if (this.shape=="circle") obj = new Circle(40, this.color);
else if (this.shape=="square") obj = new Rectangle(80, 80, this.color);
else if (this.shape=="line") obj = new Rectangle(80, 10, this.color);
else if (this.shape=="triangle") obj = new Triangle(120, 60, 110, this.color);
else if (this.shape=="poly") obj = new Poly(50, 6, 0, this.color);
obj.ble("difference")
.centerReg(this)
.reg(-radius)
.loc(stageW/2, stageH/2)
.rot(i*360/t);
});
return this;
}
get number() {return this._number}
set number(value) {this._number = value; this.make(this._number, this._radius);}
get radius() {return this._radius}
set radius(value) {this._radius = value; this.make(this._number, this._radius);}
}
Avatar.shapes = ["circle", "square", "line", "triangle", "poly"];
ect .....
the example not working
i faced an error :
ZIM SOCKET Module
ZIM.js:5 Z ZIM FRAME
test36:1 Access to script at 'https://zimjs.org/016/zim_socket2' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET https://zimjs.org/016/zim_socket2 net::ERR_FAILED 404 (Not Found)
test36:39 ready from ZIM Frame
test36:101 https://socket.zimjs.org