mi codigo html
Código:
<!DOCTYPE html>
<html>
<head>
<title>Start Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body onload="comenzar()">
<h1> Wireframe </h1>
<canvas id="myCanvas" width="500" height="250" style="border:1px solid #000000;"> </canvas>
<div id="output"></div>
<script type="text/javascript" src="pizarra.js"></script>
<script type="text/javascript" src="websoket.js"></script>
</body>
</html>
codigo js
Código:
function comenzar(){
lienzo = document.getElementById('myCanvas');
ctx = lienzo.getContext('2d');
//Dejamos todo preparado para escuchar los eventos
document.addEventListener('mousedown',pulsaRaton,false);
document.addEventListener('mousemove',mueveRaton,false);
document.addEventListener('mouseup',levantaRaton,false);
}
function pulsaRaton(capturo){ estoyDibujando = true;
//Indico que vamos a dibujar
ctx.beginPath(); //Averiguo las coordenadas X e Y por dónde va pasando el ratón
ctx.moveTo(capturo.clientX-lienzo.offsetLeft,capturo.clientY-lienzo.offsetTop);
sendData(capturo,"pulsaRaton");
}
function mueveRaton(capturo){
if(estoyDibujando){
//indicamos el color de la línea
ctx.strokeStyle='#000'; //Por dónde vamos dibujando
ctx.lineTo(capturo.clientX-lienzo.offsetLeft,capturo.clientY-lienzo.offsetTop); ctx.stroke();
}
sendData(capturo,"mueveRaton");
}
function levantaRaton(capturo){ //Indico que termino el dibujo
ctx.closePath();
estoyDibujando = false;
sendData(capturo,"levantaRaton");
}
function sendData(evt,methodo){
websocket.send(JSON.stringify(
{
coord:{
x:evt.clientX,
y:evt.clientX,
},
methodName: methodo
}
));
}
Código:
var wsUri = "ws://" + document.location.host + document.location.pathname + "endpoint";
var websocket = new WebSocket(wsUri);
websocket.onerror = function(evt) { onError(evt) };
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
// For testing purposes
var output = document.getElementById("output");
websocket.onopen = function(evt) { onOpen(evt) };
function writeToScreen(message) {
output.innerHTML += message + "<br>";
}
function onOpen() {
writeToScreen("Connected to " + wsUri);
}
// End test functions
websocket.onmessage=function (evt){
console.log(evt.data);
var json=JSON.parse(evt.data);
if(json.methodName=="pulsaRaton"){
pulsaRaton(evt);
}
if(json.methodName=="mueveRaton"){
mueveRaton(evt);
}
if(json.methodName=="levantaRaton"){
levantaRaton(evt);
}
}
y este es serverEndPoint
Código:
package org.sample.pizarra;
import java.io.IOException;
import java.util.Collections;
import java.util.HashSet;
import java.util.Set;
import javax.websocket.EncodeException;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/endpoint")
public class serverEndPoint {
private static Set<Session> peers = Collections.synchronizedSet(new HashSet<Session>());
@OnMessage
public String onMessage(String message,Session peer) throws IOException {
for(Session s: peers){
if(s!=peer){
s.getBasicRemote().sendText(message);
}
}
return null;
}
@OnOpen
public void onOpen (Session peer) {
peers.add(peer);
}
@OnClose
public void onClose (Session peer) {
peers.remove(peer);
}
}
no puedo realizar la conexion
ayuda