1. 首页
  2. 问答
  3. 如何在jQuery中创建套接字？

如何在jQuery中创建套接字？

2011-03-10 42 views
7

这是一个非常复杂和小众的问题，所以我可能没有现实的答案来解决我需要做的事情。如何在jQuery中创建套接字？

我有一个工作与无线接收器，这需要比jQuery的get/post功能更多的任务。

由于跨域问题，此jQuery get在Aptana IDE中创建的Adobe Air App中执行。

它必须是Adobe空气，因为网络服务器不会接近无线接收器最终连接到的地方。

所以我需要一个应用程序，它可以与2Know Renaissance无线接收器进行通信。

我创建了一个应用程序，可以很好地进行一些通信。以下是我迄今可以执行的步骤。

  1. 连接到接收机
  2. 看看有多少手持设备连接到接收机
  3. 再就是应该是一些前/后的沟通，这不是很容易，在阿贾克斯至少在我的知识。

这是我一直在使用的代码，这是关于第24版，这是我得到的。

<!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>

我的问题只是有一个不同的jquery插件，我应该使用，还是我接近这个错误？

谢谢你......

来源

2011-03-10 crosenblum

+0

这是客户端解决方案的原因，是因为这个应用程序将与无线接收器和手持设备一起安装。它不会以任何方式靠近Web服务器，并且我不能让人们安装/设置Web服务器作为安装/使用过程的一部分。所以我需要一个客户端的方法来做所有的沟通。而且由于我不知道闪光灯和Adobe AIR的空间允许进行跨域通信，如果我能把它全部弄清楚，这可以工作。 ：P – crosenblum 2011-03-10 16:47:18

回答

3

我不完全理解的问题，所以这是一个有点棘手，使recomendations，但至少可以用一些不同的传输想法帮助。

要求jQuery做套接字通信就我所知的jQuery范围之外。 jQuery实际上只是使用XMLHttpRequest，它不适用于持久套接字。

理念1

怎么样使用ActionScript Socket类 http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/Socket.html

你可以嵌入Flash影片在HTML页面中，并从JavaScript调用它 http://www.hariscusto.com/programming/communication-between-javascript-and-actionscript-as3-and-vice-versa/

理念2

您也可以考虑web服务器上的node.js和优秀的socket.io模块，以充分利用空中的websockets，然后在空中客户端和服务器之间进行双向通信。除了服务器端的支持，socket.io还有一个很棒的浏览器客户端。请参阅http://socket.io/

这是Fedex的Techie博客上关于将jQuery与socket.io和节点一起使用的有趣帖子。JS - http://spiritconsulting.com.ar/fedex/2010/11/events-with-jquery-nodejs-and-socket-io/

理念3（新）

有JavaScript的Socket类提供的HTML空气开发商的空气。我只是偶然防空火炮在这里：

首页/ HTML开发人员指南针对Adobe AIR /网络与通信

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

有根据您的需要

来源

2011-03-10 16:14:53

+0

@orangeutancloud如果你打算使用socket.io，你可能会使用客户端socket.io，它使用本地websocket或长轮询或闪存桥（适用/支持）。 – Raynos 2011-03-10 16:20:50

+0

@Raynos，是的好点。我应该在我的回答中声明，期待jQuery执行套接字或找到使用套接字的插件要求的不仅仅是jQuery能做的事情。如果node.js是Web服务器上的一个选项，则客户端socket.io可能是最简单的解决方案。 – 2011-03-10 16:23:52

+0

@orangutancloud它不太难为websocket API编写包装，用于说asp.net或php或RoR。你不需要服务器上的socket.io。 – Raynos 2011-03-10 16:24:51

3

我工作几个不同的Socket API的应用在插件jQuery的socket.io，我认为可能会帮助你：

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

我一直在研究一个通过socket.io使用web套接字的应用程序，现在它工作得很好。

看看它，让我知道你在想什么。

来源

2011-03-30 04:30:22 Will

+1

出色的工作@威尔！ – Philip 2012-04-30 10:55:36

+0

谢谢！ :)我真的很喜欢这方面的工作。很高兴你喜欢 – Will 2012-04-30 22:18:36

相关问题

 相关问题