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.

Celeo Celeo · Accepted Answer · 2015-06-13T05:17:11

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.

How to connect to Flask-WebSocket server?

1 Answers