IEMS 5722 Mobile Network Programming and Distributed Server Architecture

Transcription

1 Department of Information Engineering, CUHK MScIE 2 nd Semester, 2016/17 IEMS 5722 Mobile Network Programming and Distributed Server Architecture Lecture 10 Web Sockets for Real-time Communications Lecturer: Albert C. M. Au Yeung 16 th March, 2017

2 Web Sockets 2

3 Limitations of HTTP All of the examples we have gone through in network programming so far can be regarded as using the pull method Communication is always initiated by the client Client pulls data or services from the server when necessary (e.g. when the user launches the app, or presses a button) 1 Client requests to be served by the server Server responds with the data or service requested by the client 2 Application Server (E.g. Web server, server, translation server) 3

4 Limitation of HTTP HTTP is a pull-based protocol Users browse the Web and actively decide which Website to browse, which link to follow A effective and economical way (every user chooses what he needs) However, if some resources are regularly requested, the pull model can put heavy load on the server 4

5 Implementing Push The World Wide Web, and in particular the HTTP protocol, is designed for pull, and additional engineering is required to implement push on the Web Some ways to emulate push on the Web Polling (Periodic pull) The Comet model BOSH WebSockets 5

6 WebSockets A protocol providing full-duplex communications channels between two computers over a TCP connection Designed to be implemented in Web browsers and Web servers HTTP is half-duplex: only one side can send data at a time, like walkie-talkie Communications are done over TCP port 80 (can be used in secured computing environments) Supported in Chrome 14, Safari 6, Firefox 6, IE 10 or later versions Reference: 6

7 WebSockets A persistent connections between a Web browser (or a mobile app) and a server Both sides can send out data to the other side at any time Why WebSocket? Lower latency (avoid TCP handshaking) Smaller overhead (only 2 bytes per message) Less unnecessary communication (data is only sent whenever needed) 7

8 WebSockets WebSocket is part of the HTML5 standard Supported in latest versions of major Web browsers Simple API in JavaScript Libraries also available on ios and Android var host = 'ws://localhost:8000/example'; var socket = new WebSocket(host); socket.onopen = function() { console.log('socket opened'); socket.send('hello server!'); } socket.onmessage = function(msg) { console.log(msg); } socket.onclose = function() { console.log('socket closed'); } Try the game at 8

9 WebSockets Particularly useful when you would like to develop applications such as: Real-time multiplayer games Chat rooms Real-time news feed Collaborative apps (e.g. consider something like Google Documents) Live commenting 9

10 WebSockets Design principles of WebSockets An additional layer on top of TCP Enable bi-directional communication between client and servers Support low-latency apps without HTTP overhead Web origin-based security model for browsers Support multiple server-side endpoints 10

11 WebSockets How does WebSockets work? 1. WebSocket handshake Client sends a regular HTTP request to the server with an upgrade header field GET ws://websocket.example.com/ HTTP/1.1 Origin: Connection: Upgrade Host: websocket.example.com Upgrade: websocket WebSockets uses the ws scheme (or the wss scheme for secure connections, equivalent to HTTPS) If server supports WebSockets, it sends back a response with the upgrade header field HTTP/ WebSocket Protocol Handshake Date: Wed, 16 Oct :07:34 GMT Connection: Upgrade Upgrade: WebSocket 11

12 WebSockets Once the handshake is completed: The initial HTTP connection will be replaced by the WebSockets connection (using the same underlying TCP/IP connection) Both the client and the server can now start sending data to the other side Data are transferred in frames Messages (payload) will be reconstructed once all frames are received Because of the established WebSockets connection, much less overhead will be incurred on the message being transmitted Check whether a browser supports WebSockets: 12

13 socket.io 13

14 socket.io A library based on node.js for real time, bi-directional communication between a server and one or multiple clients Using WebSocket to perform data communication (fall back to older solutions when WebSocket is not supported) Official Website: Originally written for node.js on the sever side and JavaScript on the client side, there are now libraries for Python, Android and ios 14

