javascript - WebRTC Between two pages in the same machine -


i'm trying implement mechanism send textual data (json instance) in page page, using javascript @ same machine.
found code , wrapped works @ same page.
@ moment don't want use wwebrtc framework, adapter.js.

//must include adapter.js before  var webrtcmanager = (function () {      'use strict';      //ctor     function webrtcmanagerfn() {        console.log('webrtcmanagerfn ctor reached');        this._events = {};        this._localconnection = null       this._remoteconnection = null;       this._sendchannel = null;       this._receivechannel = null;     }      webrtcmanagerfn.prototype.addeventlistener = function (name, handler)        {       if (this._events.hasownproperty(name))           this._events[name].push(handler);       else           this._events[name] = [handler];     };      webrtcmanagerfn.prototype._fireevent = function (name, event) {        if (!this._events.hasownproperty(name))           return;         if (!event)           event = {};         var listeners = this._events[name], l = listeners.length;        (var = 0; < l; i++) {           listeners[i].call(null, event);        }     };  webrtcmanagerfn.prototype.createconnection = function () {     var servers = null;     var pcconstraint = null;     var dataconstraint = null;      console.log('using sctp based data channels');      // sctp supported chrome 31 , supported in ff.     // no need pass dtls constraint on default in chrome 31.     // sctp, reliable , ordered true default.     // add localconnection global scope make visible     // browser console.     window.localconnection = this._localconnection =         new rtcpeerconnection(servers, pcconstraint);     console.log('created local peer connection object localconnection');      this._sendchannel = this._localconnection.createdatachannel('senddatachannel',             dataconstraint);     console.log('created send data channel');     this._localconnection.onicecandidate = this._localicecallback.bind(this);     this._sendchannel.onopen = this._onsendchannelstatechange.bind(this);     this._sendchannel.onclose = this._onsendchannelstatechange.bind(this);      // add remoteconnection global scope make visible     // browser console.     window.remoteconnection = this._remoteconnection =         new rtcpeerconnection(servers, pcconstraint);     console.log('created remote peer connection object remoteconnection');     this._remoteconnection.onicecandidate = this._remoteicecallback.bind(this);     this._remoteconnection.ondatachannel = this._receivechannelcallback.bind(this);      this._localconnection.createoffer(this._gotofferfromlocalconnection.bind(this), this._oncreatesessiondescriptionerror.bind(this)); }  webrtcmanagerfn.prototype._oncreatesessiondescriptionerror = function (error) {     console.log('failed create session description: ' + error.tostring()); }  webrtcmanagerfn.prototype.sendmessage = function (msgtext) {     var msg = new message(msgtext);      // send msg object json-formatted string.     var data = json.stringify(msg);     this._sendchannel.send(data);      console.log('sent data: ' + data); }  webrtcmanagerfn.prototype.closedatachannels = function () {     console.log('closing data channels');     this._sendchannel.close();     console.log('closed data channel label: ' + this._sendchannel.label);     this._receivechannel.close();     console.log('closed data channel label: ' + this._receivechannel.label);     this._localconnection.close();     this._remoteconnection.close();     this._localconnection = null;     this._remoteconnection = null;     console.log('closed peer connections'); }  webrtcmanagerfn.prototype._gotofferfromlocalconnection = function (desc) {     console.log('reached _gotofferfromlocalconnection');     if (this && this._localconnection != 'undefined' && this._remoteconnection != 'undefined') {         this._localconnection.setlocaldescription(desc);         console.log('offer localconnection \n' + desc.sdp);         this._remoteconnection.setremotedescription(desc);         this._remoteconnection.createanswer(this._gotanswerfromremoteconnection.bind(this),             this._oncreatesessiondescriptionerror.bind(this));     } }  webrtcmanagerfn.prototype._gotanswerfromremoteconnection = function (desc) {     console.log('reached _gotanswerfromremoteconnection');     if (this && this._localconnection != 'undefined' && this._remoteconnection != 'undefined') {         this._remoteconnection.setlocaldescription(desc);         console.log('answer remoteconnection \n' + desc.sdp);         this._localconnection.setremotedescription(desc);     } }  webrtcmanagerfn.prototype._localicecallback = function (event) {     console.log('local ice callback');     if (event.candidate) {         this._remoteconnection.addicecandidate(event.candidate,             this._onaddicecandidatesuccess.bind(this), this._onaddicecandidateerror.bind(this));         console.log('local ice candidate: \n' + event.candidate.candidate);     } }  webrtcmanagerfn.prototype._remoteicecallback = function (event) {     console.log('remote ice callback');     if (event.candidate) {         this._localconnection.addicecandidate(event.candidate,             this._onaddicecandidatesuccess.bind(this), this._onaddicecandidateerror.bind(this));         console.log('remote ice candidate: \n ' + event.candidate.candidate);     } }  webrtcmanagerfn.prototype._onaddicecandidatesuccess = function (evt) {     debugger;     console.log('addicecandidate success. evt: '+ evt); }  webrtcmanagerfn.prototype._onaddicecandidateerror = function (error) {     console.log('failed add ice candidate: ' + error.tostring()); }  webrtcmanagerfn.prototype._receivechannelcallback = function (event) {     console.log('receive channel callback');     this._receivechannel = event.channel;     this._receivechannel.onmessage = this._onreceivemessagecallback.bind(this);     this._receivechannel.onopen = this._onreceivechannelstatechange.bind(this);     this._receivechannel.onclose = this._onreceivechannelstatechange.bind(this); }  webrtcmanagerfn.prototype._onreceivemessagecallback = function (event) {     console.log('received message: ' + event.data);     console.log('received message is: ' + this);      var msgobj = json.parse(event.data);      this._fireevent("messagerecieved", {         details: {             msg: msgobj         }     }); }  webrtcmanagerfn.prototype._onsendchannelstatechange = function () {     console.log('_onsendchannelstatechange');     var readystate = this._sendchannel.readystate;     console.log('send channel state is: ' + readystate); }  webrtcmanagerfn.prototype._onreceivechannelstatechange = function () {     var readystate = this._receivechannel.readystate;     console.log('receive channel state is: ' + readystate); }  return webrtcmanagerfn; })(); 

