mirror of
https://github.com/amark/gun.git
synced 2025-11-24 06:25:58 +00:00
115 lines
3.8 KiB
HTML
115 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Iris Chat</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
|
<link rel="stylesheet" type="text/css" href="./style.css">
|
|
<link rel="shortcut icon" href="./favicon.ico">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="chat">
|
|
<section class="sidebar">
|
|
<div class="user-info"></div>
|
|
<div class="chat-list">
|
|
<div class="chat-item new">
|
|
New chat
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="main">
|
|
<div class="online-user-list"></div>
|
|
<div class="message-list">Select or create chat to start messaging</div>
|
|
<div class="message-form">
|
|
<form autocomplete="off">
|
|
<input id="new-msg" type="text" placeholder="Type a message">
|
|
<button>send</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="/jquery.js"></script>
|
|
<script src="/gun.js"></script>
|
|
<script src="/gun/sea.js"></script>
|
|
<script src="/gun/nts.js"></script>
|
|
<script src="./irisLib.js"></script>
|
|
<script>
|
|
var gun = Gun([location.origin + '/gun', 'https://gun-us.herokuapp.com/gun']);
|
|
var chat = gun.get('converse/' + location.hash.slice(1));
|
|
var chats = {};
|
|
|
|
var keyPromise = new Promise(resolve => {
|
|
var pair = localStorage.getItem('chatKeyPair');
|
|
if (pair) {
|
|
resolve(JSON.parse(pair));
|
|
} else {
|
|
Gun.SEA.pair(pair => {
|
|
localStorage.setItem('chatKeyPair', JSON.stringify(pair));
|
|
resolve(pair);
|
|
})
|
|
}
|
|
});
|
|
var key, myIdenticon;
|
|
keyPromise.then(k => {
|
|
key = k;
|
|
gun.user().auth(key);
|
|
myIdenticon = $(new irisLib.Attribute({type:'keyID', value: key.pub}).identicon({width:40}));
|
|
$(".user-info").append(myIdenticon);
|
|
irisLib.Chat.getChats(gun, key, chatReceived);
|
|
irisLib.Chat.setOnline(gun, true);
|
|
});
|
|
|
|
function chatReceived(pub) {
|
|
if (!pub || Object.prototype.hasOwnProperty.call(chats, pub)) {
|
|
return;
|
|
}
|
|
var el = $('<div class="chat-item"><span class="latest"></span></div>');
|
|
chats[pub] = new irisLib.Chat({gun, key, participants: pub, onMessage: (msg, info) => {
|
|
chats[pub].messages = chats[pub].messages || [];
|
|
msg.selfAuthored = info.selfAuthored;
|
|
chats[pub].messages[msg.time] = msg;
|
|
msg.time = new Date(msg.time);
|
|
if (!chats[pub].latest || msg.time > chats[pub].latest.time) {
|
|
chats[pub].latest = msg;
|
|
var text = msg.text.length > 30 ? msg.text.slice(0,30) + '...' : msg.text;
|
|
el.find('.latest').text(text);
|
|
}
|
|
}});
|
|
chats[pub].identicon = $(new irisLib.Attribute({type: 'keyID', value: pub}).identicon({width:40}));
|
|
el.prepend(chats[pub].identicon);
|
|
el.click(() => {
|
|
$(".message-form form").submit(event => {
|
|
event.preventDefault();
|
|
chats[pub].send($('#new-msg').val());
|
|
console.log($('#new-msg').val());
|
|
$('#new-msg').val('');
|
|
});
|
|
$(".online-user-list").empty();
|
|
$(".online-user-list").append(chats[pub].identicon.clone());
|
|
$(".message-list").empty();
|
|
var msgs = Object.values(chats[pub].messages);
|
|
msgs.forEach(msg => {
|
|
var name = msg.selfAuthored ? 'you: ' : 'them: ';
|
|
var el = $(
|
|
'<div class="msg"><div class="text">' + msg.text + '</div><div class="time">' +
|
|
formatDate(msg.time) + '</div></div>'
|
|
);
|
|
el.toggleClass('our', msg.selfAuthored ? true : false);
|
|
$(".message-list").append(el); // TODO: jquery insertAfter element with smaller timestamp
|
|
});
|
|
});
|
|
$(".chat-list").append(el);
|
|
}
|
|
|
|
function formatDate(date) {
|
|
var s = date.toISOString().split('T');
|
|
return s[0] + ' ' + s[1].slice(0,5);
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|