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.