my question how pass data between 2 pages on same machine using webrtc?

this webrtc tab chat demo works across tabs or windows in same browser without server: https://jsfiddle.net/f5y48hcd/ (i gave making work in code snippet due securityerror.)

open fiddle in 2 windows , try out. reference, here's webrtc code:

var pc = new rtcpeerconnection(), dc, enterpressed = e => e.keycode == 13;  var connect = () => init(dc = pc.createdatachannel("chat")); pc.ondatachannel = e => init(dc = e.channel);  var init = dc => {   dc.onopen = e => (dc.send("hi!"), chat.select());   dc.onclose = e => log("bye!");   dc.onmessage = e => log(e.data); };  chat.onkeypress = e => {   if (!enterpressed(e)) return;   dc.send(chat.value);   log("> " + chat.value);   chat.value = ""; };  var sc = new localsocket(), send = obj => sc.send(json.stringify(obj)); var incoming = msg => msg.sdp &&   pc.setremotedescription(new rtcsessiondescription(msg.sdp))   .then(() => pc.signalingstate == "stable" || pc.createanswer()     .then(answer => pc.setlocaldescription(answer))     .then(() => send({ sdp: pc.localdescription })))   .catch(log) || msg.candidate &&   pc.addicecandidate(new rtcicecandidate(msg.candidate)).catch(log); sc.onmessage = e => incoming(json.parse(e.data));  pc.oniceconnectionstatechange = e => log(pc.iceconnectionstate); pc.onicecandidate = e => send({ candidate: e.candidate }); pc.onnegotiationneeded = e => pc.createoffer()   .then(offer => pc.setlocaldescription(offer))   .then(() => send({ sdp: pc.localdescription }))   .catch(log);  var log = msg => div.innerhtml += "<br>" + msg; 

i use demoing webrtc data channels. note secret sauce localsocket.js wrote this, looks this:

function localsocket() {   localstorage.a = localstorage.b = json.stringify([]);   this.index = 0;   this.interval = setinterval(() => {     if (!this.in) {       if (!json.parse(localstorage.a).length) return;       this.in = "a"; this.out = "b";     }     var arr = json.parse(localstorage[this.in]);     if (arr.length <= this.index) return;     if (this.onmessage) this.onmessage({ data: arr[this.index] });     this.index++;   }, 200);   settimeout(() => this.onopen && this.onopen({})); } localsocket.prototype = {   send: function(msg) {     if (!this.out) {       this.out = "a"; this.in = "b";     }     var arr = json.parse(localstorage[this.out]);     arr.push(msg);     localstorage[this.out] = json.stringify(arr);   },   close: function() {     clearinterval(this.interval);   } }; 

it uses localstorage simulate web sockets locally between 2 tabs. if want do, don't need webrtc data channels.

disclaimer: it's not robust, , relies on 2 pages being ready communicate, not production-ready means.


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -