initial rtc template, send text messages, doesn't work in firefox
This commit is contained in:
Abhinav Adduri
commit
002098f56e
|
|
@ -0,0 +1,8 @@
|
||||||
|
* To run the code, clone the git repo, cd into the folder, and run npm install. Then, run npm install -g browserify. Then, run npm start. *
|
||||||
|
|
||||||
|
Steps to start exchanging messages:
|
||||||
|
|
||||||
|
* Open two separate tabs, one with a location hash of #init. For example, if the port being used is 3000, open one tab as http://localhost:3000/#init, and one as http://localhost:3000.
|
||||||
|
* The tab with the location hash should have a button that says create channel. Click that button, and wait for an alert dialog to pop up (this might take a while).
|
||||||
|
* In the tab without the init hash, paste the generated code in the input field with the join channel placeholder text.
|
||||||
|
* Click connect in the tab without the init hash. Then, click connect in the tab with the init hash (order shouldn't actually matter). You should be able to send messages and see them in the other tab now.
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
const express = require('express')
|
||||||
|
const bodyParser = require('body-parser')
|
||||||
|
const app = express()
|
||||||
|
var redis = require("redis"),
|
||||||
|
client = redis.createClient();
|
||||||
|
|
||||||
|
client.on('error', function(err) {
|
||||||
|
console.log(err);
|
||||||
|
})
|
||||||
|
|
||||||
|
app.use(bodyParser.json());
|
||||||
|
|
||||||
|
app.use(express.static('public'))
|
||||||
|
|
||||||
|
app.use(function(req, res, next) {
|
||||||
|
res.header("Access-Control-Allow-Origin", "*");
|
||||||
|
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
|
||||||
|
next();
|
||||||
|
});
|
||||||
|
|
||||||
|
function insert(create_key) {
|
||||||
|
let id = Math.floor(Math.random()*10000).toString();
|
||||||
|
client.set(id, create_key, redis.print);
|
||||||
|
return id;
|
||||||
|
}
|
||||||
|
|
||||||
|
app.post('/local_answer/:id', function(req, res) {
|
||||||
|
let id = req.params.id;
|
||||||
|
client.set(id, JSON.stringify(req.body), redis.print);
|
||||||
|
res.send('ok');
|
||||||
|
})
|
||||||
|
|
||||||
|
app.get('/receive_offer/:id', function(req, res) {
|
||||||
|
let id = req.params.id;
|
||||||
|
client.get(id, function(err, reply) {
|
||||||
|
if (!reply) {
|
||||||
|
res.send('error');
|
||||||
|
} else {
|
||||||
|
res.send(reply);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
app.get('/receive_answer/:id', function(req, res) {
|
||||||
|
let id = req.params.id;
|
||||||
|
client.get(id, function(err, reply) {
|
||||||
|
if (!reply) {
|
||||||
|
res.send('error');
|
||||||
|
} else {
|
||||||
|
client.del(id);
|
||||||
|
res.send(reply);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
app.post('/join/:id', function(req, res) {
|
||||||
|
let id = req.params.id;
|
||||||
|
client.get(id, function(err, reply) {
|
||||||
|
if (!reply) {
|
||||||
|
res.send('error')
|
||||||
|
} else {
|
||||||
|
res.send(reply);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
app.post('/create', function(req, res) {
|
||||||
|
let id = insert(JSON.stringify(req.body));
|
||||||
|
res.send(id);
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
app.get('/', function (req, res) {
|
||||||
|
console.log('get');
|
||||||
|
res.send('Hello World!')
|
||||||
|
})
|
||||||
|
|
||||||
|
app.listen(3000, function () {
|
||||||
|
console.log('Example app listening on port 3000!')
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"name": "portal-alpha",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "",
|
||||||
|
"scripts": {
|
||||||
|
"start": "browserify public/index.js -o public/bundle.js & node app.js"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"body-parser": "^1.17.2",
|
||||||
|
"express": "^4.15.3",
|
||||||
|
"redis": "^2.7.1",
|
||||||
|
"simple-peer": "^5.11.4",
|
||||||
|
"wrtc": "0.0.62"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!--<label>Your ID:</label><br/>-->
|
||||||
|
<button id="createChannel">Create a new channel</button>
|
||||||
|
<input id="joinChannel" placeholder="Join a channel"></input>
|
||||||
|
<textarea id="yourId" style="display: none"></textarea><br/>
|
||||||
|
<!--<label>Other ID:</label><br/>-->
|
||||||
|
<textarea id="otherId" style="display: none"></textarea>
|
||||||
|
<button id="connect">connect</button><br/>
|
||||||
|
<br /> <br />
|
||||||
|
<label>Enter Message:</label><br/>
|
||||||
|
<textarea id="yourMessage"></textarea>
|
||||||
|
<button id="send">send</button>
|
||||||
|
<pre id="messages"></pre>
|
||||||
|
|
||||||
|
<script src="bundle.js" charset="utf-8"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
const Peer = require('simple-peer');
|
||||||
|
|
||||||
|
var peer;
|
||||||
|
var id = 0;
|
||||||
|
|
||||||
|
if (location.hash === "#init") {
|
||||||
|
document.getElementById('joinChannel').style = "display: none";
|
||||||
|
document.getElementById('createChannel').addEventListener('click', function() {
|
||||||
|
peer = new Peer({
|
||||||
|
initiator: location.hash === "#init",
|
||||||
|
trickle: false
|
||||||
|
});
|
||||||
|
|
||||||
|
do_connection();
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
document.getElementById('createChannel').style = "display: none";
|
||||||
|
peer = new Peer({
|
||||||
|
initiator: location.hash === "#init",
|
||||||
|
trickle: false
|
||||||
|
});
|
||||||
|
|
||||||
|
do_connection();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function do_connection() {
|
||||||
|
|
||||||
|
peer.on('signal', function(data) {
|
||||||
|
if (peer.initiator) {
|
||||||
|
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
|
||||||
|
xmlhttp.open("POST", "http://127.0.0.1:3000/create");
|
||||||
|
xmlhttp.setRequestHeader("Content-Type", "application/json");
|
||||||
|
xmlhttp.send(JSON.stringify(data));
|
||||||
|
xmlhttp.onreadystatechange = function() {
|
||||||
|
if (xmlhttp.readyState === 4) {
|
||||||
|
id = xmlhttp.responseText;
|
||||||
|
alert('Share this key with a friend: ' + id);
|
||||||
|
document.getElementById('yourId').value = JSON.stringify(data);
|
||||||
|
// alert('Send this id to someone else to join your room: ' + xmlhttp.responseText); //Outputs a DOMString by default
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
document.getElementById('yourId').value = JSON.stringify(data);
|
||||||
|
|
||||||
|
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
|
||||||
|
xmlhttp.open("POST", "http://127.0.0.1:3000/local_answer/" + id + "_answer");
|
||||||
|
xmlhttp.setRequestHeader("Content-Type", "application/json");
|
||||||
|
xmlhttp.send(JSON.stringify(data));
|
||||||
|
xmlhttp.onreadystatechange = function() {
|
||||||
|
if (xmlhttp.readyState === 4) {
|
||||||
|
// id = xmlhttp.responseText;
|
||||||
|
// document.getElementById('yourId').value = xmlhttp.responseText;
|
||||||
|
// alert('Send this id to someone else to join your room: ' + xmlhttp.responseText); //Outputs a DOMString by default
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('connect').addEventListener('click', function() {
|
||||||
|
if (!peer.initiator) {
|
||||||
|
let otherId = document.getElementById('joinChannel').value;
|
||||||
|
id = otherId;
|
||||||
|
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
|
||||||
|
xmlhttp.open("GET", "http://127.0.0.1:3000/receive_offer/"+otherId);
|
||||||
|
xmlhttp.send();
|
||||||
|
xmlhttp.onreadystatechange = function() {
|
||||||
|
if (xmlhttp.readyState === 4) {
|
||||||
|
document.getElementById('otherId').value = xmlhttp.responseText;
|
||||||
|
peer.signal(xmlhttp.responseText);
|
||||||
|
// alert('Send this id to someone else to join your room: ' + xmlhttp.responseText); //Outputs a DOMString by default
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
poll_on_server();
|
||||||
|
// let otherId = JSON.parse(document.getElementById('otherId').value);
|
||||||
|
// peer.signal(otherId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function poll_on_server() {
|
||||||
|
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
|
||||||
|
xmlhttp.open("GET", "http://127.0.0.1:3000/receive_answer/" + id + "_answer");
|
||||||
|
xmlhttp.send();
|
||||||
|
xmlhttp.onreadystatechange = function() {
|
||||||
|
if (xmlhttp.readyState === 4) {
|
||||||
|
// var offerDesc = new RTCSessionDescription(JSON.parse(xmlhttp.responseText))
|
||||||
|
if (xmlhttp.responseText === document.getElementById('yourId').value) {
|
||||||
|
setTimeout(poll_on_server, 5000);
|
||||||
|
} else {
|
||||||
|
document.getElementById('otherId').value = xmlhttp.responseText;
|
||||||
|
let otherId = JSON.parse(document.getElementById('otherId').value);
|
||||||
|
peer.signal(otherId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// id = otherId;
|
||||||
|
// var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
|
||||||
|
// xmlhttp.open("GET", "http://127.0.0.1:3000/receive_offer/"+id);
|
||||||
|
// xmlhttp.send();
|
||||||
|
// xmlhttp.onreadystatechange = function() {
|
||||||
|
// if (xmlhttp.readyState === 4) {
|
||||||
|
// id = xmlhttp.responseText;
|
||||||
|
// document.getElementById('otherId').value = xmlhttp.responseText;
|
||||||
|
|
||||||
|
// peer.signal(JSON.parse(xmlhttp.responseText));
|
||||||
|
// // alert('Send this id to someone else to join your room: ' + xmlhttp.responseText); //Outputs a DOMString by default
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('send').addEventListener('click', function() {
|
||||||
|
let yourMessage = document.getElementById('yourMessage').value;
|
||||||
|
peer.send(yourMessage);
|
||||||
|
});
|
||||||
|
|
||||||
|
peer.on('data', function(data) {
|
||||||
|
document.getElementById('messages').textContent += data + '\n';
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue