I've found this great page that shows how to stream video.
His code assumes that the onmessage data is jpg like so
ws.onmessage = function (e) {
$("#image").attr('src', 'data:image/jpg;base64,'+e.data);
}
but I'd like to have audio and other page data as well.
How can WebSockets be made to parse message types and binary types?
The data in Websocket messages can be either string (text messages) or binary data. In your case it's string data, where the string content is the base64 encoding of a binary image.
In a better optimized program the image could be also transferred binary.
Depending on the message type, e.data will be of another type.
If the message is a text message then e.data will be of type string.
If the message is a binary message then e.data will contain either an ArrayBuffer or a Blob object. You can by yourself decide which representation of binary data you want to receive by setting the WebSocket.binaryType property (e.g. to "arraybuffer").
You can use instanceof to check if you received a binary or text message.
If you want to transfer different types of binary data you can use a header at the start of the message to tell the client what the message contains. E.g. declare the first byte of the binary data as header. If the first byte contains 1 then the remaining data is a picture, if the first byte contains 2 then the remaining data is a short audio sample, etc.
However it's a little more difficult on both sides since you need to split or combine the binary data array.
Alternatively you could use multiple parallel websocket connections between client and server. On for video data, one for audio data, one for general messages, etc.
Related
I want to know how to get all the data passed on the WebSocket
I alredy tryied using FireFox to see but all the data are strange unicode text and symbols (game link is https://sploop.io) is there an way to maybe decrypt it?
I also tryied using
var data= new WebSocket("usa1.sploop.io/ws")
data.onmessage = (sa)=>{console.log(sa)}
And after some actions in the game the code logged an object that didnt have any of the data...
You're already getting all the data the WebSocket is receiving. The problem is that the data is "encoded" binary data using the game's protocol. The scripts in Sploop.io know how to decode this data (and encode new data to be sent back), but since you don't "speak" that protocol, it looks like gibberish to you.
Problem aside, you can have fun and all, but trying to cheat or so isn't nice towards other players.
I've been looking through the entire Socket.IO docs, but, even though they promise it is there, I can't find a simple, minimal example, of how one would send binary data between server/client.
How is it done?
It is in fact in the documentation. The current documentation for Socket.io says under Socket.emit:
[...] Emits an event to the socket identified by the string name. Any other
parameters can be included. All datastructures are supported, including Buffer [...]
So, if you can send a buffer, you can send binary data. All you have to do is to pack your data into a Buffer object.
You may want to read Socket.io Binary Support and Sending and Receiving Binary
Starting from socket.io 1.0 it is possible to send binary data. http://socket.io/blog/introducing-socket-io-1-0/
How ever the way of sending and receiving binary data is not clear in the official documentation. The only documentation is:
var socket = new WebSocket('ws://localhost');
socket.binaryType = 'arraybuffer';
socket.send(new ArrayBuffer);
I suggest you to take a look at this answer, where you can find basic example with code implementation for server and client (javascript and java too):
How to send binary data with socket.io?
The good part is that it also works on Android! (if you wish)
Cheers
I have a file chunking operation that splits a file via File Reader into slices which are read via readAsArrayBuffer. I would like to send those chunks one at a time over my data channel WITH meta information attached (a chunk id, for instance). Like:
// Build chunk wrapper
var block = {
chunkId: id,
data: buffer
};
// Send the chunk to peer
channel.send(JSON.stringify(block));
Now when I send that data as is demonstrated above the data in the ArrayBuffer buffer is lost. I would like to emphasize I'm not having any trouble sending data over my data channel.
I would like to know how I can send that data with its associated meta information so that the file chunks can be reassembled in the correct order on the other side?
Do I need to do something like make an ArrayBuffer with two sub arrays, one with the meta information, and the other with the actual data or is there a simpler way?
There are many ways you can solve this, but basically you'll need to serialize, encode and deserialize, decode your data.
If you want to send your metadata with the data, you'll need to either serialize both to a uint8array or to a string, and do the inverted operation on the receiver side.
For example Sharefest utilizes a TLV protocol: https://github.com/Peer5/ShareFest/blob/master/core/protocol/BinaryProtocol.js
I'm stuck at the following situation.
I want to send bytes via http post, using javascript and jQuery to a server. I figured out that I can send bytes via String.fromCharCode(...) with a mime-type of application/octet-stream or text/plain; charset=x-user-defined
But now here's the problem. I have to send a specific amount of bytes with values greater than 127. (the packet, if sniffed in wireshark, has to consist of e.g. 5 bytes)
Is this possible with jQuery? Or is this possible with javascript at all?
(e.g. I need to send 1 byte --> 0xAF)
Is it possible to send this one byte, 0xAF ? Or will it be always 2 bytes because the value is bigger than 127?
To clearify this for whoever may concern.
The request is embedded in a HTTP-POST frame. This frame is, depending on its mime type, encoded.
For any textual encoding, including application/octet-stream, bytes are converted to its textual representation.
For byte values > 127, this means, there need to be 2 bytes to textual represent this.
In my case, i needed to ensure that a value of e.g. 128 MUST be 1 byte transmitted.(Through server piped requests to another protocol - modbus)
Solution was to use an arraybuffer, altough this meant IE>=10.
I want to send data from Javascript to a WebSocket server and also from a WebSocket server to Javascript.
I want to send this:
Headers
-------
Field 1: 2 byte hex
Field 2: 2 byte hex
Field 3: 4 byte hex
Data
----
Field1 : 2 byte hex
Field1 : 8 byte hex
From Javascript, I can send a two-byte value via
socket = new WebSocket(host);
...
socket.send(0xEF);
But I want to send multiple fields, together...let's say 0xEF, 0x60, and 0x0042.
How do I do this?
And, how to I interpret via Javascript data containing multiple fields coming from the WebSocket server?
You can send data as a string. For example:
socket.send("hello world");
I recommend you to use JSON as data format. You can convert JSON strings directly into objects and vice versa. It's so simple and useful!
You can send data as JSON objects.
socket.send(JSON.stringify({field1:'0xEF', field2:'0x60',field3: '0x0042'}));
Sound like what you are asking is how to send binary data over a WebSocket connection.
This is largely answered here:
Send and receive binary data over web sockets in Javascript?
A bit of extra info not covered in that answer:
The current WebSocket protocol and API only permits strings to be sent (or anything that can be coerced/type-cast to a string) and received messages are strings. The next iteration of the protocol (HyBi-07) supports binary data is currently being implemented in browsers.
Javascript strings are UTF-16 which is 2 bytes for every character internally. The current WebSockets payload is limited to UTF-8. In UTF-8 character values below 128 take 1 byte to encode. Values 128 and above take 2 or more bytes to encode. When you send a Javascript string, it gets converted from UTF-16 to UTF-8. To send and receive binary data (until the protocol and API natively support it), you need to encode your data into something compatible with UTF-8. For example, base64. This is covered in more detail in the answer linked above.