How to make sockets in jQuery?

This is a very complex and niche question, so there can be no realistic answer to what I need to do.

I have a task to work with a wireless receiver, which is more than the jQuery get / post functions.

Due to cross-domain issues, this jQuery runs inside the Adobe Air application created in the Aptana IDE.

It should be black air, because the web server will not be close to where the wireless receiver will ultimately be connected.

So I need an application that can communicate with the 2Know Renaissance wireless receiver.

I created an application that perfectly conveys some messages. Here are the steps that I can take so far.

  • Connection to the receiver
  • See how many portable devices are connected to the receiver
  • Then there should be some kind of reverse / fourth post, and this is not easy with ajax, at least as far as I know.

Here is the code I worked with, it is about the 24th version, and that’s all I got.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2Know Wireless Communicator</title> </head> <body> <h1>Current Status/Prograess</h1> <!--- step 1. is server connected ---> <div id="server_status" style="font-size:12px;"></div> <!--- step 2. list number of devices connected ---> <div id="device_count" style="font-size:12px;"></div> <div id="device_info" style="font-size:12px;"></div> <!--- step 3.a Service Handler handler status / csh = Service Handler handler ---> <div id="csh_status" style="font-size:12px;"></div> <!--- step 3.b disconnect status handler handler of many handlers ---> <div id="dis_status" style="font-size:12px;"></div> <!--- step 4. test sending a question to a device ---> <div id="post_results" style="font-size:12px;"></div> <!-- load the local jquery --> <script type="text/javascript" src="lib/jquery/jquery-1.4.2.js"></script> <script type="text/javascript" src="lib/jquery/json_parse.js"></script> <script type="text/javascript" src="lib/jquery/jparse.min.js"></script> <script type="text/javascript" src="lib/air/AIRAliases.js"></script> <script type="text/javascript" src="lib/air/AIRIntrospector.js" /> <!-- Include service monitor framework --> <script type="application/x-shockwave-flash" src="lib/air/servicemonitor.swf"></script> <script type="text/javascript"> function watch_connection() { // do ajax get $.ajax({ type: "GET", datatype: "xml", url: "http://my_ip_address:port/Services/ConnectServiceHandler", success: function(response){ $('#post_results').html(response); }, error:function (xhr, ajaxOptions, thrownError){ $('#post_results').html("readyState: "+xhr.readyState+"\nstatus: "+xhr.status); } }); setTimeout(function(){watch_connection;}, 100); } function disconnect_service_handler() { // step 1. create xml document of data to send var xml_string = '<data><disconnect_handler service="64"/></data>'; // step 2. post this to the registration service $.ajax({ type: "POST", datatype: "xml", url:"http://my_ip_address:port/Services/DisconnectServiceHandler", data: xml_string, beforeSend: function(xhr){ xhr.withCredentials = true; }, timeout: (2 * 1000), success: function(response){ // parse the response $(response).find("status").each(function() { // get the status code var disconnect_status = $(this).attr('code'); if (disconnect_status == 200) { // change status bar message $('#dis_status').html('Disconnecting: [200 Disconnected]'); // call connection using new guid var my_guid = guid(); connect_service_handler(my_guid); } if (disconnect_status == 304) { // change status bar message $('#dis_status').html('Disconnecting: [304 No handler found]'); } if (disconnect_status == 400) { // change status bar message $('#dis_status').html('Disconnecting: [400 Bad Request]'); } if (disconnect_status == 401) { // change status bar message $('#dis_status').html('Disconnecting: [401 Not Found]'); } if (disconnect_status == 500) { // change status bar message $('#dis_status').html('Disconnecting: [500 Internal Server Failure]'); } if (disconnect_status == 501) { // change status bar message $('#dis_status').html('Disconnecting: [503 Service Unavailable]'); } }); }, error:function (xhr, ajaxOptions, thrownError){ $('#dis_status').html('Disconnecting: [Disconnect Failure]'); } }); } function S4() { return (((1+Math.random())*0x10000)|0).toString(16).substring(1); } function guid() { return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); } function connect_service_handler(my_guid) { // step 1. create xml document of data to send var xml_string = '<data><connect_handler service="64"><application id="'+my_guid+'" name="MikesBigEar" /></connect_handler></data>'; // step 2. post this to the registration service $.ajax({ type: "POST", datatype: "xml", url:"http://my_ip_address:port/Services/ConnectServiceHandler", data: xml_string, beforeSend: function(xhr){ xhr.withCredentials = true; }, timeout: (2 * 1000), success: function(response){ // parse the response $(response).find("status").each(function() { // get the status code var connection_status = $(this).attr('code'); if (connection_status == 200) { // change status bar message $('#csh_status').html('Service Handler: [200 Connected]'); // keep connection open keep socket alive // sends http request to us via post // sends the incoming request id and device address back to make sure it goes to the correct device // ask for user id or user authentication // for user authentication can either use built-in user authentication or ask a question // http 1.1 keep alive header $('#post_results').html('Attempting to check for next piece of data...'); watch_connection(); } if (connection_status == 303) { // change status bar message $('#csh_status').html('Service Handler: [303 The handler is assigned to another application]'); var my_guid = guid(); connect_service_handler(my_guid); } if (connection_status == 400) { // change status bar message $('#csh_status').html('Service Handler: [400 Bad Request]'); disconnect_service_handler(); } if (connection_status == 401) { // change status bar message $('#csh_status').html('Service Handler: [401 Not Found]'); disconnect_service_handler(); } if (connection_status == 500) { // change status bar message $('#csh_status').html('Service Handler: [500 Internal Server Failure]'); disconnect_service_handler(); } if (connection_status == 501) { // change status bar message $('#csh_status').html('Service Handler: [501 Service Unavailable]'); disconnect_service_handler(); } }); // pass the xml to the textarea // $('#process').val('ConnectServiceHandler'); // $('#show_errors_here').val(response); }, error:function (xhr, ajaxOptions, thrownError){ $('#csh_status').html('Service Handler: [Connection Failure]'); // alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status); // alert("responseText: "+xhr.responseText); // alert(xhr.status); // alert(thrownError); } }); // set timed re-check and store it // setTimeout(function(){connect_service_handler(my_guid);}, 8000); } function get_device_count(my_guid) { // get the total number of devices // default receiver status var receiver_status = ''; $('#device_count').html('Device Count: [Checking...]'); $('#device_info').html(''); // get the wireless receiver status via ajax xml $.ajax({ type: "GET", url:"http://my_ip_address:port/Services/GetDevices", beforeSend: function(xhr){ xhr.withCredentials = true; }, timeout: (2 * 1000), success: function(response){ $(response).find("status").each(function() { // get the status code var receiver_status = $(this).attr('code'); if (receiver_status == 200) { // change status bar message $('#device_count').html('Device Count: [200 Connected]'); } if (receiver_status == 400) { // change status bar message $('#device_count').html('Device Count: [400 Bad Request]'); } if (receiver_status == 401) { // change status bar message $('#device_count').html('Device Count: [401 Not Found]'); } if (receiver_status == 500) { // change status bar message $('#device_count').html('Device Count: [500 Internal Server Failure]'); } if (receiver_status == 501) { // change status bar message $('#device_count').html('Device Count: [501 Service Unavailable]'); } }); var device_count = 0; // add to div $('#device_info').append('<ul style="font-size:10px;">'); $(response).find("device").each(function() { // get each property var device_status = $(this).attr('status'); var short_address = $(this).attr('short_address'); var mac_address = $(this).attr('mac_address'); var pan_id = $(this).attr('pan_id'); var type = $(this).attr('type'); device_count = device_count + 1; // get session data $(this).find("session").each(function() { // get session data var created_date = $(this).attr('date'); var created_time = $(this).attr('time'); }); $('#device_info').append('<li style="list-style:none;">Device #'+device_count+'<ul>'); // add list item $('#device_info').append('<li> Mac Address: ['+mac_address+']</li>'); $('#device_info').append('<li> Short Address: ['+short_address+']</li>'); $('#device_info').append('<li> Pan ID: ['+pan_id+']</li>'); $('#device_info').append('</ul></li><br/>'); // send request to this device // post_live_activity(mac_address,my_guid); }); // end list $('#device_info').append('</ul>'); if (device_count === 0) { $('#device_count').html('Device Count: [0 Devices Found]'); } else if (device_count > 0) { $('#device_count').html('Device Count: [' + device_count + ' Devices Found]'); } }, error:function (xhr, ajaxOptions, thrownError){ $('#device_count').html('Device Count: [Connection Failure]'); // alert(xhr.status); // alert(thrownError); } }); // set timed re-check and store it setTimeout(function(){get_device_count(my_guid);}, 13000); } function get_server_status(my_guid) { // default receiver status var receiver_status = ''; // get the Renaissance Wireless Server via ajax xml $.ajax({ type: "GET", url:"http://my_ip_address:port/Services/GetAccessPoints", timeout: (2 * 1000), beforeSend: function(xhr){ xhr.withCredentials = true; }, success: function(response){ $(response).find("status").each(function() { // get the status code var receiver_status = $(this).attr('code'); if (receiver_status == 200) { // change status bar message $('#server_status').html('Renaissance Wireless Server: [200 Connected]'); // step 2. get device count get_device_count(my_guid); // step 3.part 1 get the guid to be used as the application id // var my_guid = guid(); // step 3. part 2 connect to a service handler whatever that means connect_service_handler(my_guid); } if (receiver_status == 400) { // change status bar message $('#server_status').html('Renaissance Wireless Server: [400 Bad Request]'); // set timed re-check and store it setTimeout(function(){get_server_status(my_guid);}, 12300); } if (receiver_status == 401) { // change status bar message $('#server_status').html('Renaissance Wireless Server: [401 Not Found]'); // set timed re-check and store it setTimeout(function(){get_server_status(my_guid);}, 12300); } if (receiver_status == 500) { // change status bar message $('#server_status').html('Renaissance Wireless Server: [500 Internal Server Failure]'); // set timed re-check and store it setTimeout(function(){get_server_status(my_guid);}, 12300); } if (receiver_status == 501) { // change status bar message $('#server_status').html('Renaissance Wireless Server: [503 Service Unavailable]'); // set timed re-check and store it setTimeout(function(){get_server_status(my_guid);}, 12300); } // pass the xml to the textarea // $('#process').val('GetAccessPoints'); // $('#show_errors_here').val(response); }); }, error:function (xhr, ajaxOptions, thrownError){ $('#server_status').html('Renaissance Wireless Server: [Connection Failure]'); // alert(xhr.status); // alert(thrownError); } }); // set timed re-check and store it // setTimeout(function(){get_server_status(my_guid);}, 12300); } $(document).ready(function() { // step 3.part 1 get the guid to be used as the application id var my_guid = guid(); // step 1 validate get_server_status(my_guid); // step 2. get device count get_device_count(); // step 3.part 1 get the guid to be used as the application id // var my_guid = guid(); // step 3. part 2 connect to a service handler whatever that means // connect_service_handler(my_guid); }); </script> </body> </html> 

My question is simply that should I use another jquery plugin, or am I approaching this incorrectly?

Thanks...

+7
source share
2 answers

I don’t quite understand the problem, so it’s a little difficult to make recommendations, but at least it can help with some different transport ideas.

The jQuery job for socket communication is, as far as I know, outside the jQuery realm. jQuery really just uses XMLHttpRequest, which will not work for persistent sockets.

Idea 1

How about using the ActionScript Socket class http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/Socket.html

You can embed a flash movie in your html page and call it from javascript http://www.hariscusto.com/programming/communication-between-javascript-and-actionscript-as3-and-vice-versa/

Idea 2

You can also consider node.js on the web server and the excellent socket.io module for using webcams inside the air, and then perform bi-directional communication between the air client and the server. In addition to server-side support, socket.io has an excellent browser. See http://socket.io/

Here's an interesting Fedex Techie blog post about using jQuery with socket.io and node.js - http://spiritconsulting.com.ar/fedex/2010/11/events-with-jquery-nodejs-and-socket-io/

Idea 3 (new)

For html air developers, there is a javascript class of sockets for air. I just stumbled here:

Home / HTML Developer Guide for Adobe AIR / Network and Communications

http://help.adobe.com/en_US/air/html/dev/WSb2ba3b1aad8a27b0-181c51321220efd9d1c-8000.html

Depending on your needs, there are several different apis sockets

+3
source

I am working on a jQuery plugin for socket.io, which I think can help you:

https://github.com/williscool/jquery-socket.io

I am working on an application that uses web sockets through socket.io for a while, and this worked pretty well.

Check it out and let me know what you think.

+3
source

All Articles