Bonjour à tous,
Je viens de commencer un code avec node.js pour un cours.
Le but est de créer un site multi-utilisateurs, ou chacun pourrait dessiner avec son curseur. Jusque-là, c'est ok, ça dessine des lignes.
Mon but maintenant serait de remplacer ces lignes par des images. Je m'explique. J'aimerai avoir une série d'image définies (dans un tableau ?) et que chaque fois que le curseur bouge de par exemple 20px, l'image suivante apparait à la position du curseur. Je pense que ça ne doit pas être très compliqué à faire pour quelqu'un qui connait.
Merci pour votre aide !
P.S. liens/tutos bienvenus si vous avez la flemme de me montrer !
Je viens de commencer un code avec node.js pour un cours.
Le but est de créer un site multi-utilisateurs, ou chacun pourrait dessiner avec son curseur. Jusque-là, c'est ok, ça dessine des lignes.
Mon but maintenant serait de remplacer ces lignes par des images. Je m'explique. J'aimerai avoir une série d'image définies (dans un tableau ?) et que chaque fois que le curseur bouge de par exemple 20px, l'image suivante apparait à la position du curseur. Je pense que ça ne doit pas être très compliqué à faire pour quelqu'un qui connait.
Merci pour votre aide !
P.S. liens/tutos bienvenus si vous avez la flemme de me montrer !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Exercice 02 / Server WebSocket</title>
</head>
<body>
<canvas id="screen"></canvas>
<!-- SCRIPTS -->
<script type="text/javascript">
window.WebSocket = window.WebSocket || window.MozWebSocket;
if(!window.WebSocket){
// pour les navigateurs qui n'acceptent pas WS
alert("Il faut changer de navigateur.");
}else{
// pour les navigateurs qui acceptent WS
// TOUT LE CODE VIENT ICI
// ----------------------
// connection au serveur WS
var connection = new WebSocket('ws://localhost:1337');
// message automatiquement envoyé à la connexion d'un utilisateur
connection.onopen = function (){
connection.send('hello je me connecte');
}
connection.onmessage = function(message){
console.log(message);
var json = JSON.parse(message.data);
//document.body.innerHTML = json.data;
try{
var valeurs = JSON.parse(json.data);
//document.body.innerHTML += "<br/> posx = "+valeurs.posx;
//document.body.innerHTML += " posy = "+valeurs.posy;
if(isLine){
ctx.lineTo(valeurs.posx,valeurs.posy);
ctx.stroke();
}else{
ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeStyle = '#ff0000';
ctx.moveTo(valeurs.posx,valeurs.posy);
isLine = true;
}
}catch(e){
//alert("Ceci n'est pas un tableau JSON");
}
console.log(json);
};
var canvas = document.getElementById("screen");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
var isLine = false;
// à chaque clic
document.body.addEventListener("click", envoiMessage);
// récupère les coordonnées de la souris et les renvois
function envoiMessage(e){
var message = {posx:e.x , posy:e.y};
connection.send(JSON.stringify(message));
}
}
</script>
</body>
</html>
// définition du port
var webSocketServerPort = 1337;
// chargement de la bibliothèque
var webSocketServer = require('websocket').server;
// définir le protocole de communication
var http = require('http');
// initialisation du serveur http
var server = http.createServer(function(request,response){});
// création d'un tableau de clients (utilisateurs)
var clients = [];
server.listen(webSocketServerPort, function(){
console.log("Server is running !" + webSocketServerPort); // message dans la console
});
// initialisation du serveur websocket (ws)
var wsServer = new webSocketServer({
httpServer:server
});
// GESTION PAR LE WS SERVER
// ----------------------------------------------------------------------------------------------------------------------------------------
// se connecte au serveur
wsServer.on('request', function(request){
var connection = request.accept(null, request.origin);
console.log("le WS server a reçu une request d'initialisation");
// gestion des clients (utilisateurs)
var date = new Date();
// on nomme les clients d'après l'heure (heure, minutes, secondes, millisecondes)
var clientName = 'client_'+date.getHours()+date.getMinutes()+date.getSeconds()+date.getMilliseconds();
clients[clientName] = connection;
// message automatiquement envoyé à la connexion d'un utilisateur
connection.on('message', function(message){
console.log(message);
// pour tous les clients "name" que vous trouvez dans clients
for(var clientName in clients){
clients[clientName].sendUTF(JSON.stringify({data:message.utf8Data, name:clientName}));
}
})
});
// se déconnecte du serveur
wsServer.on('close', function(connection){
});