Mixing
How can I send canvas information to be executed in another browser over nodejs?
0
I have a javascript programm, which uses canvas to draw:
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
<meta charset="utf-8" />
<title>digitale Tafel</title>
<div id="spielfeld"></div>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="static/jquery.min.js"></script>
<script src="static/draw.js"></script>
</body>
</html>
javascript
var malen = {
gemaltBis: 0,
koordinaten: {},
menu: {
farben: [
'white',
'blue',
'red',
'black',
'darkgreen',
'yellow',
'orange',
'purple',
'saddlebrown',
'grey',
'pink'
],
breiten: [
3,
6,
9,
12,
15
]
},
punkte: ,
letztePunkte: ,
serverPunkte: 0,
vomServer:
}
malen.durchmesser = 3;
malen.colorStatus = 'black';
$('<div>').addClass('leiste').css({
position: 'fixed',
top: -1+'px',
left: 70+'px',
width: 625+'px',
height: 40+'px',
border: 1+'px solid grey',
backgroundColor: 'lightgrey',
borderBottomLeftRadius: 20+'px',
borderBottomRightRadius: 20+'px',
}).appendTo('#spielfeld');
for (color in malen.menu.farben) {
$('<div>').addClass('farben').css({
position: 'fixed',
top: 9+'px',
left: 100+color*30+'px',
width: 20+'px',
height: 20+'px',
backgroundColor: malen.menu.farben[color],
borderRadius: 15+'px',
}).click(farbeÄndern).appendTo('#spielfeld');
}
for (breite in malen.menu.breiten) {
$('<div>').addClass('esels').css({
border: 1+'px solid grey',
position: 'fixed',
top: 2+'px',
left: 450+breite*45+'px',
width: 40+'px',
height: malen.menu.breiten[breite]+'px',
backgroundColor: 'lightgrey',
borderRadius: 15+'px',
}).click(dickeÄndern).appendTo('#spielfeld');
}
function farbeÄndern() {
$('.farben').css({'border':0+'px'});
malen.colorStatus = this.style.backgroundColor;
document.getElementsByClassName('farben')[malen.menu.farben.indexOf(malen.colorStatus)].style.border = 2+'px solid';
this.style.borderColor = this.style.backgroundColor;
$('.esels').eq(malen.menu.breiten.indexOf(malen.durchmesser)).css({backgroundColor: malen.colorStatus,});
}
function dickeÄndern() {
$('.esels').css({'background-color':'lightgrey'});
malen.durchmesser = ((parseFloat(this.style.left)-450)/45+1)*3;
this.style.backgroundColor = malen.colorStatus;
}
$('.farben').eq(malen.menu.farben.indexOf('black')).css({border: 2+'px solid',})
$('.esels').eq(malen.menu.breiten.indexOf(3)).css({backgroundColor: malen.colorStatus});
var canvas = document.getElementById('canvas');
malen.ctx = canvas.getContext('2d');
$(window).resize(function () {
canvas.width = window.innerWidth;
canvas.height = window.innerWidth;
for (sache in malen.menu.breiten) {
$('.esels').eq(sache).css({height: malen.menu.breiten[sache]*canvas.width/500+'px'})
}
draw(0);
}).resize();
$('#canvas').on('mousedown', function (e) {
captureMousePoint(e)
$('#canvas').on('mousemove', captureMousePoint);
}).on('mouseup', function () {
$('#canvas').off('mousemove', captureMousePoint);
})
function captureMousePoint(e){
var einPunkt = {
x: 1 / canvas.width * e.pageX,
y: 1 / canvas.width * e.pageY,
radius: malen.durchmesser/2,
farbe: malen.colorStatus,
};
malen.punkte.push(einPunkt);
malen.letztePunkte.push(einPunkt);
draw(malen.punkte.length - 1);
}
function draw(since) {
var len = malen.punkte.length;
for (var i=since; i< len; i++) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.punkte[i].farbe;
malen.ctx.arc(
malen.punkte[i].x * canvas.width,
malen.punkte[i].y * canvas.width,
malen.punkte[i].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
}
function anServerSenden() {
console.log("anServerSenden", malen.letztePunkte.length);
if (malen.letztePunkte.length == 0) {
window.setTimeout(anServerSenden, 1000);
return;
}
$.ajax({
method: 'POST',
url: '/data/test',
headers: { 'Content-Type': 'application/json' },
data: JSON.stringify(malen.letztePunkte),
success: function(fromServer){
malen.vomServer = fromServer;
console.log("Antwort vom Server", malen.vomServer);
window.setTimeout(anServerSenden, 1000);
}
});
malen.letztePunkte = ;
}
vomServerMalen();
function vomServerMalen() {
for (item in malen.vomServer.punkte) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.vomServer.punkte[item].farbe;
malen.ctx.arc(
malen.vomServer.punkte[item].x * canvas.width,
malen.vomServer.punkte[item].y * canvas.width,
malen.vomServer.punkte[item].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
window.setTimeout(vomServerMalen, 1000);
}
anServerSenden();
And I want it to be an application, which can be used in a server-client-application for multiple clients. Therefor I am using nodejs and try to send the stats of every point I draw, in an array, so that another client can get these informations for every point and draw exactly this on his browser.
nodejs
var http = require("http");
var fs = require('fs');
function dateiLesen(dateiName, naechsteFunktion) {
fs.readFile(dateiName, function (err, data) {
if (err) {
naechsteFunktion("Kann nicht geladen werden: "+dateiName);
} else {
naechsteFunktion(data);
}
});
}
var listeGesamt = ;
http.createServer(function (request, response) {
console.log(request.url);
console.log(request.method, request.url);
console.log(" ", request.url.substring(1));
var found;
if (request.url === '/') {
request.url = '/draw.html';
// redirect auf eine BildId → über HTTP-Header im Response
} else if (found = request.url.match(/^/static/([^/]+)$/)) {
console.log(found);
dateiLesen(found[1], function(data){ response.end(data); })
} else if (found = request.url.match(/^/data/(w+)$/)) {
var daten = '';
response.setHeader('Content-Type', 'application/json');
request.on('data', function (chunk) {
daten += chunk;
}).on('end', function (){
// alle Daten geladen
liste = JSON.parse(daten);
listeGesamt = listeGesamt.concat(liste);
console.log("alle Daten: ", liste)
response.end(JSON.stringify({
"Datensaetze empfangen": liste.length,
serverListe: listeGesamt.length,
punkte: liste
}));
})
} else if (/^/w+$/.test(request.url)) {
dateiLesen('draw.html', function(data){ response.end(data); })
} else {
response.end("Kann Anfrage nicht bearbeiten");
}
}).listen(8081);
How can I make another browser to draw these points, that are send in the array 'liste'?
javascript node.js
add a comment |
0
I have a javascript programm, which uses canvas to draw:
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
<meta charset="utf-8" />
<title>digitale Tafel</title>
<div id="spielfeld"></div>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="static/jquery.min.js"></script>
<script src="static/draw.js"></script>
</body>
</html>
javascript
var malen = {
gemaltBis: 0,
koordinaten: {},
menu: {
farben: [
'white',
'blue',
'red',
'black',
'darkgreen',
'yellow',
'orange',
'purple',
'saddlebrown',
'grey',
'pink'
],
breiten: [
3,
6,
9,
12,
15
]
},
punkte: ,
letztePunkte: ,
serverPunkte: 0,
vomServer:
}
malen.durchmesser = 3;
malen.colorStatus = 'black';
$('<div>').addClass('leiste').css({
position: 'fixed',
top: -1+'px',
left: 70+'px',
width: 625+'px',
height: 40+'px',
border: 1+'px solid grey',
backgroundColor: 'lightgrey',
borderBottomLeftRadius: 20+'px',
borderBottomRightRadius: 20+'px',
}).appendTo('#spielfeld');
for (color in malen.menu.farben) {
$('<div>').addClass('farben').css({
position: 'fixed',
top: 9+'px',
left: 100+color*30+'px',
width: 20+'px',
height: 20+'px',
backgroundColor: malen.menu.farben[color],
borderRadius: 15+'px',
}).click(farbeÄndern).appendTo('#spielfeld');
}
for (breite in malen.menu.breiten) {
$('<div>').addClass('esels').css({
border: 1+'px solid grey',
position: 'fixed',
top: 2+'px',
left: 450+breite*45+'px',
width: 40+'px',
height: malen.menu.breiten[breite]+'px',
backgroundColor: 'lightgrey',
borderRadius: 15+'px',
}).click(dickeÄndern).appendTo('#spielfeld');
}
function farbeÄndern() {
$('.farben').css({'border':0+'px'});
malen.colorStatus = this.style.backgroundColor;
document.getElementsByClassName('farben')[malen.menu.farben.indexOf(malen.colorStatus)].style.border = 2+'px solid';
this.style.borderColor = this.style.backgroundColor;
$('.esels').eq(malen.menu.breiten.indexOf(malen.durchmesser)).css({backgroundColor: malen.colorStatus,});
}
function dickeÄndern() {
$('.esels').css({'background-color':'lightgrey'});
malen.durchmesser = ((parseFloat(this.style.left)-450)/45+1)*3;
this.style.backgroundColor = malen.colorStatus;
}
$('.farben').eq(malen.menu.farben.indexOf('black')).css({border: 2+'px solid',})
$('.esels').eq(malen.menu.breiten.indexOf(3)).css({backgroundColor: malen.colorStatus});
var canvas = document.getElementById('canvas');
malen.ctx = canvas.getContext('2d');
$(window).resize(function () {
canvas.width = window.innerWidth;
canvas.height = window.innerWidth;
for (sache in malen.menu.breiten) {
$('.esels').eq(sache).css({height: malen.menu.breiten[sache]*canvas.width/500+'px'})
}
draw(0);
}).resize();
$('#canvas').on('mousedown', function (e) {
captureMousePoint(e)
$('#canvas').on('mousemove', captureMousePoint);
}).on('mouseup', function () {
$('#canvas').off('mousemove', captureMousePoint);
})
function captureMousePoint(e){
var einPunkt = {
x: 1 / canvas.width * e.pageX,
y: 1 / canvas.width * e.pageY,
radius: malen.durchmesser/2,
farbe: malen.colorStatus,
};
malen.punkte.push(einPunkt);
malen.letztePunkte.push(einPunkt);
draw(malen.punkte.length - 1);
}
function draw(since) {
var len = malen.punkte.length;
for (var i=since; i< len; i++) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.punkte[i].farbe;
malen.ctx.arc(
malen.punkte[i].x * canvas.width,
malen.punkte[i].y * canvas.width,
malen.punkte[i].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
}
function anServerSenden() {
console.log("anServerSenden", malen.letztePunkte.length);
if (malen.letztePunkte.length == 0) {
window.setTimeout(anServerSenden, 1000);
return;
}
$.ajax({
method: 'POST',
url: '/data/test',
headers: { 'Content-Type': 'application/json' },
data: JSON.stringify(malen.letztePunkte),
success: function(fromServer){
malen.vomServer = fromServer;
console.log("Antwort vom Server", malen.vomServer);
window.setTimeout(anServerSenden, 1000);
}
});
malen.letztePunkte = ;
}
vomServerMalen();
function vomServerMalen() {
for (item in malen.vomServer.punkte) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.vomServer.punkte[item].farbe;
malen.ctx.arc(
malen.vomServer.punkte[item].x * canvas.width,
malen.vomServer.punkte[item].y * canvas.width,
malen.vomServer.punkte[item].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
window.setTimeout(vomServerMalen, 1000);
}
anServerSenden();
And I want it to be an application, which can be used in a server-client-application for multiple clients. Therefor I am using nodejs and try to send the stats of every point I draw, in an array, so that another client can get these informations for every point and draw exactly this on his browser.
nodejs
var http = require("http");
var fs = require('fs');
function dateiLesen(dateiName, naechsteFunktion) {
fs.readFile(dateiName, function (err, data) {
if (err) {
naechsteFunktion("Kann nicht geladen werden: "+dateiName);
} else {
naechsteFunktion(data);
}
});
}
var listeGesamt = ;
http.createServer(function (request, response) {
console.log(request.url);
console.log(request.method, request.url);
console.log(" ", request.url.substring(1));
var found;
if (request.url === '/') {
request.url = '/draw.html';
// redirect auf eine BildId → über HTTP-Header im Response
} else if (found = request.url.match(/^/static/([^/]+)$/)) {
console.log(found);
dateiLesen(found[1], function(data){ response.end(data); })
} else if (found = request.url.match(/^/data/(w+)$/)) {
var daten = '';
response.setHeader('Content-Type', 'application/json');
request.on('data', function (chunk) {
daten += chunk;
}).on('end', function (){
// alle Daten geladen
liste = JSON.parse(daten);
listeGesamt = listeGesamt.concat(liste);
console.log("alle Daten: ", liste)
response.end(JSON.stringify({
"Datensaetze empfangen": liste.length,
serverListe: listeGesamt.length,
punkte: liste
}));
})
} else if (/^/w+$/.test(request.url)) {
dateiLesen('draw.html', function(data){ response.end(data); })
} else {
response.end("Kann Anfrage nicht bearbeiten");
}
}).listen(8081);
How can I make another browser to draw these points, that are send in the array 'liste'?
javascript node.js
Maybe in some different words: "How can I draw at the same time on two open browsers. I draw on the one and the other uses the sended stats to draw it automaticaly?"
– user10441435
Nov 19 '18 at 14:08
add a comment |
0
0
0
I have a javascript programm, which uses canvas to draw:
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
<meta charset="utf-8" />
<title>digitale Tafel</title>
<div id="spielfeld"></div>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="static/jquery.min.js"></script>
<script src="static/draw.js"></script>
</body>
</html>
javascript
var malen = {
gemaltBis: 0,
koordinaten: {},
menu: {
farben: [
'white',
'blue',
'red',
'black',
'darkgreen',
'yellow',
'orange',
'purple',
'saddlebrown',
'grey',
'pink'
],
breiten: [
3,
6,
9,
12,
15
]
},
punkte: ,
letztePunkte: ,
serverPunkte: 0,
vomServer:
}
malen.durchmesser = 3;
malen.colorStatus = 'black';
$('<div>').addClass('leiste').css({
position: 'fixed',
top: -1+'px',
left: 70+'px',
width: 625+'px',
height: 40+'px',
border: 1+'px solid grey',
backgroundColor: 'lightgrey',
borderBottomLeftRadius: 20+'px',
borderBottomRightRadius: 20+'px',
}).appendTo('#spielfeld');
for (color in malen.menu.farben) {
$('<div>').addClass('farben').css({
position: 'fixed',
top: 9+'px',
left: 100+color*30+'px',
width: 20+'px',
height: 20+'px',
backgroundColor: malen.menu.farben[color],
borderRadius: 15+'px',
}).click(farbeÄndern).appendTo('#spielfeld');
}
for (breite in malen.menu.breiten) {
$('<div>').addClass('esels').css({
border: 1+'px solid grey',
position: 'fixed',
top: 2+'px',
left: 450+breite*45+'px',
width: 40+'px',
height: malen.menu.breiten[breite]+'px',
backgroundColor: 'lightgrey',
borderRadius: 15+'px',
}).click(dickeÄndern).appendTo('#spielfeld');
}
function farbeÄndern() {
$('.farben').css({'border':0+'px'});
malen.colorStatus = this.style.backgroundColor;
document.getElementsByClassName('farben')[malen.menu.farben.indexOf(malen.colorStatus)].style.border = 2+'px solid';
this.style.borderColor = this.style.backgroundColor;
$('.esels').eq(malen.menu.breiten.indexOf(malen.durchmesser)).css({backgroundColor: malen.colorStatus,});
}
function dickeÄndern() {
$('.esels').css({'background-color':'lightgrey'});
malen.durchmesser = ((parseFloat(this.style.left)-450)/45+1)*3;
this.style.backgroundColor = malen.colorStatus;
}
$('.farben').eq(malen.menu.farben.indexOf('black')).css({border: 2+'px solid',})
$('.esels').eq(malen.menu.breiten.indexOf(3)).css({backgroundColor: malen.colorStatus});
var canvas = document.getElementById('canvas');
malen.ctx = canvas.getContext('2d');
$(window).resize(function () {
canvas.width = window.innerWidth;
canvas.height = window.innerWidth;
for (sache in malen.menu.breiten) {
$('.esels').eq(sache).css({height: malen.menu.breiten[sache]*canvas.width/500+'px'})
}
draw(0);
}).resize();
$('#canvas').on('mousedown', function (e) {
captureMousePoint(e)
$('#canvas').on('mousemove', captureMousePoint);
}).on('mouseup', function () {
$('#canvas').off('mousemove', captureMousePoint);
})
function captureMousePoint(e){
var einPunkt = {
x: 1 / canvas.width * e.pageX,
y: 1 / canvas.width * e.pageY,
radius: malen.durchmesser/2,
farbe: malen.colorStatus,
};
malen.punkte.push(einPunkt);
malen.letztePunkte.push(einPunkt);
draw(malen.punkte.length - 1);
}
function draw(since) {
var len = malen.punkte.length;
for (var i=since; i< len; i++) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.punkte[i].farbe;
malen.ctx.arc(
malen.punkte[i].x * canvas.width,
malen.punkte[i].y * canvas.width,
malen.punkte[i].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
}
function anServerSenden() {
console.log("anServerSenden", malen.letztePunkte.length);
if (malen.letztePunkte.length == 0) {
window.setTimeout(anServerSenden, 1000);
return;
}
$.ajax({
method: 'POST',
url: '/data/test',
headers: { 'Content-Type': 'application/json' },
data: JSON.stringify(malen.letztePunkte),
success: function(fromServer){
malen.vomServer = fromServer;
console.log("Antwort vom Server", malen.vomServer);
window.setTimeout(anServerSenden, 1000);
}
});
malen.letztePunkte = ;
}
vomServerMalen();
function vomServerMalen() {
for (item in malen.vomServer.punkte) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.vomServer.punkte[item].farbe;
malen.ctx.arc(
malen.vomServer.punkte[item].x * canvas.width,
malen.vomServer.punkte[item].y * canvas.width,
malen.vomServer.punkte[item].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
window.setTimeout(vomServerMalen, 1000);
}
anServerSenden();
And I want it to be an application, which can be used in a server-client-application for multiple clients. Therefor I am using nodejs and try to send the stats of every point I draw, in an array, so that another client can get these informations for every point and draw exactly this on his browser.
nodejs
var http = require("http");
var fs = require('fs');
function dateiLesen(dateiName, naechsteFunktion) {
fs.readFile(dateiName, function (err, data) {
if (err) {
naechsteFunktion("Kann nicht geladen werden: "+dateiName);
} else {
naechsteFunktion(data);
}
});
}
var listeGesamt = ;
http.createServer(function (request, response) {
console.log(request.url);
console.log(request.method, request.url);
console.log(" ", request.url.substring(1));
var found;
if (request.url === '/') {
request.url = '/draw.html';
// redirect auf eine BildId → über HTTP-Header im Response
} else if (found = request.url.match(/^/static/([^/]+)$/)) {
console.log(found);
dateiLesen(found[1], function(data){ response.end(data); })
} else if (found = request.url.match(/^/data/(w+)$/)) {
var daten = '';
response.setHeader('Content-Type', 'application/json');
request.on('data', function (chunk) {
daten += chunk;
}).on('end', function (){
// alle Daten geladen
liste = JSON.parse(daten);
listeGesamt = listeGesamt.concat(liste);
console.log("alle Daten: ", liste)
response.end(JSON.stringify({
"Datensaetze empfangen": liste.length,
serverListe: listeGesamt.length,
punkte: liste
}));
})
} else if (/^/w+$/.test(request.url)) {
dateiLesen('draw.html', function(data){ response.end(data); })
} else {
response.end("Kann Anfrage nicht bearbeiten");
}
}).listen(8081);
How can I make another browser to draw these points, that are send in the array 'liste'?
javascript node.js
I have a javascript programm, which uses canvas to draw:
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
<meta charset="utf-8" />
<title>digitale Tafel</title>
<div id="spielfeld"></div>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="static/jquery.min.js"></script>
<script src="static/draw.js"></script>
</body>
</html>
javascript
var malen = {
gemaltBis: 0,
koordinaten: {},
menu: {
farben: [
'white',
'blue',
'red',
'black',
'darkgreen',
'yellow',
'orange',
'purple',
'saddlebrown',
'grey',
'pink'
],
breiten: [
3,
6,
9,
12,
15
]
},
punkte: ,
letztePunkte: ,
serverPunkte: 0,
vomServer:
}
malen.durchmesser = 3;
malen.colorStatus = 'black';
$('<div>').addClass('leiste').css({
position: 'fixed',
top: -1+'px',
left: 70+'px',
width: 625+'px',
height: 40+'px',
border: 1+'px solid grey',
backgroundColor: 'lightgrey',
borderBottomLeftRadius: 20+'px',
borderBottomRightRadius: 20+'px',
}).appendTo('#spielfeld');
for (color in malen.menu.farben) {
$('<div>').addClass('farben').css({
position: 'fixed',
top: 9+'px',
left: 100+color*30+'px',
width: 20+'px',
height: 20+'px',
backgroundColor: malen.menu.farben[color],
borderRadius: 15+'px',
}).click(farbeÄndern).appendTo('#spielfeld');
}
for (breite in malen.menu.breiten) {
$('<div>').addClass('esels').css({
border: 1+'px solid grey',
position: 'fixed',
top: 2+'px',
left: 450+breite*45+'px',
width: 40+'px',
height: malen.menu.breiten[breite]+'px',
backgroundColor: 'lightgrey',
borderRadius: 15+'px',
}).click(dickeÄndern).appendTo('#spielfeld');
}
function farbeÄndern() {
$('.farben').css({'border':0+'px'});
malen.colorStatus = this.style.backgroundColor;
document.getElementsByClassName('farben')[malen.menu.farben.indexOf(malen.colorStatus)].style.border = 2+'px solid';
this.style.borderColor = this.style.backgroundColor;
$('.esels').eq(malen.menu.breiten.indexOf(malen.durchmesser)).css({backgroundColor: malen.colorStatus,});
}
function dickeÄndern() {
$('.esels').css({'background-color':'lightgrey'});
malen.durchmesser = ((parseFloat(this.style.left)-450)/45+1)*3;
this.style.backgroundColor = malen.colorStatus;
}
$('.farben').eq(malen.menu.farben.indexOf('black')).css({border: 2+'px solid',})
$('.esels').eq(malen.menu.breiten.indexOf(3)).css({backgroundColor: malen.colorStatus});
var canvas = document.getElementById('canvas');
malen.ctx = canvas.getContext('2d');
$(window).resize(function () {
canvas.width = window.innerWidth;
canvas.height = window.innerWidth;
for (sache in malen.menu.breiten) {
$('.esels').eq(sache).css({height: malen.menu.breiten[sache]*canvas.width/500+'px'})
}
draw(0);
}).resize();
$('#canvas').on('mousedown', function (e) {
captureMousePoint(e)
$('#canvas').on('mousemove', captureMousePoint);
}).on('mouseup', function () {
$('#canvas').off('mousemove', captureMousePoint);
})
function captureMousePoint(e){
var einPunkt = {
x: 1 / canvas.width * e.pageX,
y: 1 / canvas.width * e.pageY,
radius: malen.durchmesser/2,
farbe: malen.colorStatus,
};
malen.punkte.push(einPunkt);
malen.letztePunkte.push(einPunkt);
draw(malen.punkte.length - 1);
}
function draw(since) {
var len = malen.punkte.length;
for (var i=since; i< len; i++) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.punkte[i].farbe;
malen.ctx.arc(
malen.punkte[i].x * canvas.width,
malen.punkte[i].y * canvas.width,
malen.punkte[i].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
}
function anServerSenden() {
console.log("anServerSenden", malen.letztePunkte.length);
if (malen.letztePunkte.length == 0) {
window.setTimeout(anServerSenden, 1000);
return;
}
$.ajax({
method: 'POST',
url: '/data/test',
headers: { 'Content-Type': 'application/json' },
data: JSON.stringify(malen.letztePunkte),
success: function(fromServer){
malen.vomServer = fromServer;
console.log("Antwort vom Server", malen.vomServer);
window.setTimeout(anServerSenden, 1000);
}
});
malen.letztePunkte = ;
}
vomServerMalen();
function vomServerMalen() {
for (item in malen.vomServer.punkte) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.vomServer.punkte[item].farbe;
malen.ctx.arc(
malen.vomServer.punkte[item].x * canvas.width,
malen.vomServer.punkte[item].y * canvas.width,
malen.vomServer.punkte[item].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
window.setTimeout(vomServerMalen, 1000);
}
anServerSenden();
And I want it to be an application, which can be used in a server-client-application for multiple clients. Therefor I am using nodejs and try to send the stats of every point I draw, in an array, so that another client can get these informations for every point and draw exactly this on his browser.
nodejs
var http = require("http");
var fs = require('fs');
function dateiLesen(dateiName, naechsteFunktion) {
fs.readFile(dateiName, function (err, data) {
if (err) {
naechsteFunktion("Kann nicht geladen werden: "+dateiName);
} else {
naechsteFunktion(data);
}
});
}
var listeGesamt = ;
http.createServer(function (request, response) {
console.log(request.url);
console.log(request.method, request.url);
console.log(" ", request.url.substring(1));
var found;
if (request.url === '/') {
request.url = '/draw.html';
// redirect auf eine BildId → über HTTP-Header im Response
} else if (found = request.url.match(/^/static/([^/]+)$/)) {
console.log(found);
dateiLesen(found[1], function(data){ response.end(data); })
} else if (found = request.url.match(/^/data/(w+)$/)) {
var daten = '';
response.setHeader('Content-Type', 'application/json');
request.on('data', function (chunk) {
daten += chunk;
}).on('end', function (){
// alle Daten geladen
liste = JSON.parse(daten);
listeGesamt = listeGesamt.concat(liste);
console.log("alle Daten: ", liste)
response.end(JSON.stringify({
"Datensaetze empfangen": liste.length,
serverListe: listeGesamt.length,
punkte: liste
}));
})
} else if (/^/w+$/.test(request.url)) {
dateiLesen('draw.html', function(data){ response.end(data); })
} else {
response.end("Kann Anfrage nicht bearbeiten");
}
}).listen(8081);
How can I make another browser to draw these points, that are send in the array 'liste'?
javascript node.js
javascript node.js
asked Nov 19 '18 at 13:28
user10441435
Maybe in some different words: "How can I draw at the same time on two open browsers. I draw on the one and the other uses the sended stats to draw it automaticaly?"
– user10441435
Nov 19 '18 at 14:08
add a comment |
Maybe in some different words: "How can I draw at the same time on two open browsers. I draw on the one and the other uses the sended stats to draw it automaticaly?"
– user10441435
Nov 19 '18 at 14:08
Maybe in some different words: "How can I draw at the same time on two open browsers. I draw on the one and the other uses the sended stats to draw it automaticaly?"
– user10441435
Nov 19 '18 at 14:08
Maybe in some different words: "How can I draw at the same time on two open browsers. I draw on the one and the other uses the sended stats to draw it automaticaly?"
– user10441435
Nov 19 '18 at 14:08
add a comment |
1 Answer
1
active
oldest
votes
0
here is my answer, it was really easy:
a²+b²=c² |Math.sqrt()
a+b=c |-b |-c
a-c=b
Nice guy, thank you for your help, you really helped me a lot! You are such a brain!
– user10441435
Dec 6 '18 at 9:48
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375683%2fhow-can-i-send-canvas-information-to-be-executed-in-another-browser-over-nodejs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
here is my answer, it was really easy:
a²+b²=c² |Math.sqrt()
a+b=c |-b |-c
a-c=b
Nice guy, thank you for your help, you really helped me a lot! You are such a brain!
– user10441435
Dec 6 '18 at 9:48
add a comment |
0
here is my answer, it was really easy:
a²+b²=c² |Math.sqrt()
a+b=c |-b |-c
a-c=b
Nice guy, thank you for your help, you really helped me a lot! You are such a brain!
– user10441435
Dec 6 '18 at 9:48
add a comment |
0
0
0
here is my answer, it was really easy:
a²+b²=c² |Math.sqrt()
a+b=c |-b |-c
a-c=b
here is my answer, it was really easy:
a²+b²=c² |Math.sqrt()
a+b=c |-b |-c
a-c=b
answered Dec 6 '18 at 9:47
user10441435
Nice guy, thank you for your help, you really helped me a lot! You are such a brain!
– user10441435
Dec 6 '18 at 9:48
add a comment |
Nice guy, thank you for your help, you really helped me a lot! You are such a brain!
– user10441435
Dec 6 '18 at 9:48
Nice guy, thank you for your help, you really helped me a lot! You are such a brain!
– user10441435
Dec 6 '18 at 9:48
Nice guy, thank you for your help, you really helped me a lot! You are such a brain!
– user10441435
Dec 6 '18 at 9:48
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375683%2fhow-can-i-send-canvas-information-to-be-executed-in-another-browser-over-nodejs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Maybe in some different words: "How can I draw at the same time on two open browsers. I draw on the one and the other uses the sended stats to draw it automaticaly?"
– user10441435
Nov 19 '18 at 14:08