[javaone] demystifying websockets - build a cool, real-time multi-player game with java ee
Post on 17-Jul-2015
104 Views
Preview:
TRANSCRIPT
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 2
Demystifying WebSockets Build a Cool, Real-time Multi-player Game with Java EE
Vivek Ganesan (vivek.ganesan@oracle.com)
Apps Engineer, Oracle
http://www.vivekganesan.com
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 3
Program Agenda
Introduction – What are WebSockets?
TypeRace – Live Demo
Game Flow & Messages
Code Walk-through
Q&A
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 5
A Brief History of the Web
Plain Old Web Need to refresh the whole
page in order to get updated
content
Pre-Ajax Ajax The real-time web
WebSocket Era No need of repeated
requests
Server pushes the
‘updates’ to browser on any
change.
AJAX Enabled Web Partial Page Refresh
possible
Updates ‘pulled’ by
browser by repeated
requests to server.
Improvement, one step at a time
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 6
A multi-player game
One person competes with
another in typing skills
Points awarded based on
accuracy and speed of typing
Person with more points at the
end of race time wins
A Sneak-peek at ‘TypeRace’
TypeRace
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 7
Come on! Let’s
watch the Game in
action!
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 8
Game Flow The Chronology
Player
1 Joins
Player
2 Joins
Game
over
Recalc
Scores
Player
1/2
Types
Wait until
Player 2 Joins
Browsers send
TYPE events to
server
Game Play
begins here
Server sends
updated
scores to
clients
TypeRace
One Time Event
Repeating Event
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 9
TypeRace – What happens behind the scenes?
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 10
Creating a WebSocket – Java Script
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 11
index.html
One and only HTML page
This is the landing page of the web application (as mentioned in web.xml)
Contains JavaScript code for WebSocket communication
Contains HTML elements for
Displaying Scores
Typing area
Displaying log (to notify about connection open, connection closed, error, etc)
Code Components Client Side
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 12
JARS used for the demo
grizzly-framework-2.3-rc1.jar
grizzly-http-all-2.3-rc1.jar
grizzly-websockets-2.3-rc1.jar
Code Components Dependencies
JARS used for the demo NetBeans IDE
NetBeans IDE 7.1.2 (Build 201204101705)
GlassFish Server
GlassFish Server Open Source Edition 4.0
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 13
TypeRaceApp.java
Extends WebSocketApplication class (org.glassfish.grizzly.websockets.WebSocketApplication)
Single class which contains all server-side logic of TypeRace
onMessage() method is over-ridden to do actions based on messages received from client (browser)
getWebSockets() returns all the web sockets currently connected to the application.
TypeRaceRegistrationServlet.java
Is nothing but a Servlet
Starts up automatically during initialization
On init, registers the TypeRaceApp to the WebSocketEngine at the URL end-point “/type”
web.xml
Registers the servlet TypeRaceRegistrationServlet at URL end-point “/type”
Specifies index.html as default welcome page
Code Components Server Side – The Grizzly Way
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 14
The Language of TypeRace – Client Side
PLAYER
• Request for Player Number
• Example: PLAYER ?
TYPE
• Event of typing a character
• Example: TYPE PLAYER1 C, TYPE PLAYER1 B, etc
List of Messages sent from Browser
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 15
The Language of TypeRace – Server Side
PLAYER
• Player Allocation (1 or 2)
• Example: PLAYER 1, PLAYER 2
COUNTDOWN
• Count down before game
• Example: COUNTDOWN 5, COUNTDOWN 4, etc
SCORE
• Current score of a player
• Example: SCORE PLAYER1 3, SCORE PLAYER2 5, etc
END
• Game Over
• Example: END
List of Messages sent from GlassFish Server
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 16
A Sample Conversation Game Play Simulation
Browser 1 Browser 2
PLAYER ?
PLAYER 1
PLAYER ?
PLAYER 2
COUNTDOWN 5,4,3,2,1,0 COUNTDOWN 5,4,3,2,1,0
TYPE PLAYER2 C* TYPE PLAYER1 C*
SCORE PLAYER1 2, SCORE PLAYER2 1 ** SCORE PLAYER1 2, SCORE PLAYER2 1 **
END END
* - Occurs when char typed, ** - Occurs every one second
PLAYER 1
Joins
PLAYER 2
Joins
Race In
Progress
Game
Over
Game About
to Start
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 17
Come, let’s walk
through the code
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 18
What are the modifications to be done after Java EE 7 is released?
No need for Grizzly Jars
Our TypeRaceApp class remains mostly the same.
Add an annotation @WebSocketEndPoint
Add an annotation @OnMessage to the current onMessage() method
TypeRaceAppRegistrationServlet is not needed.
Client Side code (HTML) remains the same.
Modifications after JSR - 356
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 19
Useful Links
Source code of TypeRace has been hosted as an open-source repo at
https://github.com/vivganes/TypeRace
Web Socket Tester - http://www.websocket.org/echo.html
Another WebSocket Tutorial -
https://blogs.oracle.com/arungupta/entry/collaborative_whiteboard_using_websocket_in
Java Script Help for WebSocket code - http://www.html5rocks.com/en/tutorials/websockets/basics/
JavaOne India 2013 Content Catalog - https://oraclein.activeevents.com/connect/search.ww
Useful Links
top related