Real Time Interaction on Web Page - javascript

Background: I have a microcontroller ESP8266 that enable connexion through TCP/IP, UDP or even HTTP stack using WiFi. A button is connected to this microcontroller and trigger event on touch. I send that information (now in UDP for test) towards a computer which runs an HTML carousel (web page). I would like to create the interaction between the button and the web page in real-time. I found that a simple HTML/CSS/JS web page doesn't allow to read UDP socket so I install a web server on the computer to use PHP.
NB: Real-time means direct interaction (inferior to 30 ms up to 100 ms) but should be ok in the actual data flow.
Problem: I struggle on the Web implementation. I found appropriate carousel in HTML/CSS/JS. I already received some UDP packet in a PHP file but I don't know how can I perform a real-time interaction (trigger image change in the carousel). I read about Ajax but it seems to be at client-side. I have in fact no background in Web application design.
I would like to know if in fact, it is possible and if yes basic information to start working on it.

Although I don't completely understand your microcontroller setup I can tell you that it is defiantly possible to change html elements and values in real-time. The place where I work uses Angular.js and it has a handy "scope" variable that is directly linked to the HTML. So, if the value in the code changes it will change on the website as well (without reloading the page). Its relatively simple to begin with but check out demos or something first, maybe I understand the question wrong.
https://angular.io/

Yes, this is definitely possible. Your two options are polling and websockets. If your backend is PHP, I'd start by writing some JavaScript to to poll the server at a given URL every 200 ms. Your PHP code handing that URL endpoint would then read a value from a data store somewhere, let's say a cache key in memcached.
Press button
UDP message sent
PHP code receives UDP message and sets value in cache key
When your polling code runs next it will receive the updated data which you can then display on your webpage.
This is a really basic (and inefficient) setup, but it's simple and should get you started.

We struggled with this same problem and eventually used NGINX and the PUSH module.
It allows a Post message to the server (NGINX) to be pushed to displayed web pages on the browser.
In our setup the controller sends a POST,containing JSON data, to a small linux board running NGINX. NGINX then sends this to any subscribers. The web page contains a couple of lines of js code to subscribe to the feed. When the JSON arrives at the page, it fires the js receiving code, and we update the displayed fields in the webpage. The setup is quite responsive, without measuring the delay, it seems to be within 60ms.

Related

Ways to transmit data from client to server (silently)?

I am kind of new to JavaScript / jQuery and Web Development. My current project is to build a small chat room for a website. Everything works, but I have one question:
How to transmit date from the client to the server and back (e.g. via javascript) (e.g. when some chat member sends a message)?
Of course I have implemented a solution that works: I use $.get(...) or $(...).load(...) to transmit data. Of course, every query is listed in the network section of the browser inspector. But when you open the inspector on 'big' sites, e.g. Facebook, no network activity is listed although I am sending/liking/clicking, which all has to be send to the server and be processed.
So how the hack do these sites transmit data??
Another problem: How does the client receive information from the server (e.g. if some other chat member has send a new message)? Currently I run a time interval that checks every 2 seconds for new messages.
It is going to be a big refactoring, but you should read https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications

How to make a network architecture without the server being authoritative

As a prototype i'm making a multiplayer paint game on a canvas using javascript and websockets. The conditions are that the server cannot generate the canvas in any way. All model logic happens on the client-side.
Right now i have the following setup:
1) When an input happens on the client side it is transferred to the server and saved. The server does a very simple validation check.
2) Every 15 ms (on the server) all inputs are sent to the clients and cleared. The clients render the input locally.
3) Every 200 ms each client send their version of canvas to the server where it is saved
4) Every 200 ms the server votes for the "right" version and send it backs to the clients where they update their canvas. The right version is stored on the server with a timestamp.
5) When a new client connects they get the most recent right version of the canvas from the server.
While this approach provides multiplayer paint with a persistent state, it also carries some issues. What is the right version and how do they vote? What happens when a client experience a lag for like 10 seconds and then send their version? Also, if each client is making constant local changes, the canvas for each client will never be quite the same, making it impossible? to find the correct version of the canvas because they all differ when sent to the server.
The question can be boiled down to: It is possible to make a reliant client-server architecture where the client does all the logic and the server only checks if the input is valid? Even if it entails more network traffic. And if so, what would be a good approch?
Upon further investigation I found some excellent documentation on the above problem.
Having a client-only network model can be described as a peer-exchange model and was actually what was used in age of empires 1+2. However, as Microsoft faced several issues getting the clients to run synchroniously (and small variations broke the game), I have decided on a server model instead with some shortcuts to actually enable the server to merge the models.

