Envoi d'image par WebSocket

Version imprimable

23/05/2013, 13h29
dau2004

Envoi d'image par WebSocket

Bonjour,
Dans le cadre de mon stage je dois réaliser un programme java (côté serveur) qui doit exposer une image qui pourra ensuite être récupérée côté client (javascript).
Je cherche donc à envoyer mon image via la WebSocket pour la réceptionner et l'afficher côté javascript.
Mais malgré mes recherches je n'ai pas trouvé de moyen de le faire (sachant que je travaille avec la librairie JWebSocket), que ce soit en envoyant l'image sous un certain format, ou son tableau de byte, ou d'une autre manière ...
Si vous avez des idées ou pistes je suis preneur, sachant que s'il faut je peux changer de librairie, le seul élément imposé étant l'utilisation des WebSockets.
Merci d'avance.
23/05/2013, 13h33
thelvin

Je suppose que l'image ne peut vraiment pas être transmise simplement par HTTP comme d'habitude, avec une URL vers elle ?
23/05/2013, 13h39
dau2004

Malheureusement non, on cherche à envoyer directement l'image sur la page web contenant le javascript sans passer par une url intermédiaire :/
Pour le moment j'ai déjà réussi à envoyer des WebSockets depuis le Java vers le Javascript mais ca en reste à des String, et comme JWebSocket me fournit un "TokenServer" je ne peux pas l'utiliser en faisant une sorte de "connection.sendData(byte[] datas)" ...
23/05/2013, 14h19
thelvin

Humm... En principe les websockets permettent d'échanger du binaire, mais je regarde les JavaDocs des implémentations Java, et je ne vois que de la gestion de String ou de JSON (basé sur du texte donc.)

Je ne trouve pas d'exemple montrant un échange binaire avec une des stack websocket pour Java.
Au pire, tu dois pouvoir l'encoder en base64 sous forme de data-url, et la lire et t'en servir tel que côté JavaScript. C'est vraiment pas efficace mais ça devrait marcher.
23/05/2013, 14h28
dau2004

Ok merci de ta réponse :) Je vais essayer de voir ça, au pire il y a toujours l'alternative de l'image exposée sur une url même si ce n'est pas ce qui était voulu au départ ...

Bon voilà problème résolu en passant par base64 :
Je poste le code si ca pose soucis à quelqu'un d'autre un jour :
Côté Java avec JWebServer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
public class ServeurImage
{
	private static ImageAEnvoyer image;
 
	public static byte[] getImageByteArray()
	{
		return image.getImageByteArray();
	}
 
    public static void main(String[] args)
    {
    	image = new ImageAEnvoyer();
	    try
	    {
        	JWebSocketFactory.printCopyrightToConsole();
        	JWebSocketConfig.initForConsoleApp(args); 
	        JWebSocketFactory.start();
 
	        TokenServer tokenserver = (TokenServer) JWebSocketFactory.getServer("ts0"); // De la forme 192.168.x.x:8787
	        if (tokenserver != null)
	        {
	            tokenserver.addListener(new MonListener());
	        }
 
	        while (JWebSocketInstance.getStatus() != JWebSocketInstance.SHUTTING_DOWN)
	        {  
	            try
	            {  
	                Thread.sleep(250);  
	            }
	            catch (InterruptedException ie)
	            {  
	                // no handling required here  
	            }  
	        }  
	    }
	    catch (Exception e) 
	    {  
	        System.out.println(e.getClass().getSimpleName() + " on starting jWebsocket server: " + e.getMessage());  
	        e.printStackTrace();  
	    }
	    finally
	    {  
	        JWebSocketFactory.stop();  
	    }  
    }
} 
 
public class MonListener implements WebSocketServerTokenListener
{
    public void processToken(WebSocketServerTokenEvent wsste, Token token)  
    {
        System.out.println("Token. "+token.getLogString());
    }
    public void processOpened(WebSocketServerEvent wsse)  
    {  
        System.out.println("Opened.");  
    }
    public void processPacket(WebSocketServerEvent wsse, WebSocketPacket wsp)  
    {
        if(wsp.getString().equals("getImage()"))
        {
        	byte[] array = ServeurImage.getImageByteArray();
            wsp.setString(Base64.encodeBase64String(array));
            wsse.sendPacket(wsp);
        }
    }
    public void processClosed(WebSocketServerEvent wsse)  
    {  
        System.out.println("Closed.");  
    }
}  
 
 
public class ImageAEnvoyer
{
	private String imageSrc;
 
	public ImageAEnvoyer()
	{
		imageSrc="sourceImage.png";
	}
 
	public byte[] getImageByteArray()
	{
		File file = new File(imageSrc);
		byte[] ret = new byte[(int) file.length()];
		try
		{
			new FileInputStream(file).read(ret);
		}
		catch (IOException e)
		{
			e.printStackTrace();
		}
		return ret;
	}
}

Côté Javascript avec Socket.io :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
var ws = new WebSocket("ws://192.168.x.x:8787");
 
ws.onopen = function(ev)
{
  console.log('Connection opened.');
}
ws.onmessage = function(ev)
{
	document.images["img"].src = "data:image/png;base64," + ev.data;
	console.log("Src : " + document.images["img"].src);
}
ws.onclose = function(ev)
{
  console.log('Connection closed.');
}
ws.onerror = function(ev)
{
  console.log('An error occurred. Sorry for that.');
}
 
ws.onreceive = function (data)
{
	console.log('Receive');
}

23/05/2013, 17h50
thelvin
Du coup j'avais pas regardé au bon endroit, mais, il y a quelque chose qui t'empêche d'utiliser wsp.setByteArray() au lieu de wsp.setString() ?
Citation:
Code:

1 2 3 4 5 6 7 File file = new File(imageSrc); byte[] ret = new byte[(int) file.length()]; try { new FileInputStream(file).read(ret); }
Ça va pas marcher souvent, ça. On ne lit pas un fichier entier en un seul read().

Non juste je n'avais pas fait attention à ca, mais en fait en mettant en Base 64 ca permet d'afficher l'image directement côté javascript, au lieu de retranscrire les tableaux de byte, enfin bonne question j'essaierai ca ^^
Pour le read, effectivement ca ne marche pas à tous les coups, le pire c'est que depuis hier j'ai touché un peu à mon code et je ne vois pas trop où j'ai créé l'erreur, je vais voir ca je reposterai lundi ou mardi je pense !

Edit :
Au final le seul read doit fonctionner dans ce cas là car on crée le tableau à la taille du file, sinon j'ai récupéré ce code qui transforme un objet BufferedImage en String (encodage en Base64) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 private String encodeToString(BufferedImage image, String type) { String imageString = null; ByteArrayOutputStream bos = new ByteArrayOutputStream(); try { ImageIO.write(image, type, bos); byte[] imageBytes = bos.toByteArray(); imageString = Base64.encodeBase64String(imageBytes); bos.close(); } catch (IOException e) { e.printStackTrace(); } return imageString; }
Ensuite il suffit d'envoyer ce string dans le Listener pour que ca fonctionne, je ne sais pas si j'ai été clair mais bon ^^