gpt4 book ai didi

javascript - Websocket 通过 Javascript 客户端发送图像文件

转载 作者:行者123 更新时间:2023-11-28 23:12:12 25 4
gpt4 key购买 nike

我正在编写一个简单的应用程序,其中 javascript web 套接字客户端必须将图像发送到由 tomcat 和 Java 语言实现的 webscoket。当我发送一条字符串消息时,一切进展顺利,但如果我发送图像数据,则不会触发@Onmessage 事件。我已经花了2天了,但还没有解决方案。

Java WebSocket 代码:

@ServerEndpoint("/sendfile")
public class BinaryWebSocketServer {
private
static final Set<Session> sessions =
Collections.synchronizedSet(new HashSet<Session>());

@OnOpen
public void onOpen(Session session) {
sessions.add(session);
System.out.println("onOpen_File::" + session.getId());
}
@OnClose
public void onClose(Session session) {
sessions.remove(session);
System.out.println("onClose_File::" + session.getId());
}

@OnMessage
public void onMessage(byte[] data, Session session) {
System.out.println("onByteArrayMessage::From=" + session.getId() + " with len:" + data.length );
ByteArrayInputStream bis = new ByteArrayInputStream(data);
BufferedImage bImage2;
try {
bImage2 = ImageIO.read(bis);
ImageIO.write(bImage2, "jpg", new File("output.jpg") );
} catch (IOException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}

System.out.println("image created");

}


@OnError
public void onError(Throwable t) {
System.out.println("onError::" + t.getMessage());
}

}

Javascript 客户端:

<body>
<h2>File Upload</h2> Select file

<input type="file" id="filename" />

<br>

<input type="button" value="Connect" onclick="connectChatServer()" />

<br>

<input type="button" value="Upload" onclick="sendFile()" />
<input onclick="wsCloseConnection();" value="Disconnect" type="button">
<br />
<textarea id="echoText" rows="5" cols="30"></textarea>
<script>

var webSocket = new WebSocket("ws://192.168.1.55:8081/Hello-Capture/sendfile");
webSocket.binaryType = 'arraybuffer';
webSocket.onopen = function(message){ wsOpen(message);};
//webSocket.onmessage = function(message){ wsGetMessage(message);};
webSocket.onclose = function(message){ wsClose(message);};
webSocket.onerror = function(message){ wsError(message);};
function wsOpen(message){
echoText.value += "Connected ... \n";
}
function wsSendMessage(){
webSocket.send(message.value);
echoText.value += "Message sended to the server : " + message.value + "\n";
message.value = "";
}
function wsCloseConnection(){
webSocket.close();
}
function wsGetMessage(message){
echoText.value += "Message received from to the server : " + message.data + "\n";
}
function wsClose(message){
echoText.value += "Disconnect ... \n";
}

function wsError(message){
echoText.value += "Error ..." + message.code +" \n";
}


function sendFile() {

var file = document.getElementById('filename').files[0];

var reader = new FileReader();

var rawData = new ArrayBuffer();

reader.loadend = function(e) {

};

reader.onload = function(e) {

var rawData = e.target.result;
var byteArray = new Uint8Array(rawData);
var fileByteArray = [];

webSocket.send(byteArray.buffer);


echoText.value =("the File has been transferred.\n");

};

reader.readAsArrayBuffer(file);

}

</script>

</body>

最佳答案

最后我找到了解决方案,所以我评论它可能有人陷入困境。我忘记将 boolean 参数传递给 onMessage 函数。正确的形式是:

 @OnMessage
public void onMessage(byte[] data,boolean last, Session session) {
.
.
.
}

关于javascript - Websocket 通过 Javascript 客户端发送图像文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56363302/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com