Streaming data over HTTP in Javascript

Asked

Viewed 444 times

1

There is some way to send data over Http, but instead of all the information at once, send one part at a time?

For example: I make an HTTP request to GET /produtos. This will return all my products (assuming I didn’t set a limit). If I have 500 products, this will make the request time-consuming, until all products are processed-- and I can only process the information of the first product in the client when the server finishes processing the last.

I wonder if, following this example, there is some way for the server to send one product at a time, in a kind of "streaming"-- so client and server would be working simultaneously, rather than one at a time.

(The client code I know is one, in Javascript. The server code, for me, is irrelevant, but I would like to know at least what technique is used for me to research. If I can not implement on my server, I open a new question, because this should be only about the technique used and the client code)

Clarifying: I will be using Ajax, so yes, my request will be asynchronous. What I want is to get the server and the client to work at the same time, rather than the server doing all its work before the client starts working.

In a simple request, the workflow would be basically this:

Cliente faz requisição ->
 Servidor processa 500 produtos e envia ao cliente ->
  Cliente processa os 500 produtos

And my intention is to do this:

Cliente faz requisição ->
 Servidor processa um produto e envia ao cliente (e repete o processo até que não hajam mais produtos) ->
  Cliente processa um produto assim que o recebe (e aguarda por mais até que acabem)
  • 1

    You could work with a queue that would trigger AJAX requests as long as there are items to be sent. The triggering of new requests, from the second, could even be associated with the click.

  • @Brunoaugusto I thought about it, but I thought it would be very funny. So I asked here, to find out if there is a more "right" way. But if I don’t, I’m gonna use that.

  • I don’t think it’s a scam, but if you prefer you can also apply the concept of paging by sending bigger and bigger offsets every time you click the button, for example.

  • @Brunoaugusto The idea is very good, but it does not involve a "flow" as I specified in the question. I’m not saying the idea is invalid, but pagination and flow are different concepts.

2 answers

1

At first what you seek seems to be a socket in this link you will find an example implementation in php, another way to solve this would be paging, bringing 50 records at a time, making javascript receive data and storing in a local cache until it has all the content, but displaying the first 50 (using the query limit), on this site you find examples of server and client socket. You can implement later on using tcp, upd and even stream if you want.

The socket will work on the client side and the server side, the server will provide the information while the client will connect to the server to receive the data. This type of data transfer can user in TCP and UPD each one has its advantages and disadvantages, The server is responsible for managing the connections a server can have from 0 to N connected clients which will limit the amount of connections at the logical level is the amount of ports on each ip that it is listening to and at the hardware level the capacity of the equipment and the link. When working with socket it is necessary to have attention on how the credências management will be done, to control the privilege and the access. The socket is something that can be implemented on any platform today you can find socket including in javascript.

Example of socket server in php:

/*********function to check new order******************/
function get_new_order()
{
$con=mysql_connect(HOST, USERNAME, PASSWORD);
mysql_select_db(DATABASE,  $con);
$sql="select  OrderId from customer_order where order_Status='0' "; //0 for new order
$query=mysql_query($sql,$con);
if(mysql_num_rows(  $query)>0)
{
return true;
}
else return  false;
}
/*************************************/
/********Socket Server*********************/
set_time_limit (0);
// Set the ip and port we will listen on
$address = '127.0.0.1';
$port = 6789;
// Create a TCP Stream socket
$sock = socket_create(AF_INET, SOCK_STREAM, 0); // 0 for  SQL_TCP
// Bind the socket to an address/port
socket_bind($sock, 0, $port) or die('Could not bind to address');  //0 for localhost
// Start listening for connections
socket_listen($sock);
//loop and listen
while (true) {
/* Accept incoming  requests and handle them as child processes */
$client =  socket_accept($sock);
// Read the input  from the client – 1024000 bytes
$input =  socket_read($client, 1024000);
// Strip all white  spaces from input
$output =  ereg_replace("[ \t\n\r]","",$input)."\0";
$message=explode('=',$output);
if(count($message)==2)
{
if(get_new_order()) $response='NEW:1';
else  $response='NEW:0';
}
else $response='NEW:0';
// Display output  back to client
socket_write($client, $response);
socket_close($client);
}
// Close the master sockets
socket_close($sock);

in this link you will find a complete example of the php socket and use another interesting example can be found in the following here

  • I think the ideal solution is sockets. I’ll do some research. Could you elaborate better? If you want, you can take out the paging part and focus on the sockets. If I solve it myself, I accept the answer.

  • @Andréleria is now more complete, the links that are in the answer should clarify any doubts, otherwise leave a comment.

  • Okay, it’s gonna take me a while to test, and if it works out I’ll take the answer by tomorrow. Thank you. :)

0

Hello, the ideal solution for you will be asynchronous communication. In an asynchronous request, there is no synchronization between the requests, so we can send several requests in parallel, where each response returns when it is ready.

Making some changes to the client and server you will get what you want.

Examples

Client

$.ajax({
    url: '/Produtos',
    async: true
}).done(function(data) {
    alert(data); //Deve retornar "Tudo certo"
});

Server

<?php
sleep(10);
echo json_encode("Tudo certo!!");
?>

This way you can send several requests, and in your case, treat on the server how many products return, even if you have 500, return something significant to popular the client side.

By default the $.ajax works asynchronously, if you want the synchronous form just set the parameter async for false.

http://api.jquery.com/jQuery.ajax/

I hope I’ve helped.

  • I’d be using Ajax by now, sorry if I didn’t make that clear. Even with this solution, all processing is done on the server before the client starts processing something. My intention is to make both of you process at the same time.

  • So André, the idea is the client to process the script even if you haven’t received the data yet, it will continue running the script, on the server side you can determine when the requests will be ready, you set a interval in the client until everything is loaded. .

  • Yes, yes, that I understand. My point is that the client will not process any product until the server has finished processing all.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.