Live Update Software for Web Pages on Multiple Screens - javascript

I have six devices on/above my desk:
A 4k TV
An Ultrawide monitor
Two laptop computers
An iPad
An android phone
All are connected to the internet and browsing mydomain.org/page, an html page that I am editing using one of the laptops, which has a full page of code. When I press a button on my Wacom tablet that I rerouted through Wacom smart actions to run a script, my code is uploaded over FTP to my server. Right now, I have to reload every page on every device to see the updated results. I want to make a javascript to run on my site that has a LiveLoad() global function. When I execute this function from the DevTools command line, the script stores a cookie that the device is a debug device.
All pages with the script will now enable a small icon over the page that when set to 'live,' the script will open a connection through secure web sockets with an update server that stores up to 10 connections (perhaps only from approved IPs, so that only I can use this on my live site), each registered to the page they are browsing. When I update mydomain.org/page or other pages, my script securely opens a connection and POSTs a secret code to the update server, telling it to send a message over web sockets to all connected debug devices with that page open. On fast internet, this truly will be the ultimate website building setup if I can just overcome this design hurdle.
What I don't want:
Anything more than a single php script for the server-side implementation. Shared hosting. No root access. No Node. No fancy crap. Single PHP files are the only option.
Bloated javascript addons. Bare minimum code for receiving a single type of message (an update is needed) is all I need. Perhaps later I can make it more robust with a second type of update (a hard update) where a php script processes all the fonts, scripts, images etc on a page and adds a random query string after them to force a hard-reload of all page resources.
How can I achieve this? Where to start with php web sockets? The internet has proven to be a cynical wasteland of bloated php libraries that require installation in a node enviornment to freelancers struggling to make scripts off of the 2013 websockets API documentation, with no good, simple solutions around.

Related

How to twitter like load a webpage

I'm the only one that noticed that the new version of twitter desktop even if there is no internet it still loads the main styling and then just tell that there is no internet? Well I did and now I'd like to make to a website that can be loaded even without internet, can anyone tell me how? I'm using pure HTML, CSS and js as front end and node js as a back end.
I currently have no idea how to do it
I'd like it to load ad be able to run flew scripts to generate elements on the page.
It's called Progressive Web Apps, Progressive Web Apps (PWAs) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications. The application type attempts to combine features offered by most modern browsers with the benefits of a mobile experience.
https://developers.google.com/web/progressive-web-apps
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp
A Web cache (or HTTP cache) is an information technology for the temporary storage (caching) of Web documents, such as Web pages, images, and other types of Web multimedia, to reduce server lag. --Wikipedia.
The web page is already stored, when you load it loads from the cache and a function which checks for connection gives the alert of no internet connection.

Is it possible to using web api and open a local folder? [duplicate]

