Tag Archives: html5

So recently one of my project allow me to have experience on gevent-socketio. While the code is open source, it can be complicated. Thus the example I show here, while not serious hopefully will make things easier to see.

Before we can start to create a view for socket-io you will need to define the namespace to be used

Ping Pong Namespace

Python

1

2

3

4

5

6

7

8

9

fromsocketio.namespace importBaseNamespace

classPingPong(BaseNamespace):

defon_ping(self,attack):

ifattack['type']=='fireball':

foriinrange(10):

self.emit('pong',{'sound':'bang!'})

else:

self.emit('pong',{'sound':'pong'})

The gevent-socketio library uses Namespace as the view logic, all the logics will be in a namespace, along with namespace, there is also Mixins that is built on top of namespace that provide extra functionality, gevent-socketio provide BroadcastMixin and RoomMixin, which is useful.

line 3: We create our namespace by subclassing Namespace Class

line 4: This is method defined by us. We prefix on_ to an event that we want to process. In this case it is the ping event. The event will be send from socketio client. The parameter attack, that is essentially the payload that we will be receiving, and we don’t need to do any conversion from json to dict, as the library handle it for us.

line 7 and 9: Self.emit will emit an event to the socketio client, again the dict, is the payload that will be sent, no converstion to json necessary.

Now we can finally define a view

socket-io view

Python

1

2

3

4

5

6

7

8

9

10

fromflask importFlask

fromflask importrequest

fromsocketio importsocketio_manage

app=Flask(__name__)

@app.route('/socket.io/<path:remaining>')

defpingpong(remaining):

socketio_manage(request.environ,{'/pingpong':PingPong},request)

return'done'

This is the view for socketio. app is just your standard flask app.

line 7: is the route necessary for the socketio client to connect

line 9: this is the same across socketio app, the difference here is the namespace ‘/pingpong’ and the namespace PingPong, that you will need to define yourself.

Now to serve this guy

1

2

3

4

5

6

7

8

9

from socketio.server import SocketIOServer

# app will be somewhere around here

def main():

SocketIOServer(('',5000),app,resource="socket.io").serve_forever()

if__name__=="__main__":

main()

line 6: this will be the line that serve the app. It will serve all the views include the non-socketio one.

I will skip the view to render the main page and the html, I will focus on the javascript alone.

the javascript code

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

$(function(){

varsocket=io.connect('/pingpong');

socket.on('pong',function(data){

console.log('pong')

console.log(data)

$('#result').append(data.sound+'<br/>');

});

$('.ping').click(function(event){

event.preventDefault();

attack=$(this).data('attack');

console.log(attack);

socket.emit('ping',{'type':attack})

});

});

line 2: This is how you define a socket io.connect(‘/namespace’)

line 10: We bind a javascript click an event, to send an event we use socket.emit(event,data). data will be a javascript object, event will be a string, notice the on_ping method on the Namespace we define on top.

line 3: As the socketio server emit a pong event, this will event handler and do something with it in callback. Again don’t worry about conversion, the data is converted into a javascript object.

Hopefully this will make things slightly clearer. Btw the example on github.