Streaming the contents of a dynamic file through websockets - javascript

I have a program in Bash which runs a console feed. The feed is text, and is appended to each time an event happens and is timestamped.
How would I load the contents of the console feed onto a page (perhaps last 200 lines or so of the console), and send additional data each time the file was appended to (the new lines)?
I am completely new to WebSockets and the moving of dynamic data, so please explain anything thoroughly.
Note: I also have node.js installed.

Since you already have node.js, you should definitely check out socket.io; it'll take care of all the WebSocket stuff for you. Check out the site to learn how to use it.
Also, since you're interested in watching a file for changes, check out the fs.watchFile() function of the FileSystem module of node.js. It'll fire a callback every time a file is changed. You can use this to get the new data and pipe it to the browser using socket.emit().

Related

Get values (a array) out a mysql database by opening a php file on a other host

This is wat needs to happen:
I need to get user information out a MySql database.
But i don't want to insert the password of my database in the php file. Because that file won't be hosted on my own server. Nobody must see that password when they access the server by ftp and edit the php file.
My first solution that didn't work was opening a php file from my own host and reading the output (i made a script that connects to the database and outputs a long string) and converted the output to an array by splitting the values.
This did not work because of security reasons in php.
I can't create a extra account for my database that has read-only access because my host won't allow me. (hostinger.co.uk)
I also thought about using a iFrame and load the file on my host. And read it using javascript to read it. But again, security won't allow me to edit it.
Does someone know a way to fix this?
OPTION 1:
Since you want to make sure your buddies server doesn't have access to the MySQL server info (username, password, etc), your safest bet is to connect to the database from your server, and just communicate between the two servers what needs to be retrieved.
As Darren mentioned in the comments, an API would do this just fine. Since there are a lot of open source libraries out there that can get the job done, I will recommend you one: pheanstalk
pheanstalk is a php client that works on top of the beanstalk library, which is basically a queue.
You could set up a queue on each server, and configure the communication to happen between the 2 servers. Then you would have worker.php scripts running every second (or 10 seconds or however so often you like) looking for commands being sent from 1 server, taking those commands in, processing them, and sending back the information to the main computer.
OPTION 2:
Instead of accessing your database, you can create a copy of yours, and have his server contain a copy.
Key points of option 2:
If his server isn't capable of carrying a full fledged MySQL database, there is MySQLi, which is very similar, but the only difference is that it is basically a file that you keep in your server. That is the benefit since it is LIGHT (hence the "i" from MySQLi). The downside is that the database isn't as "powerful", some operations might be limited, though that is to be expected, but good none the less.
If your friend has a database however, then better yet since it will have all the capabilities.
Now since I am assuming you would need to keep their copy of your database up-to-date, you can create a function that would send a request to your buddies server on what was updated. This is an API since it is intercommunication between processes behind the scenes, but probably wouldn't need any root access as some other API's might require.
Though the hastle here is that you would literally have to call that function every time you do any updates... :(
Edited:
OPTION 3
After talking a bit with the OP in the comments, another possibility came up. In his particular case, he might be willing to have a file in a public directory available for his buddies user to read. For example, lets say his file was located in:
http://www.example.com/hiddenfiles/dfjios4wr238##.txt
To access what is inside that file, you would have to know the name (and the name was specifically designed to work as a password, hence even though the information isn't sensative for the OP's specific situation, it's always best practice to stay consistent and think safe xD).
To access the file, the following could be done:
$path = 'http://www.example.com/hiddenfiles/dfjios4wr238##.txt';
$fileHandle = fopen($path, "r");
while ($line = fgets($fileHandle))
{
echo "--> {$line}";
}
fclose();

Determine source of API request?

I have been introduced to a web application that I need to make some modifications to.
The app is huge, and there are perhaps 100 Javascript files. These files send requests to a third party API all the time.
Now, in the console, I can see all these requests. Let's say that one looks like:
GET http://123.456.789.10:8000/v1/accounts/accountnum/children?_=1422026843600
Then of course I can see the parameters sent, headers and response. My problem is that I need to locate the JS file which is sending one particular request. Searching all the files for the API target URL reveals that 40 or 50 files send requests to this same URL, with similar parameters.
Is there a way I can find out the source file of one specific request? Something like sent from filename.js on line 123 would be ideal, but just the file name would be of great help too.
I could go through all the files and try each one individually, but that seems like a huge waste of time. There would be A LOT of code to go through.
If you know what to do in the application to make the request occur, in Chrome you can use an XHR breakpoint to catch it:
Navigate to the point where you're about to do the thing that causes the request
Open Dev Tools
Switch to the Sources tab
On the right, scroll down to "XHR Breakpoints"
Click the + button, fill in some appropriate subset of the URL (or leave it blank to break on all XHR)
Add it
Do the thing that does the request
Chrome will break and take you to the line of code that was triggering the XHR.

Using GWT, how to load an image and access image attributes & http status codes

Using GWT I am loading images from a server I do not control. Currently, I use GWT new Image( url) and then use ImageHandlers and ErrorHandlers to catch what happened and put the images in my buffer and the DOM. Then I make the images visible sequently to animate the process. But now I need a bit more, I need to know the error code, e.g.304 that the server returned for the image and also I need to get at the header response attribute, 'Last-modified'. For 304, I know I need to resubmit the request later when the server will have created a new version ( with exactly the same url ) which I think I can manage, but it will then have a new 'Last-modified' and I need to know that DateTime.
By using new Image(url), I am letting the browser do the loading, but I don't know how to get at the details of the load.
Q1:Is there a way to pull more info from an image?
GWT Image just seeems to wrap a JS object. I look in Firefox Console-Network, but don't see much detail there either. Is Last-modified and error code forgotten by the time it gets (or doesn't) in the DOM tree.
If the answer to Q1 is no the information is gone or inaccessible, ..
Q2: Do I need to stop using the browser to fetch images and do it with an XmlHttpRequest and then presumably I have access to the response codes and the header attributes. SOP is not an issue. But how then do I get from say the Response OutputStream to an Image? Do I have to Base64 encode it or is there a better way? Will one of the other non-url constructors for image help, say Image(Element) or Image(ImageResource). Then the issue becomes how to make a response stream into a Element or ImageResource?
Note: This other question 'How to print error message of why image failed to load?' is related, but doesn't get to an answer.
Getting Error codes, and getting the response as a stream must be done with an HTTP client (GWT has the built in RequestBuilder). You can also try to get the error code with native JS, using the method described here.

AJAX refreshing - only update when changed, is there a nice solution?

The more I work with AJAX the more I find myself faced with the same problem: I want data on the screen to be as up to date as possible but downloading the same data every second is over kill. The data may change only once every 30 minutes but when it does I would like this to be fed back to the user instantly.
Getting my server side scripts to return data describing the difference between the previous data can be a nice solution but is not always a possibility.
Is there a neat solution to this or is this just something I'm going to have to live with?
Nodejs and Socket.io. It works totally different. In your solution each opened window sends a request to the server, and as a result there is a very huge amount of useless request. Nodejs with Sokcet.io is a real PUSH engine. You can connect users by sockets, and push them notify, that the page should refresh, or updated data itself.
Nodejs and Socket.io links.
you have to query the server every time, that's a given. what you can do is test, in the server, if there is any new data to update and, if not, just return something like 'false', so the callback doesn't do anything and less data is passed around each time.
You're looking for a comet or long-polling technique. Here is a general description with a nice explanation: http://www.ibm.com/developerworks/web/library/wa-reverseajax4/?ca=drs-
Also, the cometd website, which will work with jquery or dojo: http://cometd.org/
I
Another solution is Atmosphere: https://github.com/Atmosphere/atmosphere
Also here: http://jfarcand.wordpress.com/2010/06/15/using-atmospheres-jquery-plug-in-to-build-applicationsupporting-both-websocket-and-comet/

How far can I go with JavaScript?

I need to do as much as possible on the client side. In more details, I would like to use JavaScript to code an interface (which displays information to the user and which accepts and processes response from the user). I would like to use the web serve just to take a date file from there and then to send a modified data file back. In this respect I would like to know if the following is possible in JavaScript:
Can JavaScript read content of a external web page? In other words, on my local machine I run JavaScript which reads content of a given web page.
Can JavaScript process values filled in a HTML form? In other words, I use HTML and JavaScript to generate an HTML form. User is supposed to fill in the form and press a "Submit" button. Then data should be sent to the original HTML file (not to a web server). Then this data should be processed by JavaScript.
In the very end JavaScript will generate a local data-file and I want to send this file to a PHP web server. Can I do it with JavaScript?
Can I initiate an execution of a local program from JavaScript. To be more specific, the local program is written in Python.
I will appreciate any comments and answers.
It could technically, but can't in reality due to the same origin policy. This applies to both reading and writing external content. The best you can do is load an iframe with a different domain's page in it - but you can't access it programmatically. You can work around this in IE, see Andy E's answer.
Yes for the first part, mmmm not really for the second part - you can submit a form to a HTML page and read GET arguments using Javascript, but it's very limited (recommended maximum size of data around 1024 bytes). You should probably have all the intelligence on one page.
You can generate a file locally for the user to download using Downloadify. Generating a file and uploading it to a server won't be possible without user interaction. Generating data and sending it to a server as POST data should be possible, though.
This is very, very difficult. Due to security restrictions, in most browsers, it's mostly not possible without installing an extension or similar. Your best bet might be Internet Explorer's proprietary scripting languages (WScript, VBScript) in conjuction with the "security zones" model but I doubt whether the execution of local files is possible even there nowadays.
Using Internet Explorer with a local file, you can do some of what you're trying to do:
It's true that pages are limited by the same origin policy (see Pekka's link). But this can be worked around in IE using the WinHttpRequest COM interface.
As Pekka mentioned, the best you can manage is GET requests (using window.location.search). POST request variables are completely unobtainable.
You can use the COM interface for FileSystemObject to read & write local text files.
You can use the WScript.Shell interface's Exec method to execute a local program.
So just about everything you asked is attainable, if you're willing to use Internet Explorer. The COM interfaces will require explicit permission to run (a la the yellow alert bar that appears). You could also look at creating a Windows Desktop Gadget (Vista or Win 7) or a HTML Application (HTA) to achieve your goal.
Failing all that, turn your computer into a real server using XAMPP and write your pages in PHP.
see i got what you want to do
best things is do following
choose a javascript library (eg:jquery,dojo,yui etc), i use jquery.this will decrease some of your load
inspite of saving forms data in in a local file, store them in local variables process them and send them to server (for further processing like adding/updating database etc) using XMLHttp request, and when webservice returns data process that data and update dom.
i am showing you a sample
--this is dom
Name:<input type='text' id='name' />
<a href='javascript:void(0)' onClick='submit()'>Submit Form</a>
<br>
<div id='target'></div>
--this is js
function submit()
{
var _name=$('#name').val();// collect text box's data
//now validate it or do any thing you want
callWebservice(_name,_suc,_err);
//above call service fn has to be created by you where you send this data
//this function automatically do xmlHttprequest etc for you
//you have to create it ur self
}
//call this fn when data is sucessfully returned from server
function _suc(data)
{
//webservice has returned data sucessefully
//data= data from server, may be in this case= "Hello user Name"; (name = filled in input box);
//update this data in target div(manipulate dom with new data);
$('#target').html(data);
}
function _err()
{
//call this fn when error occurs on server
}
// in reality most of the work is done using json. i have shown u the basic idea of how to use js to manipulate dom and call servcies and do rest things. this way we avoid page-reloads and new data is visible to viewer
I would answer saying there's a lot you can do, but then in the comment to the OP, you say "I would like to program a group game."
And so, my answer becomes only do on the client side what you are able and willing to double check on the server side. Never Trust the Client!
And I do not want to do my job twice.
If you are going to do things on the client side, you will have to do it twice, or else be subject to rampant cheating.
We had the same question when we started our project.In the end we moved everything we could on the JS side. Here's our stack:
The backend receives and send JSON data exclusively.We use Erlang, but Python would be the same. It handles the authentication/security and the storage.
The frontend, is in HTML+CSS for visual elements and JS for the logic.A JS template engine converts the JSON into HTML. We've built PURE, but there are plenty of others available. MVC can be an overkill on the browser side, but IMO using a template engine is the least separation you can do.
The response time is amazing. Once the page and the JS/CSS are loaded(fresh or from the cache), only the data cross the network for each request.

Categories