15 socket.io socket.io has two parts: 1) Server and 2) Client Client libraries are available in JavaScript (Web), Android and ios Allow you to build real-time apps across multiple platforms socket.io-client (JavaScript) socket.io (Server Side) socket.io-client (Android) References ios Client: Android: socket.io-client (ios) 15

16 socket.io Event-driven Once connected, the server and client can communicate with each other by triggering or emitting events Create callback functions to carry out different actions whenever some events happens 16

17 socket.io Flow of creating a server-side program Create Socket.io Server Listen for incoming connections Wait for events to happen Handle events 17

18 socket.io Flow of creating a client-side program Connect to a Socke.io Server Wait for events to happen Handle events 18

19 Flask-SocketIO 19

20 Flask-SocketIO A module that allows you to use socket.io in Flask applications Install using the following command: $ sudo pip install flask-socketio Note: install the concurrent networking library Eventlet as well: $ sudo pip install eventlet 20

21 Flask-SocketIO Initialization You need to provide a secret key for Flask to encrypt data for user sessions from flask import Flask, render_template from flask_socketio import SocketIO app = Flask( name ) app.config['secret_key'] = secretkey socketio = SocketIO(app) Setup the app to use functions of socket.io if name == main : socketio.run(app) This is for debugging purpose, we will discuss how to deploy applications that using socket.io soon 21

22 Flask-SocketIO Remember we mentioned that in Socket.io all communications are based on events We will have to define handlers of events in our Flask application For def handle_message(message): # Actions to be performed when a message is received #... The name of the event (NOTE: some names cannot be used because they already represent some special events) 22

23 Events Both the server and the client can generate events, and if the other side has a handler of that event, the handler will be invoked to carry out some actions In Flask-SocketIO, there are several different types of evetns Special events ( connect, disconnect, join, leave ) Unnamed events ( message or json ) Custom events (a name of your choice, e.g. my event ) 23

24 Events Connection events # Will be invoked whenever a client is def connect_handler(): print "Client connected. # Will be invoked whenever a client is def disconnect_handler(): print "Client disconnected." 24

25 Events Unnamed events # Will be invoked whenever an unnamed event def message_handler(message): print "message received: %s" % message # Will be invoked whenever an unnamed event happens (with JSON def disconnect_handler(json): print "json received: %s" % str(json) 25

26 Events Custom events are events with custom-defined names # Will be invoked when the client emits an event of the type def event001_handler(json): print "json received: %s" % str(json) 26

