How to connect to Flask-WebSocket server?

Question

I am following this tutorial to try and use Flask-WebSockets in my app.

http://blog.miguelgrinberg.com/post/easy-websockets-with-flask-and-gevent

My problem is that I don't know how to properly connect to the server.

When I make calls to my flask app, they are in the form:

http://localhost:80/myapp/<route_goes_here>

My app is structured as follows:

couponmonk/venv/couponmonk
    __init__.py
    views.py
    templates/
        index.html

__init__.py

from flask import Flask
from flask.ext.sqlalchemy import SQLAlchemy
from sqlalchemy.orm import sessionmaker
from sqlalchemy import *
from flask.ext.socketio import SocketIO, emit       

app = Flask(__name__)    
socketio = SocketIO(app)                                                                                                                             
engine =  create_engine('mysql://root:my_password@localhost/my_db_name') 
DBSession = sessionmaker(bind=engine)

import couponmonk.views

views.py

from couponmonk import app, DBSession, socketio

@socketio.on('my event', namespace='/test')
def test_message(message):
    emit('my response', {'data': message['data']})


@app.route('/', methods = ['GET'])
def index():
    return render_template('index.html')

Given my setup, where should I put this line:

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

I'm also not sure what address to put for the following line in index.html:

index.html

The code in this file is identical to this (https://github.com/miguelgrinberg/Flask-SocketIO/blob/master/example/templates/index.html)

var socket = io.connect('what to put here?');

I've tried http://localhost:80/test and get no response. I'm not sure if the namespace should be part of the address or not.

Thanks for your help.

Answer 1

var socket = io.connect('what to put here?');

Is JavaScript, so that'll need to go into a <script> tag somewhere, probably your head.

In the tutorial, scroll to A SocketIO Client - this section starts talking about the client side of the websocket: the JavaScript.

We can also look at the example's code on GitHub to see that section. Finally, the documentation also has HTML in the second code section.