Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to do sockets in jQuery?

Tags:

jquery

sockets

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

I have an assignment to work with a wireless receiver, that needs more than jQuery's get/post functionality.

Because of cross-domain issues, this jQuery get's executed inside an Adobe Air App, created in Aptana IDE.

It has to be an adobe air, because the web server, will not be close to where the wireless receiver eventually get's connected to.

So I need an app, that can communicate with the 2Know Renaissance Wireless Receiver.

I have created an app that does some of the communication fine. Here are the steps I can do so far.

  1. Connect to the receiver
  2. See how many handheld devices are connected to the receiver
  3. Then there is supposed to be some back/forth communication, and that's not easy with in ajax at least in my knowledge.

Here is the code I have been working with, this is about the 24th version, and this is as far I have gotten.

<!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 simply is there a different jquery plugin I should be using, or am I approaching this wrong?

Thank You...

like image 755
crosenblum Avatar asked Mar 10 '11 15:03

crosenblum


People also ask

Can JavaScript make a socket connection?

The JavaScript Socket object lets you connect to any server on the Internet and to exchange data with this server. The Socket object provides basic functionality to connect to a remote computer over a TCP/IP network or the Internet.

What are sockets in JavaScript?

In programming, a socket is an endpoint of a communication between two programs running on a network. Sockets are used to create a connection between a client program and a server program. Sockets API is available in the Node. js net module. Note: In networking, the term socket has a different meaning.

What is socket programming example?

int bind(int sockfd, const struct sockaddr *addr, socklen_t addrlen); After the creation of the socket, the bind function binds the socket to the address and port number specified in addr(custom data structure). In the example code, we bind the server to the localhost, hence we use INADDR_ANY to specify the IP address.

What is basic socket programming?

Socket programming shows how to use socket APIs to establish communication links between remote and local processes. The processes that use a socket can reside on the same system or different systems on different networks. Sockets are useful for both stand-alone and network applications.


1 Answers

I'm working on a plugin for jQuery for socket.io that I think might help you out:

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

I've been working on an application that uses web sockets through socket.io for a while now and it's worked pretty well.

Check it out and let me know what you think.

like image 196
Will Avatar answered Nov 04 '22 01:11

Will