[JavaOne] Demystifying WebSockets - Build a Cool, Real-time Multi-player Game with Java EE

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 1


Demystifying WebSockets Build a Cool, Real-time Multi-player Game with Java EE

Vivek Ganesan ([email protected])

Apps Engineer, Oracle

http://www.vivekganesan.com


Program Agenda

Introduction – What are WebSockets?

TypeRace – Live Demo

Game Flow & Messages

Code Walk-through

Q&A


Let’s get some

perspective


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


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


Come on! Let’s

watch the Game in

action!


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


TypeRace – What happens behind the scenes?


Creating a WebSocket – Java Script


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


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


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


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


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


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


Come, let’s walk

through the code


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


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

https://github.com/vivganes/TypeRace

http://www.websocket.org/echo.html

https://blogs.oracle.com/arungupta/entry/collaborative_whiteboard_using_websocket_in

http://www.html5rocks.com/en/tutorials/websockets/basics/

https://oraclein.activeevents.com/connect/search.ww


Questions???


Graphic Section Divider


Engineering

[JavaOne] Demystifying WebSockets - Build a Cool, Real-time Multi-player Game with Java EE