server-side data push for web services - javascript

I´m a web programmer and I'm experienced in regular synchronous and asynchronous web services. So the normal way to get data from a web server is to request it (pull it) or to establish a permanent connection.
Now I'm asking myself if there is any possibility to run this the other way round so that the server pushes new data to the client without a previous request of the client by using native technologies like HTML5 and Javascript.
Summarized: I'm searching for a way to realise a server side push system what works with any modern web browser (IE, FF, Chrome, Safari,...) by using regular technologies like HTML5 and Javascript without any plugins or additional software.
The client should just listen for new data as long as the web site is opened and the only connection from the server should happen if new data gets pushed. It must work even through NAT or Firewalls.
Well main reason is to save server load and data transfer with many connected clients. Please also mind that not each push will be a broadcast, single client push must also be available.
Is this somehow possible or still no way to handle it without extra software?
Thank you

Though it’s not implemented in all browsers yet, you can try using the standard Web Push API.
You can read more on it in the articles Using the Push API & Push Notifications on the Open Web.
The Push API is a W3C standard to let you enable users of your Web app to get push notifications at any time—even in the background; i.e., even when your Web app isn’t running in the foreground on the user’s device (or even when the browser’s not currently running on the user’s device).
It uses Service Workers to handle messages sent using common push services, and to allow your Web app to react to the push notifications it receives.
It exposes a new push event to scripts. Here’s a simple code example from the Push Notifications on the Open Web article that shows how to use that push event to show an actual notification.
self.addEventListener('push', function(event) {
console.log('Received a push message', event);
var title = 'Yay a message.';
var body = 'We have received a push message.';
var icon = '/images/icon-192x192.png';
var tag = 'simple-push-demo-notification-tag';
event.waitUntil(
self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag
})
);
});
Update 2016-02-12
The Microsoft Edge team recently moved the status of Web Push support in Edge to Roadmap Priority: High — We intend to begin development soon. Since Chrome and Firefox have already shipped support for it, that means
once Edge lands that support, you’ll be able to send standard push notifications to Edge, Chrome, and Firefox users of your Web apps.

There is WebSockets technology, it allows continuous full-duplex connection stream between a client and a server. More detailed here https://developer.mozilla.org/en-US/docs/WebSockets/Writing_WebSocket_client_applications.
WebSocket is standardized protocol and each server supports it.

Related

Ping service worker without displaying a notification

I’m trying to monitor which service workers are active (ie, which users have their browsers open). I came up with a solution that sends a simple ping through the web push API, and that would trigger the service worker to send a ping request to my server. But I’m finding that if I don’t display a notification to the user, I get an alert from Chrome.
This site has been updated in the background
Am I doing something wrong, or is there another way to solve this problem?
No, you're not doing anything wrong. This is by design.
It is not possible to contact the Service Worker in the background using the Web Push APIs and have the system not tell the user. You're describing a passive tracking system where you track the user even though the user is not using the product, and that has been restricted by SW design. When you use Web Push you should show your own notification (the API is for notifications) and if you don't, that's what the browser does.
I understand that it would be super nice to be able to contact the SW from the server and have it run some little errands but unfortunately that would make it possible to carry on some mischief too. You also cannot eg. leave open a WebSocket (not available in the SW) or schedule tasks in the future to have it ping (not guaranteed to run).

Having a web application access a service directly without a server

For my job, I am doing research on finding a means on how a web application running locally from file:\ in IE11, created with either HTML5 or Javascript, can access the raw data or listen to a computer's serial port being sent out from a windows service or proxy. The situation is that We have a proxy designed to collect data from a computer's serial port and it will send that data outward on our network to the local host.
What we want our web application to do is to catch that data the proxy is sending out directly from the service on the computer, removing the need to have the proxy send the data to a server and having the web application collect the data from a server. So far googling the solution has been difficult. Does anyone know the solution to our problem or knows where to find the solution?
Lazy people, why don't you use Google search bar (!?!)...
Here: https://github.com/garrows/browser-serialport
Note: You cannot use this in a Web page, i.e. cannot put it on a Web server. And it is supported only by Chrome.

How can I leverage subscription.getKey() in service workers?

I'm building a push notification service for my web users using Google Chrome Push Notification Service based on Service Workers.
Currently GCM don't allow push messages to contains payloads in order to overcome this gap my service-worker detects the push-notification event and pulls message from server, however the service worker have no means to identify itself to the server in order to fetch the correct message.
Is subscription.getKey('p256dh') the best approach to accomplish this? Any examples or code available?
Firefox dev version now support push notification with encrypted payload. You can find live example here https://people.mozilla.org/~ewong2/push-notification-test/. And source code here . If you want use firefox push notifications download and install https://www.mozilla.org/en-US/firefox/developer/

Express web sockets and a central server

