Robert Kawecki
"Retro JS talk: modern browser communications"
2017-02-08
What does it take to talk?
- Speaking (requests)
- Listening (responses / updates)
The Dark Ages
- No XHR - just forms
- PHP/FI or own CGI
- (i)frames with user polls
Work-arounds
- GET as data-sending mechanism
- Update delivery: infinite <script>
- No error handling
:-(
<script type="text/javascript" language="JavaScript">
function processUpdates(updates) {
// ...
document.write('<script src="/updates/js" type="text/javascript" language="JavaScript"></script>');
}
</script>
<script src="/updates/js" type="text/javascript" language="JavaScript"></script>
Enter XMLHttpRequest
- Wind to the Web 2.0 sails
- Event-driven asynchronous requests
- Used by most single-page apps and REST clients
:-)
var req = new XMLHttpRequest();
req.open('GET', '/updates/xhr', true); // async
req.onreadystatechange = function() {
// ...
};
req.send();
Long polling (Comet)
- XHR that waits for server response
- One request for every update ("dead time")
Active listening
req.onreadystatechange = function() {
if (req.readyState === 4) {
if (req.status === 200) {
// Process the response and...
poll();
} else {
setTimeout(poll, 5000);
}
}
}
XHR issues
- Cumbersome name, not really related to XML
- HTTP Pipelining
- JSON-RPC 2.0 bulk request
When in doubt, simplify
- Server-sent events since Firefox 6 (2011)
- Simple format, auto-reconnect
- No IE/Edge support
- Updates only
Server-sent Events
const updates = new EventSource('/updates/sse');
updates.onmessage = function(data) {};
Sockets for the masses
- Bi-directional full-duplex goodness
- Persistent connection, low overhead
- No request-response requirement
WebSocket
const socket = new WebSocket('/updates/ws');
socket.addEventListener('message', myMessageHandler);
socket.addEventListener('open', function() {
socket.send('hey, got any data?');
});
socket.addEventListener('error', function(error) {
// Oops...
});
socket.open();
The difficulty
- Manual reconnection and state management
- Socket object non-reusable
- Non-obvious REST implementation
