Comment faire des sockets en jQuery?
C'est très complexe et très créneau question, donc il y a peut-être pas réaliste de réponse pour ce que je dois faire.
J'ai une mission de travailler avec un récepteur sans fil, qui a besoin de plus que celui de jQuery get/post fonctionnalité.
À cause de la croix-domaine des questions, ce jQuery est exécutée à l'intérieur d'une Application Adobe Air, créé en Aptana IDE.
Elle doit être un adobe air, parce que le serveur web, ne sera pas près de l'endroit où le récepteur sans fil, éventuellement, obtenir est connecté.
J'ai donc besoin d'une application, qui peut communiquer avec le 2Know Renaissance du Récepteur sans Fil.
J'ai créé une application qui fait partie de la communication de l'amende. Voici les étapes que je peux faire jusqu'à présent.
- Connecter au récepteur
- Voir la façon dont de nombreux appareils de poche sont connectés au récepteur
- Alors il n'est pas censé être certains en arrière/en avant la communication, et ce n'est pas facile avec de l'ajax au moins à ma connaissance.
Voici le code que j'ai travaillé avec, c'est à propos de la 24e version, et c'est aussi loin que j'ai obtenue.
<!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>
Ma question est tout simplement il y a un autre plugin jquery-je, ou suis-je en approchant de ce mal?
Merci...
OriginalL'auteur crosenblum | 2011-03-10
Vous devez vous connecter pour publier un commentaire.
Je ne comprends pas tout le problème, donc, c'est un peu délicat à faire de bons conseils, mais, au moins, à l'aide de différents transports idées.
Demandant de jQuery pour faire socket de communication est autant que je sache, à l'extérieur de la portée de jQuery. jQuery est vraiment juste à l'aide de XMLHttpRequest, qui ne va pas au travail pour les sockets.
Idée 1
Que sur l'utilisation de l'ActionScript classe Socket
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/Socket.html
Vous pourriez intégrer l'animation flash dans votre page html et l'appeler à partir de javascript
http://www.hariscusto.com/programming/communication-between-javascript-and-actionscript-as3-and-vice-versa/
Idée 2
Vous pourriez aussi envisager de node.js sur le serveur web et le grand support.io module pour profiter des websockets à l'intérieur de l'air et ensuite faire une communication bidirectionnelle entre l'air client et le serveur. socket.io a un grand navigateur du client en plus du serveur de support latéral. Voir http://socket.io/
Voici un post intéressant sur Fedex Technophile Blog sur l'utilisation de jQuery avec socket.io et node.js - http://spiritconsulting.com.ar/fedex/2010/11/events-with-jquery-nodejs-and-socket-io/
Idée 3 (Nouveau)
Il y a un air de javascript classe socket disponible au format html de l'air développeurs. Je viens de tombé en face c'est ici:
Maison /HTML Guide du Développeur pour Adobe AIR /de Réseau et de communication
http://help.adobe.com/en_US/air/html/dev/WSb2ba3b1aad8a27b0-181c51321220efd9d1c-8000.html
Il y a plusieurs différents socket api en fonction de vos besoins
oui bon point. Je dois préciser dans ma réponse que j'attendais de jQuery pour faire des sockets ou de trouver un plugin qui permettrait d'utiliser des sockets est de demander plus de jQuery peut faire. Le client socket.io serait probablement la solution la plus simple si node.js est une option sur le serveur web.
ce n'est pas trop dur à écrire un wrapper pour l'API websocket pour dire asp.net ou php ou RoR. Vous n'avez pas besoin de support.io sur le serveur.
Non, mais puisque l'auteur était à la recherche d'un plugin solution, cela semble être la meilleure façon d'aller. Il pourrait être une partie d'une solution qui comporte de nombreuses composantes, y compris les asp.net, RoR, Tornade + python, php, ou autres. Mais il est sûr que la meilleure façon d'obtenir une connexion persistante à un serveur dans un plugin.
Le problème, c'est que ce doit être un client de la solution, puisque le php/ror, asp.net code sur le serveur web, et cette application serait en cours d'exécution sur un pc, ils ont installé le récepteur sans fil. Ce dispositif est utilisé pour administrer des tests et prendre des notes. J'ai donc besoin de cette application pour envoyer/recevoir des données vers le récepteur sans fil, et puis envoyer/recevoir des données vers mon serveur web. Le serveur web de la partie est facile, l'appareil sans fil est moins.
OriginalL'auteur Tom Gruner
Je travaille sur un plugin pour jQuery pour la socket.io qui je pense pourrait vous aider:
https://github.com/williscool/jquery-socket.io
Je travaille sur une application qui utilise des sockets web par le biais de la prise.io pour un certain temps maintenant et c'est assez bien travaillé.
Check it out et laissez-moi savoir ce que vous en pensez.
merci! 🙂 J'ai vraiment apprécié de travailler sur ça. Content que vous l'aimez
OriginalL'auteur Will