ntchat/index.html at master · kkimdev/ntchat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!doctype html>
<html lang='en' style='height:100%'>
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
    <title>Never Trust Chat</title>
</head>
<body style='display:flex; flex-direction:column; height:100%; margin:0'>
    <div><h1>Never Trust Chat</h1></div>
    <textarea id='output' style='flex-grow:1; resize:none' readonly></textarea>
    <input id='input' type='text'></textarea>
    <script>
        function print(str) {
            const output = document.getElementById('output');
            output.append(str + '\r\n');
            output.scrollTop = output.scrollHeight;
        }

        async function runHost(connection) {
            print('Initializing...');
            const dataChannel = connection.createDataChannel(null);
            dataChannel.onopen = event => onConnectionEstablished(dataChannel);
            connection.setLocalDescription(await connection.createOffer());
            connection.oniceconnectionstatechange = () => print('Connection status: ' + connection.iceConnectionState);
            connection.onicegatheringstatechange = () => {
                if (connection.iceGatheringState !== 'complete') return;
                print('To make a connection:')
                print('1. Send the following URL to the other person.')
                print('2. Type the result in the bottom text field.');
                print('');
                print(window.location.href + '#' + encodeURIComponent(JSON.stringify(connection.localDescription)));
            };

            const input = document.getElementById('input');
            input.onkeypress = event => {
                if (event.key !== 'Enter') return;
                connection.setRemoteDescription(JSON.parse(input.value));
                input.value = '';
                input.onkeypress = undefined;
            }
        }

        async function runGuest(connection, offerString) {
            const offer = JSON.parse(decodeURIComponent(offerString));
            connection.setRemoteDescription(new RTCSessionDescription(offer));
            connection.setLocalDescription(await connection.createAnswer());
            connection.oniceconnectionstatechange = () => print('Connection status: ' + connection.iceConnectionState);
            connection.onicegatheringstatechange = () => {
                if (connection.iceGatheringState !== 'complete') return;
                print('To make a connection, send the following string to the other person.');
                print('');
                print(JSON.stringify(connection.localDescription));
            };
            connection.ondatachannel = event => {
                event.channel.onopen = onConnectionEstablished(event.channel);
            };
        }

        function onConnectionEstablished(dataChannel) {
            dataChannel.onmessage = event => print('Received : ' + event.data);
            const input = document.getElementById('input');
            input.onkeypress = event => {
                if (event.key !== 'Enter') return;
                dataChannel.send(input.value);
                print('Sent: ' + input.value);
                input.value = '';
            }
        }

        window.onhashchange = () => location.reload();
        window.onerror = (message, source, lineno, colno, error) => {
            print(error.stack);
            print('Session aborted. Refresh to start a new session.')
            input.onkeypress = undefined;
        };

        const connection = new RTCPeerConnection({ 'iceServers': [{ 'urls': ['stun:stun.l.google.com:19302'] }] });

        if (window.location.hash)
            runGuest(connection, window.location.hash.substring(1));
        else
            runHost(connection);
    </script>
</body>
</html>