webConnect.js
📶 Browser to browser connection without server
webConnect.js over a browser to browser connection for static client side HTML, which is usually impossible. Previously, the solution available was using webRTC transport, which still required to setup a signaling server as a middleman. This library works by leveraging already established P2P networks, such as IPFS Network or Torrent Network for signaling. Now static web pages can talk to each other, even hosts on static hosting such as github pages, cloudflare pages, gitlab pages, or netlify.
Demo : https://nuzulul.github.io/webConnect.js/
Features
- ✅ Bypass NAT
- ✅ Bypass VPN
Installation
NPM
npm install webconnect
//Common JS
const webconnect = require('webconnect')
//ES Module
import webconnect from 'webconnect'
CDN
<script src="https://cdn.jsdelivr.net/npm/webconnect@0.0.3/dist/umd/webconnect.js"></script>
<script type="module">import webconnect from 'https://cdn.jsdelivr.net/npm/webconnect@0.0.3/dist/esm/webconnect.js'</script>
Get Started
Initialization
const connect = await webconnect({})
Listen
Listen on new connect
connect.onConnect((attribute) => console.log(`${attribute.connectId} connected`))
Listen on disconnect event
connect.onDisconnect((attribute) => console.log(`${attribute.connectId} disconnected`))
Listen on receiving data
connect.onReceive((data,attribute) => console.log(`${data} from ${attribute.connectId}`))
Listen on sending progress
connect.onSendProgress((attribute) => console.log(`Sending progress : ${attribute.percent} from ${attribute.connectId}`))
Listen on receiving progress
connect.onReceiveProgress((attribute) => console.log(`Receiving progress : ${attribute.percent} from ${attribute.connectId}`))
Listen on incoming streaming
connect.onStreaming((stream,attribute) => Elements[attribute.connectId].video.srcObject = stream )
Action
Get My Connection Id
connect.getMyId((attribute) => console.log(`${attribute.connectId}`))
Send Data
const attribute = {connectId}
connect.Send(data,attribute)
Send Binary
const attribute = {connectId,metadata:{name: 'Report', type: 'application/pdf'}}
connect.Send(buffer,attribute)
Open Streaming
const attribute = {connectId,metadata:{name:'Meeting'}}
connect.openStreaming(stream,attribute)
Close Streaming
const attribute = {connectId}
connect.closeStreaming(stream,attribute)
Ping Connection
const attribute = {connectId}
console.log(`${await connect.Ping(attribute)} ms`)
Disconnect
connect.Disconnect()
Get All Connection Id
connect.getConnection((attribute) => console.log(`${attribute.connection}`))
Example
<script type="module">
import webconnect from 'https://cdn.jsdelivr.net/npm/webconnect@0.0.3/dist/esm/webconnect.js'
const connect = webconnect({})
connect.onConnect(async(attribute)=>{
console.log("Connect",attribute)
connect.Send("hello",{connectId:attribute.connectId})
console.log(await connect.Ping({connectId:attribute.connectId}))
connect.getConnection((attribute)=>{
console.log("Connection",attribute)
})
})
connect.onDisconnect((attribute)=>{
console.log("Disconnect",attribute)
})
connect.onReceive((data,attribute) =>{
console.log(data,attribute)
})
</script>
API
Connect to a channel
webconnect({appName,channelName,connectPassword,iceConfiguration})
options :
- appName - (String) Your app identity
- channelName - (String) Channel to connect
- connectPassword - (String) Password to encrypt connection initialization
- iceConfiguration - (Object) Custom iceConfiguration
Listen to every new connection
onConnect((attribute)=>{})
-
attribute = {connectId}
-connectId
is origin connection identity
Listen to every disconnection
onDisconnect((attribute)=>{})
-
attribute = {connectId}
-connectId
is origin connection identity
Send data to connection
Send(data,attribute)
data = String or Object
-
attribute = {connectId}
-connectId
is target connection can singleconnectId
, multiple with array[connectId,connectId,...]
ornull
to target all connection in the channel
Send binary data to connection
Send(ArrayBuffer,attribute)
ArrayBuffer = Binary data
-
attribute = {connectId,metadata}
-connectId
is target connection can singleconnectId
, multiple with array[connectId,connectId,...]
ornull
to target all connection in channel -metadata
is optional metadata object like filename or filetype
Listen to sending progress for binary data
onSendProgress((attribute) => {})
-
attribute = {percent,connectId}
-percent
indicating the percentage between 0 and 1,connectId
is target connection
Listen to receiving data
onReceive((data,attribute) => {})
data = String or Object or ArrayBuffer
-
attribute = {connectId,metadata}
-connectId
is origin connection identity -metadata
is object description about the ArrayBuffer
Listen to receiving progress for binary data
onReceiveProgress((attribute) => {})
-
attribute = {percent,connectId}
-percent
indicating the percentage between 0 and 1,connectId
is origin connection identity
Open streaming connection
openStreaming(stream,attribute)
-
stream = MediaStream
- AMediaStream
with audio and/or video -
attribute = {connectId, metadata}
-connectId
is target connection -metadata
is optional object stream description
Listen to incoming streaming connection
onStreaming((stream,attribute) => {})
-
stream = MediaStream
- AMediaStream
with audio and/or video -
attribute = {connectId,metadata}
-connectId
is origin connection identity -metadata
is optional stream description
Close streaming connection
closeStreaming(stream,attribute)
-
stream = MediaStream
- A previously opened MediaStream -
attribute = {connectId}
-connectId
is target connection
Get self connection identity
getMyId((attribute) => {})
-
attribute = {connectId}
-connectId
is self connection identity
Get all connection identity in the channel
getConnection((attribute) => {})
-
attribute = {connection}
-connection
is Array of all connection identity exclude self connection identity
Get latency of connection which return a promise that resolve to milliseconds
Ping(attribute)
-
attribute = {connectId}
-connectId
is target connection
Disconnect from channel
Disconnect()