We are currently looking at porting a enterprise silverlight application over to html5. The major roadblock that we have hit is the ability to open files from the user's local disk. Currently they have a document library which just links to files on their computer that they can open from within the app and view or print out. All that I read is that you can only access the local sandbox of the web app with the html5 file api's. We want to load these files from code.
Does anyone know of any workarounds to this?
Thanks
There is no way for html5 to access local file without user selection. But FSO: FileSystemObject works for IE and MAYBE could be regarded as a work around. But still there are some requirements to meet.
It is possible to use chrome's filesystem API to access files on a users local filesytem. So you'd have to be willing to make this a chrome only application.
Using java you can create a "Signed" applet which has access to the local filesystem. (if the applet is signed you can request filesystm permissions)
then there is a tutorial for accessing methods of your java code directly from javascript here: http://docs.oracle.com/javase/tutorial/deployment/applet/invokingAppletMethodsFromJavaScript.html
you should be able to perform something similar from silverlight.
There is no workaround in pure HTML5/Javascript. You need the use of plugins, such as Java or Silverlight (maybe you shouldn't port it after all). As for workarounds, HTML5 gives you an easy way drag and drop multiple files that you could transfer on the server and then display back to your users. Another workaround would be to install a custom agent (a software with only a tray icon) that would send the information about the current user "document library" to server and then again, you could display it back to the user.
Note: I've heard somewhere that browsers will eventually stop supporting plugins. http://www.howtogeek.com/179213/why-browser-plug-ins-are-going-away-and-whats-replacing-them/
Ya, I agree with Markain. However, if you were to limit your audience solely to chrome users, I daresay, you would most likely use some of your users. If Huazhihao is right, then your number of leaving customers should decrease but users who regularly use firefox won't be happy. Overall, I think that this will not work. Otherwise, there would be too many websites that trashed your hard driver (or at least wherever you have the rights to edit/delete files). I think it would be best if your product was setup to synchronize the file whenever an internet connection was detected and a change was made to the file. That way the user would not need to visit the website whenever the file was uploaded. If this is some kind of an error file, then it would be most beneficial if you were to make a link in the application that when clicked, would upload the file to the website and the website were to do whatever was necessary. If this is a purely online thing, then I don't see what business you would have looking through other peoples' files =-). Hope I helped!

Converting simple php web app to LAN only

Apologies if this is not the best tag to use. I'm after some basic thoughts on the best way to do the following without using the net.
I've been asked to build a simple ordering service for a busy takeaway. They're looking for something like you get in McDonalds ie a large screen showing the status of order numbers.
I've created a basic system in php/mysql which consists of 2 pages which look very similar however the staff one has the ability to change the progress when an order item is clicked. The 2nd page is the one that will be displayed on the customer screen and simply queries the database and outputs the results, the page refreshes every 10seconds or so.
The idea is that the customer page will run on a large screen in the restaurant while the staff page will be on a couple of touch screen tablets. As there is no need for internet usage I would like to move this to an internal server but am not sure where to start?
Can I simply setup a server using an old PC, install php and mySqL on it and set it running? Do I then just reference the IP Address of the "server" on the tablets ie something like 192.1.1.1/staffpage.php?
Or is it a bit more complicated than that?
You have the right idea.
I would suggest building a LAMP stack (Linux, Apache, MySQL, PHP) on a cheap linux box. As ivanivan suggested, a Raspberry Pi would be ideal.
There are many tutorials on setting this up with the Pi and Linux.
However, if this is too technical then using an old computer with WAMP/MAMP would also work.
When the server is setup and running on your local network using 127.0.0.1 or localhost, then the ip address of that machine should be reachable by other devices (assuming your firewall allows it).
You could simply load the webpage in a fullscreen browser and use client side javascript to refresh the page every 10 seconds.
Or if you wanted to get clever, you could use ajax or websockets.
On a side note: Another completely different option could be to use a node.js server on a Raspberry Pi and do away with Apache, PHP and Mysql all together.
I hope this helps.
yes you can use the localhost and you need a corn job to refresh the page every 10s

Sharing one JavaScript file among several domains

Problem definition:
Server is an embedded system with no access to Internet.
Each server is managed by web interface which uses JavaScript.
Each server has a local copy of JQuery library.
Clients (browsers) are connected to embedded systems (servers) via a very slow connection.
Clients have the latest browsers (HTML5, CSS3, JavaScript 1.8.5)
Clients are not connected to Internet either.
Clients can't access multiple servers at the same time (servers are in distant locations and most probably a client can only access one server and nothing else, but later that day the client may go to another location and connect to another server).
Each server has an IP address (not necessarily in the same range) and no DNS name.
Every time the client connects to an embedded server, it fetches all the files including the huge JQuery library (huge=~90KB)
Question:
The JQuery library is too big for this slow connection but one-time download is acceptable. However, we don't want the clients to download it every time they connect to each new server. The JQuery on all these devices is the same. But apparently the browser cache is domain based. How can we cache the JQuery library so that the client doesn't have to download the JQuery every time it connects to a new server?
just link to it in one place...
for example, if you have a single server, http://1.2.3.4/ that you want to designate as your CDN, put jQuery on it, and link to it in your scripts using <script src="http://1.2.3.4/jquery.min.js"></script>
you could link it to the ip in your link tag. The server does not have to have access to that access or anything, and so all the clients will geht the jquery from the same server all the time and so it is cached.
Here is a simple solution: All your customers must edit their /etc/hosts file (Google for where you can find it on Windows) and put a line like this in their config:
1.2.3.4 jquery-from-closest-server.com
Each client must figure out the closest server which has jQuery and replace 1.2.3.4 with its IP address.
In your HTML code, always use the link http://jquery-from-closest-server.com/jquery.js
To be safe, you may want to register jquery-from-closest-server.com for those customers which do have Internet access.
When the browser asks for the file, it will use /etc/hosts to resolve the IP address. Since the domain name will be the same for all your embedded devices (changes in the IP address are ignored by the browser), the script will be downloaded once for all clients.
Note that this means you can never upgrade to a newer version of jQuery. The problem is that you'd have to replace it on all embedded devices at the same time because there is no telling from which server the customers are downloading it from.
If that bothers you (and it will in about four months after you discovered the first serious bug), here is another solution: Instead of serving the HTML from your embedded device, distribute a static web app (a set of HTML files and JavaScript) which customer can install in their desktop. Use AJAX and iframes to replace parts of the static web app with data from your embedded device.
Advantages:
very fast (no downloads at all)
only little code on the embedded device
easy upgrade strategy
No deadlocks when you need to upgrade either the embedded devices or your controller app.
[EDIT] PS: Consider to compress jQuery with gzip. That leaves you with a 33KB file. All HTML5 browsers can decode compressed files, you just have to tell them by setting the necessary HTTP headers.
Apparently there is no standard way to include JQuery in our project so we chose to replace JQuery with a smaller similar library. These are the options:
JQuery mobile is a better fit for our project since it has a smaller size and can do almost everything we need from JQuery.
Zepto.js is also another suitable replacement.
JQuip is a stripped down version of JQuery that can help our specific project.

connecting javascript to php socket to communicate with Flash

I'm trying to build a projection installation for a university project, I want the audience to be able to communicate with the installation with their mobile phones.
This is what I'm trying to do:
- My Flash application will be running on a computer connected to the internet and will be connected to an XMLSocket hosted on my server.
- I need a javascript page which the audience can visit, mouse clicks (touches) will then send data from the javascript page to the socket server.
- Flash application will receive the data and so on..
Is it possible? I've been looking around for various resources, but they all require a flash app to be on the same page, which is not what I want.
I just need a standalone javascript page to be able to talk to a flash app.
Any suggestions or ideas for possible work arounds will be greatly appreciated.
Many thanks,
Will
Yes definitely possible. The server sits between the two (Flash and JS), they don't need to know each other exist. JS sends data to the server and Flash pulls it down.
I am not sure to fully understand your question.
There is no such thing as a "javascript page", javascript is a... script running in a browser environment.
In the case you want to use an Android/iPhone app environment I don't think you need javascript to do this.
But if what you want is to have a web/wap page accessible to the mobiles, with a user interface, buttons, text field, whatever, which communicates in both directions with your XML socket, you need to build your user interface in HTML, and then to use some javascript to call your XML script and translate the response in the interface. If you have a server, can't you host also your UI there? The cross-domain issue would be avoided, otherwise it's easy enough through any server-side script (PHP?).
So yes it seems very possible, but I don't see what you mean by "they all require a flash app to be on the same page". Here's what I understood: Your Flash app is not what you want to load in the mobiles, it's connected to the server's XML in/out and working fine. You just want an interface communicating with this socket. Right?

Categories

Resources