I'm creating an app where the server and the clients will run on the same local network. Is it possible to use web sockets, or rather more specifically, socket.io to have one central server and many clients that are running native apps
? The way I understand socket.io to work is that the clients read the web-pages that are served from the server but what happens when your clients become tablet devices running native apps instead of web pages in a browser?
The scenario I'm working with at the minute will have one central server containing a MEAN app and the clients (iPads) will make GET requests to the data available on the server. However, I'd also like there to be real-time functionality so if someone triggers a POST request on their iPad, the server acknowledges it and displays it in the server's client-side. The iPad apps will (ideally) be running native phonegap applications rather than accessing 192.168.1.1:9000 from their browser.
Is this technically possible to connect to the socket server from the native apps or would the devices have to send POST requests to a central server that's constantly listening for new 'messages'? I'm totally new to the whole real-time stuff so I'm just trying to wrap my head around it all.
Apologies if this isn't totally clear, it's a bit hard to describe with just text but I think you get the idea?
Correct me if I am wrong.
You have multiple iPads running native app. They send a POST request to your node JS server which is running in a computer in the same local network. Whenever the server receives a request from app, you want to display that a request has been received in your computer screen.
If my assumptions about the scenario is correct, then it is fairly easy to do. Here are the steps to do it.
Create a small webpage (front end). Load socket IO in the front end page like this -
<script type="text/javascript" src="YOUR_SERVER_IP/socket.io/socket.io.js"></script>
Then connect to server using var socket = io(). This should trigger connection event in your backend.
Handle all POST request from apps normally. Nothing special. Just add a small snippet in between. socket.emit('new_request', request_data). This sends new_request event to front end.
Handle the new_request in your front end using socket.on('new_request', function(request_data) { ... });. That's it. No need to add anything to your native app for realtime update.
The second step would be a little complicated as it is necessary to make socket variable available inside all POST requests. Since you chose node.js, I don't think you need any help with that.
Not totally clear on your project, but I'll try to give you some pointers.
An effective way to send data between native apps and a server is using a REST server. REST is based on HTTP requests and allows you to modify data on the server, which can connect to your database. The data returned is typically either JSON or XML formatted. See here for a brief intro: http://www.infoq.com/articles/rest-introduction
Android/iOS/etc have built in APIs for making HTTP requests. Your native app would send a request to the server, parse the response, and update your native UI accordingly. The same server can be used from a website using jQuery ajax HTTP requests.
Express.js is more suited to serving web pages and includes things like templating. Look into "restify" (see here: mcavage.me/node-restify/) if you just want to have a REST server that handles requests. Both run on top of node.js (nodejs.org).
As far as real-time communication, if you're developing for iOS look into APNS (Apple Push Notification Service). Apple maintains a persistent connection, and by going through their servers you can easily send messages to your app. The equivalent of this on Android is GCM (Google Cloud Messaging).
You can also do sockets directly if that's easier for you. Be careful with maintaining an open socket on a mobile device though, it can be a huge battery drain. Here's a library for connecting ObjC to Socket.IO using websockets, it may be useful for you: https://github.com/pkyeck/socket.IO-objc
Hope that helps!
To answer your question, it is definitely possible. Socket.io would serve as the central server that can essentially emit messages to all of the client. You can also make Socket.io listen for the messages from any of the clients and serve the emitted message to the rest of the clients.
Here's an example of how socket.io can be used. Simply clone, npm install, and run using 'node app.js'
All you have to do is to provide a valid server address when you connect your socket from the iPad clients:
var socket = io.connect( 'http://my.external.nodejs.server' );
Let us know if you need help with actual sending/receiving of socket events.
It is possible to connect to Websockets from your apps.
If you are using PhoneGap then you need a pluging that gives support to websockets in your app (the client) and then use websocket like normal way using Javascript see this.
If your app is native iOS look into this it could help you.
The primary use of the Sockets in your case is to be a bidirectional "pipe" between an app and server. There is no need of server sending the whole web-page to the native app. All what you need is to send some data from server to the client(app) in response to POST (or GET) request and then using this data on client side to update client's UI in real-time. If you are going to use moderate amount of devices (say tens of them), you may have connected all of them to the server permanently keeping individual socket connection open for every individual link server-to-app. Thus you may deliver data and update client's state in real time.
In fact web browsers also employ sockets to communicate to web servers. However as in general case there is no control on amount of concurrent clients in Internet, for the sake of limited networking resources conservation, servers do not keep sockets open for a long time, closing it just after the web-page was sent to client (or timeout has expired). That's how HTTP protocol works on the low level. The server waiting for the HTTP clients (browsers) by listening the 80 port, responding them by sending the whole web page content, then closing the connection and keep waiting for another requests on the same port.
In your case it's basically a good idea to use socket.io as it's a uniform implementation of sockets (ok WebSockets) on both client and server side. The good starting point is here

Whether to use WebSocket or Server Sent Event for sending notifications from server which retrieves social network presence in realtime?

i want to develop a webpage which retrieves from server and shows online presence information of user's contact from various social sites like facebook, google & skype, linked in real time should i use WebSocket or Server Sent Event (SSE) ?
The web application needs to support older browsers and would be deployed over cloud to server 1000s of concurrent users.
Back to the basics. According to this page here: http://www.w3schools.com/html/html5_serversentevents.asp , Internet Explorer does not support SSE. So maybe there's a plugin that can wrap both functions for use in different browsers. Otherwise WebSocket. Your choice though.

Categories