SEEM4540 Open Systems for E-Commerce Lecture 11 Advanced Topics

Size: px

Start display at page:

Download "SEEM4540 Open Systems for E-Commerce Lecture 11 Advanced Topics"

Juliana Anthony
5 years ago
Views:

1 SEEM4540 Open Systems for E-Commerce Lecture 11 Advanced Topics

2 Push Notification The web has been largely built around the so-called request/response model A client loads up a web page and then nothing happens until the user clicks onto the next page. All HTTP communication was initialized by the client, which required user to take new data from the server actively.

3 Push Notification (cont d) In order for server to send data to the client (without the user request), we have a famous technique called Comet/Long Polling (well in the old days ) A client request a connection to the server. The connection is held open between the web client and the web server so that when the server has new information it can push it to the client. Once the server sent information to the client, the connection is then closed. A new connection is immediately established between the client and the server and then wait for another update from the server. Long polling works well for some cases such as online chatting Yet, it is not suitable for many applications such as online game.

4 WebSocket WebSocket is a protocol providing two-way communication channel over a single connection. There is an persistent connection between the client and the server and both parties can start sending data at any time. ws:// or wss:// (instead of or

5 WebSocket and Web Server Traditionally, in order to use WebSocket, we need to install or enable such service in our web server. We can install some modules in our Apache Web Server and Apache will have the WebSocket ability. However, Apache is not efficient to handle WebSocket packages. Another Web Server is called Nginx, which can handle WebSocket packages very well. Another way is to rely on some third party solution. In this course, we chose this approach.

6 Pusher URL:

7 Pusher (cont d) Server Library

8 A Simple Chat Room (client.html) <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery min.js"></script> <script src="//js.pusher.com/2.2/pusher.min.js" type="text/javascript"></script> </head> <body> <div style="margin-bottom:10px"> From: <input type="text" id="myname" name="myname"> To: <input id="toname" type="text" name="toname"> <input id="updatebutton" type="button" name="button" value="update"> </div> <div id="chatbox" style="width:500px; height:200px; border:solid"></div> <div style="margin-top:10px"> <textarea id="mymessage" style="width:500px; height:50px"></textarea> </div> <div> <input id="mybutton" type="button" name="button" value="send"> </div>

9 A Simple Chat Room (client.html) (cont d) <script type="text/javascript"> var pusher = new Pusher('xxxxxxxxxx'); $("#updatebutton").on("click", function(){ var channel = pusher.subscribe('chat'+$("#myname").val()); channel.bind('putmessage', function(data) { console.log(data); $("#chatbox").append(data['message']+"<br>"); }); }); $("#mybutton").on("click", function(){ $.ajax({ url: " data: "message="+$("#mymessage").val()+"&toname="+$("#toname").val() }); }); </script> </body> </html>

10 A Simple Chat Room (server.php) (cont d) <?php require('pusher.php'); $app_id = '109214'; $app_key = 'xxxxxxxxxx'; $app_secret = '2accdd3993da6a8e4d49'; $pusher = new Pusher($app_key, $app_secret, $app_id); $data['message'] = date("y-m-d H:i:s")." ".$_REQUEST["message"]; $pusher->trigger('chat'.$_request["toname"], 'putmessage', $data);?>

References http://rest.elkstein.org/ http://www.html5rocks.

11 References

Introduction. Using HTML 5 WebSockets we can dramatically reduce unnecessary network traffic and latency Haim Michael. All Rights Reserved.

Introduction. Using HTML 5 WebSockets we can dramatically reduce unnecessary network traffic and latency Haim Michael. All Rights Reserved. WebSocket Introduction HTML 5 WebSockets defines a communication channel that operates over the web and allows both direction communication over a single socket. Using HTML 5 WebSockets we can dramatically