What is Jaggery
Jaggeryjs is a cool javascript Framework that allows you to develop webbased application very easily, It reduce the development complexity by unifying the server side and client side development. You can tryout and and read all about Jaggery from http://jaggeryjs.org/
Downloading and running Jaggery
Since everything is well documented in the Jaggery website I won't be writing on these, So you can get all the details from here http://jaggeryjs.org/quickstart.jag#settingup
Developing Jaggery Application
Jaggery application has its old file structure, so if you want to easily create a Jaggery project then you can download WSO2 Developpder Studio, this can be also installed as a plugin to your existing Eclipse IDE. In this sample I will create necessary Folder structure and config files manually.
I will explain how to develop a simple Jageery Websocket server which will echo messages its receiving.
Ok Lets get started
Writing the WebSocket Server
Step 01
Create a Folder and lets name it "JaggeryWebsocket". In the folder create a new file "server.jag". This file will act as the server component of the websocket implementation.
Note : .jag is the extension used by Jaggery files.
Step 02
Now Add the following code segment to the server.jag file.
Writing The Client
Step 01
Now Create another file called "index.jag" and add the following code to the file.
Step 02
Now You can Add the project Folder into the Jagger y Server, You can place the Project folder in <JAGGERY_HOME>/apps directory ad start the server by going to the <JAGGERY_HOME>/bin directory. Now you can access the application from the flowing URL.
http://localhost:9764/JaggeryWebsocket/index.jag
Thank You for reading and comment below if you have any queries.
Jaggeryjs is a cool javascript Framework that allows you to develop webbased application very easily, It reduce the development complexity by unifying the server side and client side development. You can tryout and and read all about Jaggery from http://jaggeryjs.org/
Downloading and running Jaggery
Since everything is well documented in the Jaggery website I won't be writing on these, So you can get all the details from here http://jaggeryjs.org/quickstart.jag#settingup
Developing Jaggery Application
Jaggery application has its old file structure, so if you want to easily create a Jaggery project then you can download WSO2 Developpder Studio, this can be also installed as a plugin to your existing Eclipse IDE. In this sample I will create necessary Folder structure and config files manually.
I will explain how to develop a simple Jageery Websocket server which will echo messages its receiving.
Ok Lets get started
Writing the WebSocket Server
Step 01
Create a Folder and lets name it "JaggeryWebsocket". In the folder create a new file "server.jag". This file will act as the server component of the websocket implementation.
Note : .jag is the extension used by Jaggery files.
Step 02
Now Add the following code segment to the server.jag file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <% webSocket.ontext = function (data) { var list = application.get('list'); //broadcasting for(var i = list.length - 1; i >= 0; i--) { list[i].send(data); } }; webSocket.onbinary = function (stream) { }; webSocket.onopen = function () { var streamList=[]; var list = application.get('list'); if(list ==null){ streamList.push(this); application.put('list', streamList); } else{ var storedList = application.get('list'); storedList.push(this); application.put('list', storedList); } }; webSocket.onclose = function (status) { var list = application.get('list'); for(var i = list.length - 1; i >= 0; i--) { if(list[i] === this) { list.splice(i, 1); } } }; %> |
Writing The Client
Step 01
Now Create another file called "index.jag" and add the following code to the file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Jaggery WebSocket</title> <script type="text/javascript"> var websocket = new WebSocket( "ws://localhost:9763/JaggeryWebsocket/server.jag"); websocket.onmessage = function processMessage(message) { messagesTextArea.value += message.data + "\n"; } function sendMessage() { websocket.send(messageText.value); messageText.value = ""; } </script> </head> <body> <div> <br> <br> <h3>Output Console</h3> <textarea id="messagesTextArea" rows="8" cols="80"></textarea> <br> <input type="text" id="messageText" size="50" /> <input id="button1" type="button" value="Connect" onclick="sendMessage();"> </div> </body> </html> |
Step 02
Now You can Add the project Folder into the Jagger y Server, You can place the Project folder in <JAGGERY_HOME>/apps directory ad start the server by going to the <JAGGERY_HOME>/bin directory. Now you can access the application from the flowing URL.
http://localhost:9764/JaggeryWebsocket/index.jag
Thank You for reading and comment below if you have any queries.
0 comments:
Post a Comment