Socket I - how does it connect back to the server automatically? - javascript

As mentioned in this tutorial for creating a chat application using Socket.IO :
Notice that I’m not specifying any URL when I call io(), since it defaults to trying to connect to the host that serves the page.
I was wondering how did it do that? How can one through JavaScript on the client side retrieve the details of the server that served this very page? I tried searching through Socket.IO, but wasn't able to find the io() function.
Can someone point that code that retrieves these meta-details or show a small snippet that does the same?

In browser Javascript, the window.location object has these relevant properties:
window.location.host - The hostname of the current webpage
window.location.port - The port number of the current web page
Other properties are here: https://developer.mozilla.org/en-US/docs/Web/API/Location
So, socket.io can use these two values to connect back to the host that the current web page came from. You see some of this logic in the socket.io client side file here in the source.

Related

mqtt client in html page

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.

html5 websockets closing connect when a link is clicked

I use the javascript websocket to connect to the websocket server. I use python flask framework to navigate through webpages.
my project is as below:
the route "/" renders index.html page. In this page, I create a
websocket connection.
when I receive data from the server, I navigate to different route (for instance: "/page/1")
When i click on the href link on my index.html page, i see the websocket is being closed.
I googled out and implemented 2 methods of persistent storage.
LocalStorage
Shared Web Workers
Both of them were not of any use, since, the websockets are being closed when i click on the href link. From this I think that persistent storage of websocket instance is not a solution to my problem (please correct me if i am wrong). Please suggest me the right approach to tackle my problem. Thank you in advance.
I am using the latest version of google chrome (52.0.2743.82)
The WebSocket connection only persists as long as the page it was established for is open. Loading another page closes the WebSocket, so storing a reference to the object does not help (what it references no longer exists). You need to establish a new WebSocket connection after each page load.
(For an older look into how the problems here, see http://tavendo.com/blog/post/websocket-persistent-connections/, and 10.2.3 in the HTML spec https://html.spec.whatwg.org/multipage/workers.html#shared-workers-introduction)

NodeJS chat server interacting with non-node hosted html page

The node.js chat example is ubiquitous. However, they all serve the static html page with which the chat feature is integrated.
What about an html page that is served via apache, php, .net, or other which interacts with a node.js based chat server. How would this be implemented?
For instance, the html page contains a form used to login. The form's action points to the node server which provides the authentication and message handling. How does this chat server communicate with the client-side when it is not also providing the static html content?
Yes, it's possible. If I understand you correctly, you'll probably want to use this approach:
Run the apache server on a different port from the node.js server, and have the static server serve the chat page. Then, you have two main options for how to get data from the static page to the node.js server: either use XMLHttpRequest directly from the static page with CORS (you'll need it because you're running from different ports, but it's still possible to have CORS allow from different ports on the same domain but nothing else, so it can still be secure), or have an invisible iframe of the node.js page on the static page, and then send data to it with postMessage, and then the iframe (which is on the same port as the node.js server, as it's being served by node.js) will forward the data from the postMessage to the server with XMLHttpRequest
You can also do a proxy, but it won't be as good for this type of situation I think, because if Apache is running the proxy, it completely erases how node.js does well with comet and things, but if you run node.js as the main server proxying to Apache, it would be easier just to do everything with node, so I'm guessing you don't want that
Here is a simple solution I found that works to add socket.io real-time interactivity to any existing html page, even when that page is hosted on another server.
Include a reference to socket.io in the head of the html page. The IP address and port number should be the location of your node.js server that is running socket.io.
<script src="http://xxx.xxx.xxx.xxx:xxxx/socket.io/socket.io.js"></script>
[NOTE: localhost doesn't work, you must use the actual IP address - don't forget the port]
Then, within a script block on the same html page, open a connection to the socket:
<script>
var socket = io.connect('http://xxx.xxx.xxx.xxx:xxxx');
</script>
That's it, you're connected!

Allow two clients interact without server

Is it possible to allow two clients interact directly without a server?
I am referring to websites, for example is it possible to create a chat between two clients that are on the same website using only javascript on the client-side.
If not, what's the minimum server-side to make a chat work between active clients on a website? (eg: one PHP file and no database) ?
My idea:
Storing the conversation would be easily done using localStorage on each client, the problem is how to send some data from client1 to client2 without storing anything (or at most that message) in the database. Also, note that "past" conversations should not visible, so no storage needed for that.
Note that I don't want any nodeJS or websocket solutions, I want something as simple as possible. So, what's the minimum code and files to make a chat between online users?
The WebRTC APIs will allow JavaScript to initiate a direct browser-to-browser connection, but a server is still required to serve the page and coordinate session initiation.
The APIs are still rapidly evolving and only available in bleeding-edge browsers, so it's not yet ready for real production use.
However—to be honest—for what you're trying to do, the easiest option is Node and socket.io:
var http=require('http'), express=require('express'), sio = require('socket.io')
, app=express(), srv = http.createServer(app);
app.use(express.static(__dirname+'/static'));
sio.listen(srv);
srv.listen(80);
...and now you have a working websockets server in 5 lines. Put all your client-side stuff in the static folder and you're good to go.
HTML5 has got a new Web Sockets feature
With this the server intervention is almost nullified..The server and client communicate through the new protocols
ws - Web Sockets protocol
wss - Web Sockets Secure protocol (similar to https)
Live demo
No, It's not possible. If you want a chat box, you have to store the data in the server. And what connects the clients, like display the chat texts and the same things to every client, they come from the server.. So it's not possible like that. Well, even free chat boxes put the data of each sites in their servers.
As for your idea using localStorage, maybe it's possible (But still, using the new WebSocket protocol), but it doesn't work in the time dimension, right? if another user joins, they won't see what has been sent before.

Sending commands via Telnet/TCP to web page (Node.js)

I'm new to node.js
To illustrate my question, I'll use an example:
Client sends a command via telnet/tcp to socket server (ie 'telnet 192.168.0.10 8888' then 'showDiv1')
Command is forwarded from server to a Web page
depending on command, different are displayed on the web page
There are plenty of examples on the node.js website, but it seems difficult to combine the sample scripts to produce the desired functionality above. Any ideas?

Categories