如何在 jQuery 中做套接字？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5262079/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to do sockets in jQuery?
提问by crosenblum
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.
我有一个使用无线接收器的任务，它需要的不仅仅是 jQuery 的获取/发布功能。
Because of cross-domain issues, this jQuery get's executed inside an Adobe Air App, created in Aptana IDE.
由于跨域问题，这个 jQuery get 在 Adobe Air 应用程序中执行，该应用程序是在 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.
它必须是 adobe air，因为网络服务器不会靠近无线接收器最终连接的地方。
So I need an app, that can communicate with the 2Know Renaissance Wireless Receiver.
所以我需要一个可以与 2Know Renaissance 无线接收器通信的应用程序。
I have created an app that does some of the communication fine. Here are the steps I can do so far.
我创建了一个应用程序，可以很好地进行一些通信。以下是我目前可以做的步骤。
- Connect to the receiver
- See how many handheld devices are connected to the receiver
- Then there is supposed to be some back/forth communication, and that's not easy with in ajax at least in my knowledge.
- 连接到接收器
- 查看有多少手持设备连接到接收器
- 然后应该有一些来回通信，至少在我看来，这在 ajax 中并不容易。
Here is the code I have been working with, this is about the 24th version, and this is as far I have gotten.
这是我一直在使用的代码，这是关于第 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>
My question simply is there a different jquery plugin I should be using, or am I approaching this wrong?
我的问题只是我应该使用不同的 jquery 插件，还是我的做法是错误的？
Thank You...
谢谢你...
采纳答案by Tom Gruner
I don't fully understand the issue, so it is a bit tricky to make recomendations, but at least can help with some different transport ideas.
我不完全理解这个问题，所以提出建议有点棘手，但至少可以帮助一些不同的运输想法。
Asking jQuery to do socket communication is as far as I know outside of the scope of jQuery. jQuery is really just using XMLHttpRequest, which is not going to work for persistent sockets.
据我所知，要求 jQuery 进行套接字通信超出了 jQuery 的范围。jQuery 实际上只是使用 XMLHttpRequest，它不适用于持久套接字。
Idea 1
想法1
What about using the ActionScript Socket class http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/Socket.html
如何使用 ActionScript Socket 类 http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/Socket.html
You could embed the 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/
您可以将 Flash 电影嵌入您的 html 页面并从 javascript http://www.hariscusto.com/programming/communication-between-javascript-and-actionscript-as3-and-vice-versa/调用它
Idea 2
想法2
You could also consider node.js on the web server and the great socket.io module for taking advantage of websockets inside air and then do bi-directional communication between the air client and the server. socket.io has a great browser client in addition to the server side support. See http://socket.io/
您还可以考虑 web 服务器上的 node.js 和伟大的 socket.io 模块，以利用 air 内的 websockets，然后在 air 客户端和服务器之间进行双向通信。除了服务器端支持之外，socket.io 还有一个很棒的浏览器客户端。见http://socket.io/
Here is an interesting post on Fedex's Techie Blog about using jQuery together with socket.io and node.js - http://spiritconsulting.com.ar/fedex/2010/11/events-with-jquery-nodejs-and-socket-io/
这是 Fedex 的 Techie 博客上有关将 jQuery 与 socket.io 和 node.js 一起使用的有趣帖子 - http://spiritconsulting.com.ar/fedex/2010/11/events-with-jquery-nodejs-and-socket-输入/
Idea 3 (New)
想法 3（新）
There is an air javascript socket class available to html air developers. I just stumbled accross it here:
html air 开发人员可以使用 air javascript socket 类。我只是在这里偶然发现了它：
Home / HTML Developer's Guide for Adobe AIR / Networking and communication
主页 / Adobe AIR 的 HTML 开发人员指南 / 网络和通信
http://help.adobe.com/en_US/air/html/dev/WSb2ba3b1aad8a27b0-181c51321220efd9d1c-8000.html
http://help.adobe.com/en_US/air/html/dev/WSb2ba3b1aad8a27b0-181c51321220efd9d1c-8000.html
There are several different socket apis depending on your needs
根据您的需要，有几种不同的套接字 api
回答by Will
I'm working on a plugin for jQuery for socket.io that I think might help you out:
我正在为 socket.io 开发一个 jQuery 插件，我认为它可以帮助你：
https://github.com/williscool/jquery-socket.io
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.
我一直在开发一个通过 socket.io 使用网络套接字的应用程序，它运行良好。
Check it out and let me know what you think.
检查一下，让我知道你的想法。
