Is the ws WebSocket client broken? echo.websocket.org demo fails with a 404 when run locally

Question

I’m running the echo.websocket.org demo for the ws WebSocket library on my local machine.

var WebSocket = require('ws');                                            
var ws = new WebSocket('ws://echo.websocket.org/', {                      
  protocolVersion: 8,                                                     
  origin: 'http://websocket.org'
});

ws.on('open', function open() {
  console.log('connected');
  ws.send(Date.now().toString(), {mask: true});
});

ws.on('close', function close() {
  console.log('disconnected');
});

ws.on('message', function message(data, flags) {
  console.log('Roundtrip time: ' + (Date.now() - parseInt(data)) + 'ms', flags);

  setTimeout(function timeout() {
    ws.send(Date.now().toString(), {mask: true});
  }, 500);
});

I compiled this code with Browserify (details in the repo) and tested it in Chrome and Safari.

It fails with a 404 on Chrome 51.0.2704

Fetch API cannot load http://echo.websocket.org/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

It fails with a 400 on Safari 9.1.1

Failed to load resource: the server responded with a status of 400 (WebSocket Upgrade Failure)

In troubleshooting this, I set up a local WebSocket server with Node.js/Express, created a WebSocket client using SwiftWebSocket on iOS, and was able to open a connection successfully. I then pointed the code above to this new URL, and the connection still fails.

Is the ws client broken?

what do you mean by "browser-based WebSocket clients"? how did chrome run node code in order to 404, and where does `fetch` come in, and why would you fetch the ws url? — dandavis, Jul 22 '16 at 19:13
@dandavis I need a functional WebSocket client written in Javascript. That’s all I meant. I use browserify to compile, then have an HTML file which points to the compiled script. I don’t know where Fetch is coming from. The `ws` docs don’t mention it as a dependency, and I haven’t installed any node modules beyond what the demo called for. — Daniel Sauble, Jul 22 '16 at 19:48
Interestingly enough, Safari has a slightly different error, which I’ve pasted above. I wonder if Fetch is a Chrome-specific thing. — Daniel Sauble, Jul 22 '16 at 19:53

score 0 · Answer 1 · edited Oct 07 '21 at 13:28

0

I misunderstood how WebSocket works.

WebSocket is a standard that is implemented in most browsers. You don’t need a separate library. The following Javascript is all that’s needed to establish a WebSocket connection.

var ws = new WebSocket('wss://hostname')

edited Oct 07 '21 at 13:28

Community

1
1

answered Jul 22 '16 at 21:16

Daniel Sauble

33
6

score 0 · Accepted Answer · answered Jul 22 '16 at 21:19

here's a slight simplification that works in browsers as-is:

var ws = new WebSocket('ws://echo.websocket.org/');

ws.addEventListener('open', function open() {
  console.log('connected');
  ws.send(Date.now().toString(), {mask: true});
});

ws.addEventListener('close', function close() {
  console.log('disconnected');
});

ws.addEventListener('message', function message(data, flags) {
  console.log('Roundtrip time: ' + (Date.now() - parseInt(data)) + 'ms', flags);

  setTimeout(function timeout() {
    ws.send(Date.now().toString(), {mask: true});
  }, 500);
});

just kill the require, and change on to addEventListener...

you should be able to use any valid URL on the first line.

Is the ws WebSocket client broken? echo.websocket.org demo fails with a 404 when run locally

2 Answers2