27 Events The server can send message to clients by creating events using the send() function or the emit() function The send() function is for sending unnamed events The emit() function is for sending custom named events from flask_socketio import send, def handle_message(message): def handle_json(json): send(json, def handle_my_custom_event(json): emit('event001', json) 27

28 Broadcasting Normally, send and emit only send message to Broadcasting allows you to send a message to all clients who are connected to the server For example, in a multi-player game, one user performs an action, and you want this to be known to all other def handle_event001(data): emit('event001', data, broadcast=true) Set broadcast=true when emitting a message 28

29 Rooms In some applications, users may interact with only a subset of other users Examples: Chat application with multiple rooms Multiplayer games (multiple game boards, game rooms, etc.) from flask_socketio import join_room, def on_join(data): username = data['username'] room = data['room'] join_room(room) send('user_join', '%s joined' % username, def on_leave(data): username = data['username'] room = data['room'] leave_room(room) send('user_leave', '%s left' % username, room=room) 29

30 Deploying Flask-SocketIO If you have eventlet installed, you can use the embedded server which is production-ready Invoked by socketio.run(app, host=" ", port=5000) Sample supervisor configuration files: [program:iems5722_socket] command = python app.py directory = /home/albert/iems5722 user = albert autostart = true autorestart = true stdout_logfile = /home/albert/iems5722/app.log redirect_stderr = true 30

31 Deploying Flask-SocketIO If you would like to deploy a single Flask app including both your APIs and the socket.io event handlers, use Gunicorn. For example: [program:iems5722] command = gunicorn --worker-class eventlet -w 1 app:app b localhost:8000 directory = /home/albert/iems5722 user = albert autostart = true autorestart = true stdout_logfile = /home/albert/iems5722/app.log redirect_stderr = true 31

32 What can you do with socket.io? Real-time chat rooms Real-time multiplayer games Real-time event broadcasting (e.g. real-time results of a competition or an event) And a snake game across multiple screens! ( 32

33 Socket.io on Android 33

34 34 socket.io on Android A socket.io client library for Java and Android Source code and set-up guide: To use the library in your Android project, add the following dependency to your build.gradle file under the app directory compile ('io.socket:socket.io-client:0.7.0') { exclude group: 'org.json', module: 'json }

35 socket.io on Android Creating a socket.io client in Android The URL of the socket.io server private Socket public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.my_activity); } try { socket = IO.socket(" } catch (URISyntaxException e) { throw new RuntimeException(e); } socket.on(socket.event_connect_error, onconnecterror); socket.on(socket.event_connect_timeout, onconnecterror); socket.on(socket.event_connect, onconnectsuccess); socket.on("event001", onevent001); socket.connect(); Initiating a connection to the server Define callback functions (handlers) of different events 35

36 socket.io on Android Creating event handlers/listeners: private Emitter.Listener onconnectsuccess = new Emitter.Listener() { }; You must override this function call in your public void call(object... args) { JSONObject data = (JSONObject) args[0]; } This function is called on a new thread, NOT the UI Thread. You should NOT manipulate UI components here. There can be multiple parameters passed to this function (depending on the server). If it is JSON, cast it to a JSONObject or JSONArray. 36

37 socket.io on Android Sending string message back to the server socket.emit( event001, data ); You can also send JSON objects in the emit function: JSONObject json = new JSONObject(); json.put( name, Peter ); json.put( gender, male ); socket.emit( event001, json); 37

38 socket.io on Android Like many other things on Android, you need to manage the socket s life cycle: when the user leaves the activity, you should public void ondestroy() { socket.disconnect(); socket.off(); super.ondestroy(); } Use the off method to remove the event listeners 38

39 Example: Real-time Typing Update 39

40 Example A TextView for displaying what the server has sent out An EditText for user to input text Client receives the event, and update the TextView with what is received from the server Server receives the message, and emit another event to all connected clients When the text in this input area is changed, a event is emitted to the server 40

41 Example Server Application from flask import Flask, render_template from flask_socketio import SocketIO, emit app = Flask( name ) app.config['secret_key'] = 'iems5722 socketio = def update_handler(json): emit( 'update', {'text': json['text']}, broadcast=true) return if name == ' main ': socketio.run(app, host=" ", port=5000) 41

42 Example Android App Source code available at: 42

43 Multithreading and Handlers 43

44 Handlers Handlers is a component in the Android system for managing threads. A Handler object: Is associated with a particular thread and its message queue called looper Receives messages and runs code to handle the message Handler Looper (Message Queue) A reference to the handler of the UI thread handler UI Thread Send message to the queue, which will be processed on the UI thread Thread X 44

45 Handlers A handler will be associated with the thread in which it is created You need to override the handlemessage() method to specify the action(s) to be taken when a message is received public class MyActivity extends Activity { private static class MainHandler extends Handler public void handlemessage(message msg) {... } } Handler handler = new MainHandler();... Manipulation of UI components can be done here, as this will be performed on the UI thread 45

46 Handlers When you want to ask the UI thread to perform something, send a message to its handler... Runnable runnable = new Runnable() { public void run() {... String data = Message to send. ; Message msg = handler.obtainmessage(action_code, data); msg.sendtotarget(); } };... 46

47 Handlers A message can be created by using the Handler.obtainMessage(...) method You can supply up to four parameters to this method obtainmessage(int what, int arg1, int arg2, Object obj) A user-defined message code for identifying the type of message For passing integer parameters to the handler An arbitrary object to be sent to the handler Reference: 47

48 Handlers To extract parameters from the message in the handlemessage() method:... mhandler = new Handler() public void handlemessage(message msg) { if (msg.what == ACTION_CODE_1) { int arg1 = msg.arg1; int arg2 = msg.arg2; MyObject = (MyObject)msg.obj;... } else if (msg.what == ACTION_CODE_2) {... }... } }; Reference: 48

49 Embedding Data in Messages You can also embed data in the message using the setdata() method... Message msg = new Message(); Bundle data = new Bundle(); data.putstring( PARAM_1, String... ); data.putint( PARAM_2, 100);... msg.setdata(data); msg.what = ACTION_CODE_1; handler.sendmessage(msg); Then in the handlemessage() method you can retrieve the data like this: String str = msg.getdata().getstring( PARAM_1 ); 49

50 Example Android App Using handler and messages to handle communications between threads 50

51 Authentication & Authorization 51

52 User Authentication It is very likely that you would like your users to create an account in your app, and sign in to use its services Reasons: It is necessary: if your app needs to uniquely identify every user Track user s usage of the app Allow users to retrieve their data on different devices Present more personalised information and services... 52

53 User Authentication How should you implement your system to enable user authentication in your app? Basic functions Register an account by (or phone number) Validate user s address by sending him/her an activation Sign in using (or user name) and chosen password Authenticate the user whenever the app makes API requests 53

54 Registration A typical registration process: 6 Browser redirects the user back to the app to sign in App Browser 1 User registers using his/her address and a chosen password 2 Server Application Server creates a new entry in the database, with an activation code Database User reads the verification and opens the URL to finish the process 4 Client 3 Server sends a verification to the user s mailbox 5 Server updates the database and sets account to be activated 54

55 Sign In A typical sign-in process: User enters and password to sign in his/her account App and password sent to server for authentication Server Application Server checks whether the and password match any user record Database App stores the token for future use (e.g. for making other API calls) Server responds with the token generated for this user and device If a record is found, generate a token for the client 55

56 User Authentication Best practices for privacy and security concerns Do not store the password clear text in your database, hash it with a salt before sending it out from the app (e.g. using MD5 or SHA1, or more secure ones) Do not store user password in the device Use HTTPS whenever possible Validate user s input (e.g. and password), before sending them to the server References: 56

57 Authorization When using third party libraries, SDKs or APIs in your app, usually it requires the user to authorize your app to use data in another application Example: Retrieve your friend list from Facebook Retrieve your name and address from Google Retrieve your posts from Twitter or Weibo 57

58 Authorization For most Internet services, SDKs for Android and ios are available for integrating sign-in process in your app: Facebook Twitter Google+ Wechat 58

59 Authorization For asking for authorization to use data in another app, you should always use their latest SDK whenever possible These SDKs wrapped the process of asking authorization from the user Most of services perform authorization using OAuth2 (Open Authorization Version 2) It is not likely that you will have to implement the flow by yourself, but let s still take a look at it 59

60 Open Authorization (OAuth) To access a user s account and the data within, you need to have the user s username and password Does the following make sense? User gives your app his login information Your App Your app signs into the service on behalf of the user Third Party App / Service User Your app receives the data needed from the service 60

61 Open Authorization (OAuth) Never ask users to give away their password OAuth allows you to get access to user s data in another service without the need to ask the user for his user account Let s consider a scenario: You have developed a social app, and you want to access the user s friend list in Facebook, so that you can build up the social network in your app quickly 61

62 Open Authorization (OAuth) In OAuth, we have three entities: Resource Owner This is the user who is using your app Resource and Authorization Server In our case this is Facebook s server, which will authorize your app and serve the user s data to your app Client Your app, the application that the user is using 62

63 Open Authorization (OAuth) The flow of OAuth2 Resource Owner (User) 1 User accesses a function in your app that requires data from Facebook Your app redirect the user to Facebook s page, which will ask the user his /password, and ask whether he grants permission to your app 2 Client (Mobile App) 3 4 Facebook redirects the user back to your app, with an access token that your app can use to retrieve data Your app uses the token to access APIs exposed by Facebook Authorization Server Resource Server 63

64 Best Practices in Android Programming 64

65 Best Practices References Best Practices Android Best Practices for Performance Android 65

66 End of Lecture 10 66