Cross-Browser Communication - javascript

I am designing a website that requires a host and client websites. The host will set something up (a session), and the clients will connect to that host using an ID specific to that session.
I have considered how I will facilitate that communication, and initially I was going to have both the clients and the host periodically query and update a database which holds the current states of all clients and the host to communicate new options and changes - but then I wondered if it is possible, using javascript [or something], for them to connect and communicate directly?
The communication would be very simple messages - single strings to communicate current state and stuff like that.
Im pretty proficient in javascript/html/css, but am happy to learn if there is something that would do a better job of setting this up.
Thanks!
Alex

You could try httprelay.io, requires no additional libraries and can be used for simple http client to client communication.

You're looking for WebRTC, which is the de facto and recommended way of doing peer-to-peer connections through the web with pure Javascript:
WebRTC (Web Real-Time Communication) is an API definition drafted by the World Wide Web Consortium (W3C) that supports browser-to-browser applications for voice calling, video chat, and P2P file sharing without the need of either internal or external plugins.
And yes, before you ask, simple messages can be exchanged as well.
Here is the Mozilla reference explaining WebRTC.
Here is a nice simple tutorial to get you started with the code.
Here is a peer-to-peer chat room with video capabilities built using pure WebRTC as a demo.
Prior to WebRTC, there was no satisfactory decentralised way of doing this.
As the comments indicate, Websockets would have been the right idea if you were going with a centralised system - they facilitate real-time communication between clients and a central host.
Decentralised systems, however, must be implemented using WebRTC - this is the only option on the cards.

Related

Communicate with devices on local network using client-side Javascript

I'm trying to build a website that allows you to transfer files to devices connected on your local network. This website is static, and will be hosted on GitHub pages.
Is it possible to use Javascript to communicate with (i.e. transfer files/text) other devices on the local network? The IP addresses of the devices are already known and I'm looking for a peer-to-peer connection here.
Note: As this website is static, there is no server side code that can be controlled.
Thanks
Yes, it's possible with caveats, depending on the specifics of your situation.
WebRTC
With WebRTC, you can establish a real peer-to-peer connection between two clients on a network. They can send data (binary or strings), and media streams (like webcams and microphones). This can even work from a static page.
The catch is that you need some sort of server to help coordinate the connection. Because of the way the WebRTC standard was originally set up, there is some back-and-forth that must occur to set up that peer-to-peer connection. Some method of communicating the signalling between the clients must exist, and this is usually done via web sockets and an intermediary server.
There are some novel alternatives.
In the future, ORTC may solve this issue, allowing a one-shot method for setting up the call, making the server-side requirements easier.
Embedded HTTP Server
You didn't elaborate on the specifics of what device you want to communicate with on your network, so maybe this is a possibility as well. There's nothing stopping your browser from communicating with devices on your LAN. Your static web page can use the Fetch API or AJAX to retrieve data from devices.

How to implement video conferencing feature inside a website using webRTC?

Recently I was working on a webRTC project that displays media stream in users browser. However this was only on the client side. What if I want to stream this media to other users browser. As I looked around I found that it was possible by connecting to peers and setting up signalling servers (STUN & TURN). I went through all details that was mentioned on one of the articles on html5rocks website.
I am making use of simplewebRTC but that isn't enough I have to set up my own signalling server in order to be actually able to video chat.
My question is what actually is needed in order to implement a live video chat application embedded within website apart from the api provided by webRTC and how do I set up my own signailling server.
signalmaster was built as a signaling server for simplewebrtc and used by talky.io. It's a node application, start it with "node server.js" and then hook up simplewebrtc to the socket.io endpoint provided.
STUN and TURN servers are not signaling servers. They just help with punching a hole through NAT. The most popular option is rfc-5766-turn-server, restund performs quite well too.
You should provide more detail about your project to get a good answer. Are you planning on making only browser to browser calls? SIP calls? These would be a factor in the signalling server you choose. I went with a SIP signalling server (SIPML5.org) and integrated it with an Asterisk server for call control. This also let me integrate my existing corporate telepresence devices into the PBX. If you want to read up on the basics of signalling and on Webrtc in general Muaz Khan has done some very good work on it.
https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md

What role does Socket.IO have with Node.js

