javascript - 使用 Websockets 从 Java 端点发送图像

标签 javascript jakarta-ee websocket


我正在尝试在 Java EE 7 中创建一个 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);

由于图像是从 Java 端正确读取的(至少读取的字节数是正确的),我认为问题出在 JavaScript 端。
我已经添加了一个警报来记录在 drawImageBinary 中读取的字节数,但是打印了“0”并且没有在屏幕上呈现任何内容。 有人能找到罪魁祸首吗? 谢谢!

最佳答案

客户端缺少:

websocket.binaryType = "arraybuffer";

关于javascript - 使用 Websockets 从 Java 端点发送图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21433915/

相关文章:

javascript - 测试 Angularjs 应用程序-如何获取具有 ng-repeat 属性的对象中的文本

ios - 快速将实时数据更新到 UITableview 行

java - JPA 2.1 转换器注释

java - 如何使用 java 代表类的创建时间来分隔类的实例?

java - JBoss war 文件部署问题

jquery - ColdFusion Websocket subscribe() JavaScript 在页面加载时调用时不起作用

python - Django channel websocket.receive 未处理

javascript - CSS Hover 改变其他元素

javascript - 添加到数组兄弟

javascript - 多个 JavaScript 倒计时日期?