mqtt client in html page - javascript

I want to have a web page that can publish and subscribe to a mqtt broker.
I also want communicate to the broker using the 1883 port - not a websoctets.
is this possible - does anyone have any working examples ..
I'm a real novice , and admit i dont fully understand the difference between nodejs and javascript.
I have a html page made up , it has a checkbox setup, the checkbox is set to switch an led on an esp8266 through a mqtt broker. after i load the page - the switch works... but i'd like as soon as i load the web page that it would chek the status of the led and reflect that on the check box. ie: when I load the page I can see if the led is on or off.
I have a working nodejs script that can publish a request for a status to the led, and subscribes for the repsonce .. and it sucessfully recieves a responce..
is there any way i can build this script into my html page such that when it loads -it gets the responce from the script and sets the checkbox accordinaly ?
I see some examples of java mqtt html clients but these seem to only work with websockets.
In my project I'm not sure what listner ports I am allowed to use for the websockets ( if any) so would prefer to stick with mqtt port 1883.
all thoughts welcome please ?
thanks

If you want to connect to a MQTT broker from with a web page you MUST use MQTT over Websockets. The Javascript sandbox in the browser will not allow you to do it any other way.
You will need to use a MQTT broker that supports MQTT over Websockets and you will most likely need to configure it to do so. It will need to be on a separate port to 1883 as this is traditionally used for native MQTT.
You can use either the Paho JavaScript library (https://www.eclipse.org/paho/index.php?page=clients/js/index.php) or the MQTT.js library (https://www.npmjs.com/package/mqtt) in the browser. Both libraries come with examples.
We will not just provide examples here on Stack Overflow, try with examples supplied by the libraries and if you get stuck, open a new question and show what you tried and explain what is not working and we will help you fix it.

Related

how to connect vue with a raw tcp node server?

the client i am working with has a node js tcp server working with gps trackers through raw tcp. This trackers can not be upgraded to use socket.io or any other library. They simply send raw data.
My work is to upgrade the client and admin communication, currently they login by console using netcat ip port and typing the command they want to execute.
My idea is to use vue since they woule like realtime communication and better ui/ux. I have no idea how to make a raw tcp tranport with vue. any help?
The short answer to this question, is that the browser cannot directly use raw TCP connections. If the browser is your only option you are probably out of luck.
However if you still want to use vue you have a couple of options. You could implement a kind of TCP-socket-bridge. Such as ws-tcp-bridge. You could also write your own middleware server to dispatch events in node.js, using something like the example here.
A third option would be to do something like electron-vue and use its node instance to relay the data to vue with a websocket or socket.io. Here is an example of an express server with electron.
Good luck, and sorry it isn't easier.
Im just thinking above my head here. But what about having maybe a bash script that post to a webhook back and forth. You can post to an endpoint and run a bash script behind cameras, and this same script post back to another webhook that you will be listening to. It wont be fast i believe but it will get the job done. You just have to manage the queue and the webhook listening. Also be sure to limit the webhook origin request to your app only.
Bash easily can save the output of a netcat command, and also this way you isolate the raw tcp communication, giving it an extra layer of security.

How to trigger js event with Java?

I am building a java chatting web application.(Server and Client in one project)
follow is my condition
Springframework 4.2.3
JSP
Maven Project which converted from a Dynamic Web Project
Unable to use node.js
So User scenario in my head is
User enters some text and press Send
Ajax call to deliver messages to server
Server checks the users who are currently connected(from Session maybe)
Server calls other users script to append new message
I am quite confusing with step4. Is it possible that Java calls DOM event trigger?
How could a client get a new message event from server?
Thanks. :D
P.S.
These days majority of chatting servers are event-driven. Is it possible to build an event driven chatting server with Java?
Your solution is formed as if there is no WebSocket technology available to you. WebSocket is implemented to solve real time messaging issues. It pushes message to the destination.
But if to stick wih your method following is meaningful.
You need someplace to keep incoming messages such as database or session.setAttribute [bad idea]. Then use some ajax call loop on the clients machine to ask for a new incoming message from server.
Probably your server will slow down due to incoming flood of GET requests from multiple users.
to Your last question in post scriptum: yes, I use tomcat websocket api.jar in my projects. There is well written documentation on apache.org
As I mentioned, learn WebSocket if your users are not using old internet explorer browsers. There are bunch of tutorials on it...

php mysql background process

i have developing a website that user can chat with other user if they are online . if one user send a message will notify that receiver on their screen , these checking process are happen in background process , i have an option of using
setinterval method and javascript self execution method
but i am looking much faster background process methods which will check every seconds if message or notification arrived .
could any one give suggestion for this.
You can use HTML5 websockets.
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(JS functions), you can send messages to a server and receive event-driven responses without having to poll the server for a reply.
below is good link to start
http://www.sanwebe.com/2013/05/chat-using-websocket-php-socket
I think the best match for your needs will be http://elephant.io
Elephant.io provides a socket.io client fully written in PHP that should be usable everywhere in your project.
Take a look at the Thruway Project. It's a PHP websocket implementation using the WAMP protocol, which gives you Publish and Subscribe abilities (you can use that for your chat application) as well as RPC.
A good place to start would to take a look at this chat demo (source code) and then use Thruway as the WAMP router.
I'm one of the developers of the thruway project, so if you run into any issues or have any questions, feel free to ask.

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

Instant Message on browser

Introduction: I want to develop the chat client that user can chat on the browser and I use the protocol call xmpp. Because of HTML5 web socket not yet available I try flash xmlsocket instead.
Problem: I cannot connect to the server via browser. I'm not sure why, but I think that it is the problem of the server configuration.
Question: Which is the best jabber server suitable for this job?
Most probably this is a permission issue. Either that or you've just configured the wrong host/port to connect to. Flash is not allowed to connect to other hosts than the one it was gotten from itself. You have to explicitely allow flash connections on the receiving side of the request (so on the chat server that you are connecting to). Google for crossdomain.xml to get more info.
ejabberd sounds like a suitable option for you. ejabberd is xmpp server written in erlang and is used quite widely. Many of the well known web based im services like www.meebo.com etc are known to be running on ejabberd. It allows you to install other transports which would let you enable talking to users of other protocol like yahoo, msn, icq etc.
You can also have a look at the xiff action script library by ignite realtime. It is an xmpp client library in action script. If you use this library you would just need to implement the ui components.
Hum... flash is ok, but you'd be better of using something like BOSH, which is basically an HTTP layer over XMPP.
Ejabberd would be a good server, as it supports BOSH, I don't know about OpenFire or Tigase (but I'd say they do). Other servers should be looked at carefully because they don't seem to have a "dynamic" community.
You will need a lot of Javascript, and for that, I can recommend StropheJS, which is probably the very best library out there today.
We have created a MUC (Multi-user chat room) client called Aristochat that works in the browser recently at Superfeedr. You can find the code on Github and an example here.

Categories