Send file thought Actix websocket

Question

I'm having a hard time finding documentation or tutorial in order to send a file throught a websocket. Here is my JS:

['dragleave', 'drop'].forEach(event_name =>
document.addEventListener(event_name, function(e) {
  e.preventDefault();
  let files = e.dataTransfer.files;
  var reader = new FileReader();
  for(let i=0;i<files.length; i++) {
    reader.onload = function(event) {
      socket.send(event.target.result);
    };
    reader.readAsArrayBuffer(files[i]);
  }
  }, false));

My rust code is based on the official examples (https://github.com/actix/examples/tree/master/websockets/websocket):

impl StreamHandler<Result<ws::Message, ws::ProtocolError>> for RatioUpWS {
    fn handle(&mut self, msg: Result<ws::Message, ws::ProtocolError>, ctx: &mut Self::Context,) {
        // process websocket messages
        println!("WS: {:?}", msg);
        match msg {
            Ok(ws::Message::Ping(msg)) => {
                self.hb = Instant::now();
                ctx.pong(&msg);
            }
            Ok(ws::Message::Pong(_)) => {self.hb = Instant::now();}
            Ok(ws::Message::Text(text)) => {
                ctx.text(text);
            }
            Ok(ws::Message::Binary(bin)) => {
                let mut pos = 0;
                let mut buffer = File::create("foo.txt").unwrap();  // notice the name of the file that will be written
                while pos < bin.len() {
                    let bytes_written = buffer.write(&bin[pos..]).unwrap();
                    pos += bytes_written
                };
                ctx.binary(bin)
            },
            Ok(ws::Message::Close(reason)) => {
                ctx.close(reason);
                ctx.stop();
            }
            _ => ctx.stop(), //if file>64K, it goes here
        }
    }
}

It seems to be recognized as a text message and I don't know how to deserialize it. actix_web::web::Form<FormDataStruct> don't seems to be appropriate.

Any idea?

Answer 1

Your WebSocket server is recognizing the message as text because your JavaScript code is dispatching text data with FormData() instead of using an ArrayBuffer.

To transfer a file from a browser using a WebSocket, you can use the following example code (notice the WebSocket declaration and sendFile() function):

    var ws;
    function connectToWS() {
      var wsUri = (window.location.protocol=='https:'&&'wss://'||'ws://')+window.location.host + '/ws/';
      console.log(wsUri);
      ws = new WebSocket(wsUri);
      ws.binaryType = "arraybuffer";  // Note the binaryType here
      ws.onopen = function() {alert("Connected.");};
      ws.onmessage = function(evt) {alert(evt.msg);};
      ws.onclose = function() {
        ws = null;
        alert("Connection is closed...");
      };
      ws.onerror = function(e) {alert(e.msg);}
    }

    function sendFile() {
      var file = document.getElementById('filename').files[0];
      var reader = new FileReader();
      var rawData = new ArrayBuffer();            
      reader.loadend = function() {}
      reader.onload = function(e) {
          rawData = e.target.result;
          ws.send(rawData);
          alert("the File has been transferred.")
      }
      reader.readAsArrayBuffer(file);
    }

To process the transfered bytes in the server-side you can use the standard Rust library (std::io::Write). Changing the same example Rust code you provided to process a .txt file with std::io:

impl StreamHandler<Result<ws::Message, ws::ProtocolError>> for MyWebSocket {
    fn handle(
        &mut self,
        msg: Result<ws::Message, ws::ProtocolError>,
        ctx: &mut Self::Context,
    ) {
        // process websocket messages
        println!("WS: {:?}", msg);
        match msg {
            Ok(ws::Message::Ping(msg)) => {
                self.hb = Instant::now();
                ctx.pong(&msg);
            }
            Ok(ws::Message::Pong(_)) => {
                self.hb = Instant::now();
            }
            Ok(ws::Message::Text(text)) => ctx.text(text),
            Ok(ws::Message::Binary(bin)) => {
                let mut pos = 0;
                let mut buffer = File::create("foo.txt").unwrap();  // notice the name of the file that will be written
                while pos < bin.len() {
                    let bytes_written = buffer.write(&bin[pos..]).unwrap();
                    pos += bytes_written
                };
                ctx.binary(bin)
            },
            Ok(ws::Message::Close(reason)) => {
                ctx.close(reason);
                ctx.stop();
            }
            _ => ctx.stop(),
        }
    }
}

You can view the complete working example in this repo: https://github.com/vnderlev/actix_ws_file_transfer (adapted from the official actix/example repository).

I hope this answer helps you.