Javascript 使用WebSocket从Java端点发送图像

我试图在JavaEE7中创建一个Websocket端点，它接收一个文件名作为输入，并返回图像的二进制数据。以下是Websocket的Java端：

@ServerEndpoint(value = "/hellobinary")

public class HelloWorldBinaryEndpoint {

@OnMessage   
public void hello(String img, Session session) {

    File fi = new File("C:\\Users\\\images\\"+img);
    byte[] fileContent=null;
    try {
        fileContent = Files.readAllBytes(fi.toPath());
        ByteBuffer buf = ByteBuffer.wrap(fileContent);

        session.getBasicRemote().sendBinary(buf);
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

} 

这是Javascript的一面：

        var wsUri = "ws://localhost:8080/websocket/hellobinary";

        function init() {
            output = document.getElementById("output");
        }
        function send_message() {
            websocket = new WebSocket(wsUri);
            websocket.onopen = function(evt) {
                onOpen(evt)
            };
            websocket.onmessage = function(evt) {
                onMessage(evt)
            };
            websocket.onerror = function(evt) {
                onError(evt)
            };
        }
        function onOpen(evt) {
            writeToScreen("Connected to Endpoint!");
            doSend(textID.value);
        }
        function onMessage(evt) {

            drawImageBinary(evt.data);
        }
        function onError(evt) {
            writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
        }
        function doSend(message) {
            writeToScreen("Message Sent: " + message);
            websocket.send(message);

        }
        function writeToScreen(message) {
            var pre = document.createElement("p");
            pre.style.wordWrap = "break-word";
            pre.innerHTML = message;

            output.appendChild(pre);
        }
        function drawImageBinary(blob) {
            var bytes = new Uint8Array(blob);
            alert('received '+ bytes.length);
            var imageData = context.createImageData(canvas.width, canvas.height);

            for (var i=8; i<imageData.data.length; i++) {
                imageData.data[i] = bytes[i];
            }
            context.putImageData(imageData, 0, 0);

            var img = document.createElement('img');
            img.height = canvas.height;
            img.width = canvas.width;
            img.src = canvas.toDataURL();
        }
        window.addEventListener("load", init, false);

var wsUri=“ws://localhost:8080/websocket/hellobinary”；
函数init（）{
输出=document.getElementById（“输出”）；
}
函数send_message（）{
websocket=新的websocket（wsUri）；
websocket.onopen=函数（evt）{
onOpen（evt）
};
websocket.onmessage=函数（evt）{
onMessage（evt）
};
websocket.onerror=函数（evt）{
onError（evt）
};
}
功能开启（evt）{
writeToScreen（“已连接到端点！”）；
doSend（textID.value）；
}
消息函数（evt）{
drawImageBinary（evt.data）；
}
函数onError（evt）{
writeToScreen（'错误：'+evt.data）；
}
函数doSend（消息）{
writeToScreen（“已发送消息：+消息”）；
发送（消息）；
}
功能写入屏幕（消息）{
var pre=document.createElement（“p”）；
pre.style.wordWrap=“断开单词”；
pre.innerHTML=消息；
输出.appendChild（pre）；
}
函数drawImageBinary（blob）{
var字节=新的Uint8Array（blob）；
警报（'接收'+字节.长度）；
var imageData=context.createImageData（canvas.width、canvas.height）；
对于（var i=8；i客户端缺少您：

websocket.binaryType=“arraybuffer”
Ok！现在Javascript端也会收到字节数。但是屏幕上仍然没有打印任何内容。因此，在Javascript中呈现字节时一定存在问题。