File: /home/nepi/public_html/old/simple/index.html
<html>
<body>
<style>
#outgoing {
width: 600px;
word-wrap: break-word;
white-space: normal;
}
</style>
<input id="room" style="width: 220px;" placeholder="Enter room name" />
<button id="newBtn">New</button>
<button id="openBtn">Open</button>
<pre id="outgoing"></pre>
<div id="chatBox" style="display: none;">
<input id="chat" placeholder="Type here" />
<button id="send">Send</button>
<div id="chatTexts"></div>
</div>
<script src="simplepeer.min.js"></script>
<script>
document.getElementById("newBtn").addEventListener("click", initRoom);
document.getElementById("openBtn").addEventListener("click", initRoom);
document.getElementById("send").addEventListener("click", sendText);
var p;
const $room = document.querySelector('#room');
const $newBtn = document.querySelector('#newBtn');
const $openBtn = document.querySelector('#openBtn');
const $chatBox = document.querySelector('#chatBox');
const $chat = document.querySelector('#chat');
const $chatTexts = document.querySelector('#chatTexts');
const $log = {
textContent: function (d) {
console.log(d);
document.querySelector('#outgoing').textContent = d;
}
}
function initRoom(e) {
console.log(e.target, e.target.id);
const _id = e.target.id;
if ($room.value.trim() == "") {
$log.textContent("Please type the room");
return false;
}
p = new SimplePeer({
initiator: (_id == "newBtn") ? true : false,
trickle: false
});
console.log(p)
disabled(true);
(p.initiator) ? $log.textContent("creating room...") : $log.textContent("Joining room...");
if (!p.initiator) {
postAjax('signal.php', { room: $room.value, action: "open" }, function (data) {
data = JSON.parse(data);
if (data.status == "1") {
$log.textContent("Stablishing Connections...");
var _jj = JSON.parse(data.data.replace(/"/g, '"'));
p.signal(_jj);
} else {
console.error(data);
}
});
}
p.on('signal', data => {
console.log('SIGNAL', data, typeof data);
// $log.textContent(JSON.stringify(data));
// var _data = document.querySelector('#outgoing').textContent;
// console.log(_data, typeof _data);
if (p.initiator) {
postAjax('signal.php', { room: $room.value, data: JSON.stringify(data), action: "new" }, function (d) {
d = JSON.parse(d);
if (d.status == "1") {
$log.textContent("Room Created, waiting for partner");
waitingForPartner($room.value, d);
} else {
$log.textContent("Room Exist, please try again");
disabled(false);
console.error("create room error", d.data, d);
}
});
} else {
console.log("from partner");
postAjax('signal.php', { room: $room.value, data: JSON.stringify(data), action: "updateOpen" }, function (d) {
d = JSON.parse(d);
if (d.status == "1") {
$log.textContent("Waiting Partner...");
} else {
console.error(d);
}
});
}
//document.querySelector('#outgoing').textContent = JSON.stringify(data)
})
p.on('error', err => {
console.log('error', err);
$log.textContent("Error :|, Try from start");
disabled(false);
showChat(false);
})
p.on('connect', () => {
$log.textContent("Connect :)");
// p.send('whatever' + Math.random())
showChat(true);
})
p.on('data', data => {
$chatTexts.innerHTML = $chatTexts.innerHTML + "<p class='friend'>" + "friend: " + data + "</p>";
console.log('data: ' + data)
})
}
function postAjax(url, data, success) {
var params = typeof data == 'string' ? data : Object.keys(data).map(
function (k) { return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }
).join('&');
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.open('POST', url);
xhr.onreadystatechange = function () {
if (xhr.readyState > 3 && xhr.status == 200) { success(xhr.responseText); }
};
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(params);
return xhr;
}
function waitingForPartner(_r, _d) {
console.log("waiting");
postAjax('signal.php', { room: _r, action: "wait" }, function (d) {
d = JSON.parse(d);
if (d.status == "1") {
$log.textContent("Stablishing Connections to partner...");
var _jj = JSON.parse(d.data.replace(/"/g, '"'));
p.signal(_jj);
} else {
setTimeout(function () {
waitingForPartner(_r, _d);
}, 10000);
}
});
}
function disabled(yep) {
if (yep) {
$room.setAttribute("disabled", true);
$newBtn.setAttribute("disabled", true);
$openBtn.setAttribute("disabled", true);
} else {
$room.removeAttribute("disabled");
$newBtn.removeAttribute("disabled");
$openBtn.removeAttribute("disabled");
}
}
function showChat(yep) {
if (yep) {
$chatBox.style.display = "block";
} else {
$chatBox.style.display = "none";
}
}
function sendText() {
var _v = $chat.value;
if (_v.trim == "") return;
p.send(_v);
$chatTexts.innerHTML = $chatTexts.innerHTML + "<p class='you'>" + "you: " + _v + "</p>";
$chat.value = "";
}
</script>
</body>
</html>