しろがねによる技術日記

メインはIT日記的な感じで書きますが、ほかにもいろいろ書きます

spring websocket による画像データ送信

概要

spring websocket でチャット中で画像送信しようとして、バイナリ送信はあきらめていろいろがんばったこと

client side

var file = document.querySelector('input[type="file"]').files[0];
var reader = new FileReader();
reader.onload = function(event){
    var loadedImageUri = event.target.result;
    stompClient.send("/app/room/" + varroomId, {}, JSON.stringify({'imgData': loadedImageUri}));
};
reader.readAsDataURL(file);

server side

下記でデータをbyteに変換して画像として保存する

String[] strs = message.getImgData().split(",");
byte[] binaryData = Base64.getDecoder().decode(strs[1]);

spring settings

websocket で connection を確立させた後なのでメッセージサイズなどは apache, tomcat をいじっても反映されないので
websocket:transport でサイズを指定する必要がある。
※要検討箇所

<websocket:message-broker application-destination-prefix="/app" >
    <websocket:transport message-size="2097152" send-buffer-size="2097152"></websocket:transport>
    <websocket:stomp-endpoint path="/endpoint" >
    </websocket:stomp-endpoint>
    <websocket:simple-broker prefix="/topic,/room" />
</websocket:message-broker>    

これでなんとか、データの送信はできた。
後は、クライアントに返す際に保存したパスを返却するかサイズが小さな画像のやりとしかないのなら
data:image/png;base64 など、Base64かけたもので返却するとよいかな