WebSocket (Tutorial 01 – Java Server + JavaScript Client + GlassFish 4.0 + JDK 1.7)


for this tutorial i’m gonna be using eclipse
Juno and i’m gonna go to the Eclipse Marketplace
and look for glassfish will be under application server
i’m gonna pickup this one GlassFish Tools for Juno next i’m gonna go ahead and create a new web
project that i’m gonna call WebSocketPrj01 and it’s gonna be running on GlassFish 4 and
i downloaded GlassFish 4 and unziped it so i’m gonna put this directory as the GlassFish
server directory and as JRE i’m gonna use so i have my JDK 1.7 under here c:Program
FilesJava gonna pick this up and i’m gonna be using this jdk now here gonna go ahead
and create a new class i’m gonna call ServerEndpointDemo and that i’m gonna put in this package
and i’m gonna annotate it as a ServerEndpoint that i’m gonna be accessing as the project
name and than /serverendpointdemo and here i’m gonna have four methods a handleOpen()
and a handleClose() and a handleError() and a handleMessage() so essentially i’m gonna
be opening a connection to the client and than exchanging messages with that client
and than closing the connection and in case of errors use this method the handleError
method so i’m gonna annotate the handleOpen method with the OnOpen and the handleClose
with the OnClose annotation and the handleError with the OnError annotation and the handleMessage
with the OnMessage so the handleOpen is gonna be called once
when the connection is created is established so gonna say ‘client is now connected’ and
the handleClose is called when a disconnect happen i’m gonna say ‘client is now disconnected’
and for the error i’m just gonna printout the stack trace now for handling the message
coming from the client i’m gonna start by printing out that message so i’m gonna say
‘receive from client’ and that’s gonna be the message and my reply to the client is
gonna be that message that i received + adding ‘echo’ to it so ‘echo’ and the message and
i just printout what i’m gonna be sending to the client and gonna be returning that reply message
next let me go ahead and create the client html page i’m gonna call it default.html and
the title is gonna be WebSocket Tutorial 01 now here in the body gonna have a text field
and a button that when clicked i’m gonna call a javascript function sendMessage() and i’m
also gonna have a textarea where i’m gonna be displaying the interaction between this
client and the server and i’ll put my javascript code here
and the first thing i’m gonna do when this page is up is to connect to the websocket
server i’m gonna do new WebSocket and gonna be here so i’m localhost:8080 and the project
name is WebSocketPrj01 and serverendpointdemo that i specified here and like the java code
on the server side i’m gonna need four methods here in the javascript i’m gonna need a processOpen
method and this method is gonna be called if a connection is created with the server
so the onopen event is fired and so when this happens the processOpen method is called and
let me pick up this messagestextArea here and i’m gonna be displaying in that textarea
‘Server Connect’ and going to a new line next i’m gonna be handling connection closing events
so the onclose events in processClose method and here i’m gonna be adding this message
‘Server Disconnect’ to the textarea and let me also send a message to the server telling
it that the client is disconnected now so ‘client disconnected’ message and in case
there is an error event so onerror event i’m gonna be handling it in the processError method
and essentially all what i’m gonna have in this method is a addition of ‘error’ message
to the textarea and let me also add this sendMessage() method that is gonna be called when that button
is clicked i’m gonna go ahead and put it here so here i’m gonna be picking up what the user
entered in the text in the text field and gonna go ahead and send it to the server and
i’ll add this textMessage that was sent to server in the textarea in the messagesTextArea
and let me go ahead and clear out the textMessage text field after the message is sent i’m gonna
set the value to empty now in case the user entered ‘close’ in this text field i want
to ‘close’ the connection so what i wanna do here is to check if it’s different than
close what the user entered than i’m gonna go ahead and send the message otherwise i’m
gonna go ahead and close the websocket connection and the server sends a message gonna have
an onmessage event and i’m gonna be handling that event in the processMessage method and
in that method all what i’m gonna have is printing out what was received from the server
to the messagesTextArea next let me go ahead and run it open up the servers view also ok
i don’t think it’s gonna work on the internal browser so let me open up chrome and it works
on chrome so copy it ok so it connected the server i have the server connect message which
here coming from here processOpen and let me send a message so ‘test 123’ and so ‘send
to Server’ is ‘test 123’ and ‘Receive From Server’ is the ‘test 123’ added to it the
‘echo’ and on the server side i have i receive from the client ‘test 123’ and i send back
‘echo test 123’ let’s try another one so ‘test 456’ same thing ‘Send to Server’ and ‘Receive
From Server’ and ‘receive from client’ and ‘send to client’ let me try to close the connection
i do ‘close’ so ‘Server Disconnect’ and so ‘client is now disconnected’ and let me try
to send some more so ‘test 789’ so it sent it to the server but the server didn’t receive
anything and it didn’t reply with anything so essentially the connection is closed

28 Comments

Add a Comment

Your email address will not be published. Required fields are marked *