2014-07-31 12:07:14 -07:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<title>Socket.IO chat</title>
|
|
|
|
|
<style>
|
|
|
|
|
* {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
body {
|
|
|
|
|
font: 13px Helvetica, Arial;
|
|
|
|
|
}
|
|
|
|
|
form {
|
|
|
|
|
background: #000;
|
|
|
|
|
padding: 3px;
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
form input {
|
|
|
|
|
border: 0;
|
|
|
|
|
padding: 10px;
|
2014-08-01 09:26:17 -07:00
|
|
|
width: 40%;
|
2014-07-31 12:07:14 -07:00
|
|
|
margin-right: .5%;
|
|
|
|
|
}
|
|
|
|
|
form button {
|
|
|
|
|
width: 9%;
|
|
|
|
|
background: rgb(130, 224, 255);
|
|
|
|
|
border: none;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
#messages {
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
#messages li {
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
}
|
|
|
|
|
#messages li:nth-child(odd) {
|
|
|
|
|
background: #eee;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2014-08-01 15:00:52 -07:00
|
|
|
<h3 id="pubkey">Generating public key...</h3>
|
2014-07-31 12:07:14 -07:00
|
|
|
<ul id="messages"></ul>
|
|
|
|
|
<form action="">
|
2014-08-01 15:00:52 -07:00
|
|
|
<input id="other" placeholder="other user's key" autocomplete="off" />
|
2014-08-01 09:26:17 -07:00
|
|
|
<input id="m" placeholder="Text message..." autocomplete="off" />
|
2014-07-31 12:07:14 -07:00
|
|
|
<button>Send</button>
|
|
|
|
|
</form>
|
|
|
|
|
<script src="http://localhost:3001/socket.io/socket.io.js"></script>
|
|
|
|
|
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
|
2014-08-01 15:00:52 -07:00
|
|
|
<script src="./bitcore.js"></script>
|
2014-07-31 12:07:14 -07:00
|
|
|
<script>
|
2014-08-01 09:26:17 -07:00
|
|
|
$(document).ready(function()
|
2014-07-31 12:07:14 -07:00
|
|
|
{
|
2014-08-01 09:26:17 -07:00
|
|
|
// load dependencies
|
|
|
|
|
var socket = io('http://localhost:3001');
|
|
|
|
|
var bitcore = require('bitcore');
|
|
|
|
|
var util = bitcore.util;
|
|
|
|
|
var Key = bitcore.Key;
|
2014-08-01 15:00:52 -07:00
|
|
|
var AuthMessage = bitcore.AuthMessage;
|
|
|
|
|
var Buffer = bitcore.Buffer;
|
2014-08-01 09:26:17 -07:00
|
|
|
|
|
|
|
|
// show message
|
|
|
|
|
var show = function(msg) {
|
|
|
|
|
$('#messages').append($('<li>').text(msg.from+':' + JSON.stringify(msg.payload)));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// generate new identity
|
|
|
|
|
var pk = Key.generateSync();
|
2014-08-01 15:00:52 -07:00
|
|
|
var pubkey = pk.public.toString('hex');
|
|
|
|
|
$('#pubkey').text('Your key: '+pubkey);
|
2014-08-01 09:26:17 -07:00
|
|
|
|
|
|
|
|
// send chat handler
|
|
|
|
|
$('form').submit(function()
|
2014-07-31 12:07:14 -07:00
|
|
|
{
|
2014-08-01 15:00:52 -07:00
|
|
|
var text = $('#m').val()
|
|
|
|
|
if (text.length === 0) {
|
2014-08-01 09:26:17 -07:00
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-01 15:00:52 -07:00
|
|
|
var otherPubkey = $('#other').val();
|
|
|
|
|
var data = AuthMessage.encode(otherPubkey, pk, new Buffer(text));
|
|
|
|
|
data.to = otherPubkey;
|
2014-08-01 09:26:17 -07:00
|
|
|
socket.emit('message', data);
|
|
|
|
|
data.from = 'You';
|
|
|
|
|
show(data);
|
|
|
|
|
|
|
|
|
|
$('#m').val('');
|
|
|
|
|
return false;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// receive chat handler
|
2014-08-01 15:00:52 -07:00
|
|
|
socket.emit('subscribe', pubkey);
|
2014-08-01 09:26:17 -07:00
|
|
|
socket.on('message', function(msg)
|
|
|
|
|
{
|
|
|
|
|
show(msg);
|
2014-07-31 12:07:14 -07:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