I'm fairly new to the world of JS and its abundance of libraries. I'm looking to get into a project that involves network communication (sockets) between clients and a server. In a world with tons of libraries, I cannot make a decision as to which to use. I'm looking for something that will bring efficiency and stability.
I've been told that Node.js is like the middleman between you, as the developer, and Socket.IO. I've been told it's a huge framework that you may not use at least half of. I've been told that to maximize efficiency, you're better off using Socket.IO to make your own functionalities. I've done some research on my own and found that Socket.IO NEEDS Node.js and Node.js DOESN'T NEED Socket.IO. Which is completely opposite of what I was told. Then I find that most developers use both Socket.IO and Node.js at the same time?
Like I said, I'm fairly new, but I cannot find the right resources that would help me accomplish a websocket communication between a client and a server with maximum efficiency, or at least explain the difference between Socket.IO and Node.js. If anyone here could, please let me know! I would greatly appreciate it.
node.js is a general purpose javascript-based run-time environment (somewhat similar to other language runtimes like python in scope). You can create apps in it that don't even use the network. It is often used as a web server for created web apps and has a great set of tools and rich library of add-ons for doing so. It does not need socket.io.
socket.io is a specific library to enable web-socket-like communication between a client and a server (e.g. a chat room app is the canonical example). The server side of socket.io assumes a javascript run-time (because it's written in javascript) so that generally means node.js (though I'm not sure if a different JS runtime could perhaps be substituted).
You can think of node.js like the platform and socket.io like a specific tool to do a specific job that runs on that platform. You would use socket.io (on top of node.js) if you needed web socket connectivity between client and server.
You would use only node.js if you need any of the other things node is good at, but did not need websocket connectivity.
websockets themselves can be programmed on the server side without socket.io and without node.js. They could be programmed in strait C++ or in Java. But socket.io (running in node) provides a very easy way to set them up because the socket.io library covers both client and server in one library and one API and it's all in the same language (javascript). Look at the chat room app example on the socket.io site and you will be unlikely to find any other solution that can accomplish that in as few lines of code as it does and with the same interface on client and server.
If you were only setting up a websocket server (no web server or web app of any kind), you could still use node and socket.io and use it just for the websocket server and it would still be quite efficient. While node is capable of doing lots of other things, if you don't configure and install all those other things, they aren't costing you anything - they are just unused capabilities that aren't running.
I should add that one other thing the socket.io library does is it handles an auto-negotiation between client and server to find the best channel for the client and server to communicate on. If websockets are available, then socket.io will likely use them, but if web sockets are not available, socket.io has alternate methods that will work (even in older browsers). That functionality comes for free in socket.io without you even doing anything.
In case this isn't completely clear to you, websockets are typically used to provide real-time communication between client and server. While clients can ask for data from a server at any time with an ajax call or a web page request, what websockets allow is a two way real-time communication between client and server and the biggest advantage of websockets is that a server can send a client real-time data at any time while they are connected.
For example, I have a web page that receives real-time data from my server anytime the web page is open. The web page is served over the typical node.js web server installation, but the real-time data is sent from server to client over a websocket connection.
In addition, if there's a chatty conversation happening between client and server, websockets can be much more efficient than a series of ajax calls because with a websocket, a connection is opened once and used repeatedly whereas with ajax, each successive ajax call is like a new connection.
Node.js is a runtime environment. It's a javascript engine with a standard library built around asynchronous I/O. It plays the same role that Java, Python, Ruby, .NET, etc., play for many other web applications.
I've been told it's a huge framework that you may not use at least half of.
It might be true that most people never use most of the standard library, but I wouldn't think it's more true of Node.js than other runtimes. "Framework" isn't an accurate word to describe it.
I've been told that to maximize efficiency, you're better off using Socket.IO to make your own functionalities.
Whoever told you that was mistaken, or meant that to maximize efficiency, you're better off using [Node.js and] Socket.IO [instead of other solutions]. Many other non-Node.js solutions require a single thread or process per connection, which limits the number of simultaneous connections a server can handle. Node.js is built around asynchronous I/O which is better for keeping many connections open at once, and Socket.IO is a library for Node.js for using WebSockets.
TL;DR: Socket.IO can fire events in realtime between your client and server, so there is no need for you to reload the page to notice something changing. This can be used for "live" applications like collaborative drawing, live chats, online games and more!

WebRTC Data Channel server to clients UDP communication. Is it currently possible?

Is it possible to use WebRTC Data Channels on Node.js in a way that mimics the functionality of WebSockets except using UDP?
In essence I want to have a server running Node.js with which browser clients can establish a full duplex bi directional UDP connection via JavaScript.
My question is the same as this one from 8 months ago. I repost it because the only answer was :
Yes, in theory you should be able to to do this. However, you'll need a node module that supports WebRTC data channels, so that you can connect to it like any other peer. Unfortunately, scanning through the current modules, I don't see one that implements the data channel.
Any of you know of such a module ? In my search I found some node modules with the words "webrtc" and "datachannel", but they didn't look like what was needed, they looked like they were meant for specific needs.
This project is very active, and seem to undertake the mission of importing the entire WebRTC stack into node.js
There's also this project but it looks pretty inactive.
Would love to know if that was satisfying and if you're doing such a project (as in the question) please link to github :)
We have implemented the exact same thing: a server/client way of using WebRTC. Besides we also implemented data port multiplexing, so that server would only need to expose one data port for all rtcdata channels.
A quick summary of how it is achieved:
We implemented in nodejs, using wrtc library. But the same principal could be applied to other implementations.
The server exposes a control port, so that the client will exchange SDPs with the server for establishing their data channel.
To support data port multiplexing, At the server, we modify both peer's SDK, so that
Client will always connect to the same server ip:data_port
We implement a UDP data proxy inside the server, so that it can be the bridge between the server webrtc engine and the client.
The code is at: https://github.com/noia-network/webrtc-direct

Socket.IO Server-Server Communication

We are using Socket.IO to communicate real-time statistics to connected browsers; however due to the architecture of a system we are building we want to allow both browsers and other nodejs servers to subscribe via Socket.IO for statistics. Would it be possible for me to create something like a custom transport for communicating via TCP to another Socket.IO server that had subscribed?
We want to continue to use Socket.IO's built in support for channels and subscriptions, but provide server-server via node.
Thanks for any suggestions!
I also posted on Socket.IO's GitHub Issues Page and got an answer there. Looks like I will be using Hook.IO to do what I need.
Thanks!

Categories

Resources