I'm not sure what I'm missing to make this app work correctly on Google Cloud when it comes to Websockets

Question

I have deployed a real-time drawing application to Google Cloud, where multiple users can see others draw and join in too.

The problem I have been having with my code is this part:

var socket = io.connect("http://bla-bla-1234.appspot.com:8080");

When the address is left like this, I often get errors displayed to the console such as WebSocket Error: Incorrect HTTP response. Status code 400, Bad Request when testing on IE or Firefox can't establish a connection to the server at wss://bla-bla-1234.appspot.com/socket.io/?EIO=3&transport=websocket&sid=ULP5ZcoQpu0Y_aX6AAAB. when testing on Firefox.

I have changed the parameters of var socket = io.connect(); so much just to see if I can see some live drawing, in some cases I have been able to but not smooth drawing, Where multiple lines will come up on the screen by one user, when all you're doing is drawing the line once. And often come up with errors such as: Websocket connection to '//bla-bla-1234.appspot.com/socket.io/?EIO=3&transport=websocket&sid=dJqZc2ZutPuqU31HAAX' failed: Error during WebSocket handshake: Unexpected response code: 400.

Here is what allows the connection to server and what allows the data to be displayed to all clients connected on the client.js file, this is not all the code but I felt this part was the most relevant to this issue:

var socket = io.connect("bla-bla-1234.appspot.com");

socket.on('draw_line', function (data) {
        var line = data.line;
        context.beginPath();
        context.strokeStyle = "#33ccff";
        context.lineJoin = "round";
        context.lineWidth = 5;
        context.moveTo(line[0].x, line[0].y);
        context.lineTo(line[1].x, line[1].y);
        context.stroke();
    });

I have tried to add a port (8080) within the parameter but only to receive an error such as this:

XMLHttpRequest: Network Error 0x2efd, Could not complete the operation due to error 00002efd.

I guess my guess my question is, how do I go about figuring out the right address within the parameters and have it work as in intended (live) smoothly?

Thanks in advance.

Answer 1

I contacted the support because I had the same issue.

The answer is short: Google App Engine's Managed VM don't support WebSockets at the moment.

Until that feature is implemented, the only way to possibly make it work is to force Socket.io to use long-polling.

They told me that. But I didn't try. In my case, I'll try to switch to Google Compute Engine instead.

Edit: I've got other info from Google. Let me quote @jmdobry's answer :

Currently, only the ws:// protocol is supported ( not wss:// ), and in order to use websockets you need to get the external ip address of the machine your app is running on. Unfortunately, socket.io does something in their implement that doesn’t work yet, though we have an example of using websockets manually and accessing the metadata to get the external ip address: https://github.com/GoogleCloudPlatform/nodejs-docs-samples/tree/master/appengine/websockets

Edit 2: I managed to make my app work on Google Compute Engine. It's a bit more complicated and time consuming, and to be honest, I didn't understand 100% of the steps. But I followed this section of the tutorial (with some minor changes like the project name in all the files), and it went well: https://cloud.google.com/nodejs/getting-started/run-on-compute-engine