Synchronizace aplikací mezi display klienty
Synchronizace aplikací mezi display klienty
Rozebereme synchronizaci na příkladu aplikací, kterou nazveme runnung_square (běžící čtverec). Barevný čtverec se hýbá uvnitř okna. Pokud se čtverec srazí se stěnou, náhodně změní svůj směr pohybu a barvu. Vytvoříme složku running_square a soubory running_square.js a instructions.json.
instructions.json
{
"main_script": "running_square.js",
"width": 400,
"height": 400,
"animation": true,
"title": "Running Square"
}running_square.js
var running_square = SAGE2_App.extend({
init: function (data) {},
draw: function (date) {},
drawSquare: function () {},
nextPoint: function (dt) {},
newVector: function () {}
});Funkce init(data) inicializuje okno a proměny.
init: function (data) {
// Inicializujeme Canvas
this.SAGE2Init("canvas", data);
// Inicializujeme promeny
this.ctx = this.element.getContext("2d");
// Souradnice ctverce [x, y]
this.coordinates = [0, 0];
// Smer pohybu
this.vector = [-1, 0];
// Rychlost pohybu
this.speed = 125;
// Velikost strany čtverce
this.squareSize = 50;
// Soucasna barva ctverce
this.color = "blue";
// Vsechny mozne barvy ctverce
this.colors = ["red", "green", "blue"];
},draw(date) volá funkce, které se zabývají kreslením a pohybem čtvrce.
draw: function (date) {
// Kreslime pozadi
this.ctx.fillStyle = "white";
this.ctx.fillRect(0, 0, this.element.width, this.element.height);
// Kreslime ctverec
this.drawSquare();
// Posouvame ctverec nebo menime smer pohybu
this.nextPoint(this.dt);
},Kreslením čtverce se zabývá funkce drawSquare().
drawSquare: function () {
this.ctx.fillStyle = this.color;
this.ctx.fillRect(this.coordinates[0],
this.coordinates[1],
this.squareSize,
this.squareSize);
},Funkce nextPoint(dt) vypočítá souřadnice čtverce.
nextVector: function (dt) {
//Vypocitame novу souradnice ctverce
let new_x = this.coordinates[0] + this.vector[0] * dt * this.speed;
let new_y = this.coordinates[1] + this.vector[1] * dt * this.speed;
// Pokud se ctverec srazí se stěnou, zmeni smer pohybu, jinak ukladame nove souradnice
if (new_x + this.squareSize > this.element.width ||
new_y + this.squareSize > this.element.width ||
new_x < 0 || new_y < 0) {
// Vola funkkce pro vypocet noveho smeru pohybu
this.newVector();
}
else {
// Ukladame nove souradnice
this.coordinates[0] = new_x;
this.coordinates[1] = new_y;
}
}Pokud zjistí, že se srazil se stěnou, Zavolá funkce newVector(), která vypočté nový směr a vyberé novou barvu.
newVector: function () {
// Vypocitame novy smer
x = Math.random() * 2 * Math.PI;
this.vector[0] = Math.cos(x);
this.vector[1] = Math.sin(x);
// Ukladame ovu barvu
this.color = this.colors[Math.floor(Math.random() * this.colors.length)];
}Pokud spustíte takový program, zjistité, že není synchronizován mezi display klienty. Pro synchronizaci potřebujeme program trochu přepsát. Za prvé přídáme do souboru instructions.json parametr load.
"load": {
"coordinates": [ 0, 0 ],
"color": "red"
},Do load předáme objekt ze všemi parametry, které budé server synchronizovat. K takovým parametrům můžete v js souboru mít přístup přes objekt state (Např. this.state.color). Z toho důvodu už nemusíme je inicializovat ve funkci init(data).
Teď už mate aplikaci synchronizovanou. Mezi display klienty jeden budé Master klientem, což znamená, že tenhle klient budé generovat a odesílat parametry ostatním klientům. Zjistit, který klient je Master můžete pooci funkce this.isMaster(). Tato funkce vrací true když volána Master klientem.
Update parametrů probíhá automaticky bez ohledu na to, jestli byly synchronizované parametry změněny. Pokud ale bude potřeba volát update ručně musíte použit funkce this.SAGE2Sync(). Příjimá jako parametr true nebo false. V obou připadech parametry budou aktualizované na display klientech serveru. Pokud ale nějaký jiný web používá naše aplikace a chceme aktualizovat parametry, musíme vybrat true.
Po každém updatu se volá funkkce load()
load: function () {
// neco
},Musíte být opatrný při volání funkce SAGE2Sync() uvnítř load(), protože to muže přivest k nekonečnemu ciklu updatů.