HTML and CSS Reference
In-Depth Information
Note
In both XML and JSON cases, the server should send you a string value, not the
actual XML/JSON file (which would be of binary type, of course)!
ArrayBuffer
ArrayBuffer contains structured binary data. The key term here is structured , which
means that the enclosed bits are given in an order, so that you can retrieve portions
of them. In order to manipulate an ArrayBuffer for specific formats, you need to cre-
ate the corresponding ArrayBufferView object.
ArrayBuffers are really handy for storing image files. Suppose that your chat-room
guests can exchange images by dragging and dropping image files on the chat win-
dow. Following code explains how JavaScript handles the drop event in HTML5
browsers:
document.ondrop = function(event) {
var file = event.dataTransfer.files[0];
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function() {
socket.send(reader.result);
}
return false;
}
In the preceding code snippet, you firstly create an event handler for the drop event.
The event handler takes one parameter, which lets you access the dropped files.
You only drop one single image, so you need the zero-indexed file. After that, you
create a file reader that reads the file's data as an ArrayBuffer. When the reader has
finished processing the file, you handle the onload event where you send the image
to the web server using your WebSocket.
Search WWH ::




Custom Search