Deploying Simple Socket.io Flask App To Google App Engine: Still Unsolved

Question

im trying to deploy a small flask app that uses socket.io to host a small live chat website

I was able to successfully run it locally (127.0.0.1)

then I went to deploy it to the google app engine with the following files:

main.py

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
app.config['SECRET_KEY'] = 'vnkdjnfjknfl1232#'
socketio = SocketIO(app)


@app.route('/')
def sessions():
    return render_template('session.html')

def messageReceived(methods=['GET', 'POST']):
    print('message was received!!!')

@socketio.on('my event')
def handle_my_custom_event(json, methods=['GET', 'POST']):
    print('received my event: ' + str(json))
    socketio.emit('my response', json, callback=messageReceived)

if __name__ == '__main__':
    socketio.run(app, debug=True)

app.yaml

runtime: python

network:
  session_affinity: true

requirements.txt

Flask==0.12.2
flask-socketio
eventlet==0.17.4
gunicorn==18.0.0

alongside a completely functioning HTML page containing the following script:

    <form action="" method="POST">
      <input type="text" class="username" placeholder="User Name"/>
      <input type="text" class="message" placeholder="Messages"/>
      <input type="submit"/>
    </form>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
    <script type="text/javascript">
      var socket = io.connect('https://' + document.domain + ':' + location.port);

      socket.on( 'connect', function() {
        socket.emit( 'my event', {
          data: 'User Connected'
        } )
        var form = $( 'form' ).on( 'submit', function( e ) {
          e.preventDefault()
          let user_name = $( 'input.username' ).val()
          let user_input = $( 'input.message' ).val()
          socket.emit( 'my event', {
            user_name : user_name,
            message : user_input
          } )
          $( 'input.message' ).val( '' ).focus()
        } )
      } )
      socket.on( 'my response', function( msg ) {
        console.log( msg )
        if( typeof msg.user_name !== 'undefined' ) {
          $( 'h3' ).remove()
          $( 'div.message_holder' ).append( '<div><b style="color: #000">'+msg.user_name+'</b> '+msg.message+ "\n" + '</div>' )
        }
      })
    </script>

here's the link so you can see what's happening: https://flask-chat-for-mckenna.wl.r.appspot.com/

Update

I don't get a 405 anymore after changing my endpoint from HTTP to HTTPS (thank you Simeon Nedkov!) It seems that it's having trouble connecting? it takes longer than usual to stop buffering

all code is up to date

thanks in advance!

Answer 1

The error is informing you that the browser refused to access an insecure endpoint.

This happens when a page served over https://... tries to access a resource that lives at http://....

Luckily, in this case you're in control of the unsecure endpoint and can fix the problem by changing

var socket = io.connect('http://' + document.domain + ':' + location.port);

to

var socket = io.connect('https://' + document.domain + ':' + location.port);