Native Connections
Before you can do anything with a user's Scatter you need to create a connection to it's WebSocket server.
Let's look at how we can do this using standard WebSockets.
const host = '127.0.0.1:50005';
const socket = new WebSocket(`ws://${host}/socket.io/?EIO=3&transport=websocket`);
A few things to remember.
-
Don't use wss:// yet, as self-signed Scatter certificates are not yet supported and there is no SSL websocket support.
-
Even if you're connecting using standard WebSockets always use the /socket.io/?EIO=3&transport=websocket suffix
when creating a connection to Scatter. This allows fake handshakes/upgrades to socket-io.
-
You'll want to keep the socket variable on the Socket Service's outer scope ( not within any function's scope ) so that you can use it later.
When connected
Once the socket is connected ( usually handled in the socket.onopen method ) you need to send back an ACK ( acknowledgement ) that you have
connected to the socket which promotes upgrading/handshaking.
socket.onopen = () => {
socket.send('40/scatter');
}
Breaking it down - 40 is broken down into two parts, the 4 and the 0.
4 in engine-io ( what socket-io runs on top of ) is the "message" code, and 0 is the "connect" code.
Essentially what we are telling the socket to do here is send a "message" of "connect".
The 2 code which we will see later, refers to an "event".
- /scatter is the namespace that Scatter uses on top of the socket.
In your response handler
We haven't set this up yet, but keep this part in mind. Initially you will get back an ACK from Scatter about the handshaking/upgrading.
You should disregard this response when handling events.
socket.onmessage = msg => {
// Disregarding Handshaking/Upgrading
if(msg.data.indexOf('42/scatter') === -1) return false;
// ... handle API responses below
}
The above is just some JavaScript checking that the message.data always includes 42/scatter in it, which
as we discussed before means that the message is an event and not a connect message.