Integrate Node.js with Symfony2 or PHP

I'm developing a web application with Symfony2. I need to create a push notifications sysmte (like Facebook). When an user publish something, I need some of another users receive a notification.
I saw that Node.js it's the easiest manner to do this. But, I did some simple examples and all works fine, but I don't know how can I integrate this node.js application with my Symfony2 application, or really with a PHP application.
Anybody can help me?
Thanks in advance!
Please note that you've not given enough details, so I will respond as a front-end developer and not as a mobile developer
Integrating NodeJS and PHP (in general) is not a good way since you need to launch both servers separatly, create the websocket server in JS while your application is in PHP and finally create a request (GET or POST) from your PHP to you JS server. Well, a big mess, so I'll expose my solution here under.
Quick insight for mobile apps. Well, technically, there's no easy way. You can use the Push "protocol" (http://www.wikiwand.com/en/Push_technology) with NotificationPusher (https://github.com/Ph3nol/NotificationPusher). I didn't used it before so I can't help you with it.
In general.
Most of the time when people thinks of Push, long polling will do the trick. For starters it means that the request is made client-side and the server don't send data & close connection until there's new data.
How do you implement this ?!?
Basically, you change the max_execution_time using ini_set or set_time_limit to a very long time for the current script and launch a loop (like a do..while) with a sleep and the check to your data inside. From your Javascript just make an Ajax call, for example with jquery: $.get. Just remember to remove the timeout and stay in asynchronous mode.
The only drawback of this solution is that you will always have a connection opened to your server which will consume a bit more of battery on a mobile device. If you have multiple types of data to receive do not hesitate to merge the calls and publish a type in your response data, since most of the browsers allows only 2 or 3 simultaneous connections to the same server.
I sounds like your describing WebSockets.
Take a look at Socket.io, its a module for node.js.
Also there is a example at GitHub https://github.com/Automattic/socket.io/tree/master/examples/chat
Interesting files for you should be the index.js and the public/main.js.
You can see the example live at http://socket.io/demos/chat/

javascript setInterval() load

I am trying to figure out what kind of load the window function setInterval() places on a user's computer. I would like to place a setInterval() on a page that is viewable only by my company's employees that will be checking a basic text file every 5 seconds or so and then if there is something to display, it will throw up some html code dynamically on the screen.
Any thoughts? Any better, less intrusive way to do this?
Appears it should not cause a problem, pending that the function setInterval() fires off is not heavy. Since I will only be reading a text file which should never be too large (text file will be overwritten about every minute by a completely separate job or bash script), the load should be minimal since it will be read in as a string, analyzed, and if necessary throw out a small amount of HTML code to the page.
I agree with all the comments regarding a single, polling setInterval() to be trivial.
However, if you want alternatives:
Long Polling
The browser makes an Ajax-style request to the server, which is kept
open until the server has new data to send to the browser, which is
sent to the browser in a complete response.
Also see:
PHP example and explanation
SignalR
Web Sockets
WebSockets is an advanced technology that makes it possible to open an
interactive communication session between the user's browser and a
server. With this API, you can send messages to a server and receive
event-driven responses without having to poll the server for a reply.

Library that auto-updates/reloads the current page when the server changes

I'm looking for a Javscript library, server, etc. that will allow me to automatically reload a web page when the version in the server changes.
Update: I understand the technologies involved, and what it would take to implement this. What I'm looking for is something that's already made. A script I can include in my HTML file that will monitor the server for me. I mean, why reinvent the wheel? :D
Do an ajax call at set intervals to a server side script passing it a timestamp of the latest file, compare that to the timestamp of the file on the server, and if the one on the server is newer, then echo back the contents and reload the page.
You need something like Comet, that lets you send a push message from the server to the client, as soon as a new version is available. The basic idea is to keep an connection open from the client to the server, over this open channel you can send messages to the client which in turn can react to such messages (e.g. by executing JavaScript code to reload the page).
See this example with a PHP backend on how to implement Comet.
The must for this kind of technology is node.js with the socket.io module.
It allows you to use WebSockets, a channel remaining open between the client and the server, and both of them react to changes when a message is sent either way.
When websockets are not available (not using modern browsers), socket.io fallbacks to long-polling ajax.

Categories

Resources