mark22k
/
a-simple-chat
mirror of https://codeberg.org/mark22k/a-simple-chat


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        
        <title>A simple chat</title>
        
        <base href="" target="_top" id="base">
        <script>base.href = document.location.href.replace("/media", "").replace("index.html", "").replace(/[&?]wrapper=False/, "").replace(/[&?]wrapper_nonce=[A-Za-z0-9]+/, "")</script>
        
        <style>
            * {
                color: white;
            }
            .nick {
                font-weight: bold;
            }
            #history {
                list-style-type: none;
                margin: 0;
                padding: 0;
                color: #ccffcc;
            }
            #chat {
                overflow: scroll;
                overflow-x: hidden;
                overflow-y: scroll;
                height: 400px;
            }
            input {
                background-color: #4d0026;
                border: 2px solid black;
            }
            input[input="text"] {
                outline: 2px solid white;
                font-size: 1.1em;
            }
            button {
                background-color: #330011;
                border: 1px solid white;
                outline: 2px solid black;
                padding: 5px;
            }
            .note {
                max-width: 500px;
            }
        </style>
    </head>
    <body>
        <div id="chat">
            <ul id="history">
            </ul>
        </div>
        <button onclick="login()">Login</button>
        <input type="text" id="msgInput" value="" autocomplete="off">
        <button onclick="requireLogin(sendMessage)" id="sendButton">Send</button>
        <button onclick="requireLogin(sendMsgPong)" id="sendPong">Send pong</button>
        <button onclick="clearMessages()">Clear</button>
        <br><br>
        
        <input type="checkbox" id="notifyWhenSend" checked>
        <label for="notifyWhenSend">Notification when message is sent</label>
        <br>
        
        <input type="checkbox" id="notifyWhenReceive">
        <label for="notifyWhenReceive">Notification when message is received</label>
        <br>
        

        <input type="checkbox" id="autoping" checked>
        <label for="autoping">Automatically reply to a ping message with a pong</label>
        <br>
        
        <input type="checkbox" id="showping" checked>
        <label for="showping">Show ping/pong messages (also own)</label>
        <br><br>
        
        <p><button onclick="updateNumPeers()">Update</button> Peers: <span id="numPeers"></span></p>
        <button onclick="testConnection()">Test connection to UiServer</button>
        <br><br>
        
        <div class="note">
            Note: This zite requires the PeerMessage plugin in order to be able
            to send and receive chat messages. If you get the error message
            "Unknown command: peerBroadcast" it may mean that you have not
            installed the PeerMessage plugin.
            You can download it from <a href="/1CeEXxqemr5CcVQAAmrW13QYwZV4kAkQz6" target="_blank">here</a>.
        </div>
        <br>
        
        <div class="note">
            Tip: To see how many there are in the room, you can simply write ping.
            Anyone who has a tick on "Automatically reply to a ping message with a pong" will reply with a pong.
        </div>
        
        <script src="js/ZeroFrame.js"></script>
        <script>
            zeroFrame = new ZeroFrame();

            var identity_provider = ["zeroid.bit", "cryptoid.bit", "kaffie.bit", "zv.anonymous", "0ch.anonymous", "millchan"];
            var input = document.getElementById("msgInput");
            var popupIntervall = 3000;

            initPage();

            function initPage() {
                zeroFrame.cmd("siteInfo", [], (res) => {
                     document.getElementById("numPeers").innerHTML = res.peers;
                     if (res.tasks !== 0) {
                        zeroFrame.cmd("wrapperNotification",
                            ["info", "Zite is still downloading. This could affect the functionality.", popupIntervall]);
                     }
                 });
            }

            function htmlEncode(str) {
                return String(str).replace(/[^\w. ]/gi, (c) => {
                    return '&#' + c.charCodeAt(0) + ';';
                });
            }

            function updateNumPeers() {
                zeroFrame.cmd("siteInfo", [], (res) => {
                    document.getElementById("numPeers").innerHTML = res.peers;
                    zeroFrame.cmd("wrapperNotification",
                        ["done", "Number of peers updated.", popupIntervall]);
                });
            }

            function testConnection() {
                zeroFrame.cmd("ping", [], (pong) => {
                    if (pong === "pong") {
                        zeroFrame.cmd("wrapperNotification",
                            ["done", "Connection to UiServer websocket successful.", popupIntervall]);
                    } else {
                        zeroFrame.cmd("wrapperNotification",
                            ["error", "Connection to UiServer websocket failed."]);
                    }
                });
            }

            function requireLogin(func, msg = true) {
                zeroFrame.cmd("siteInfo", [], (res) => {
                    if (res.cert_user_id === null) {
                        if (msg) {
                            zeroFrame.cmd("wrapperNotification",
                                ["error", "In order to use this function, an identity must be selected."]);
                        }
                    } else {
                        func();
                    }
                });
            }

            function login() {
                zeroFrame.cmd("certSelect", [identity_provider], (res) => {
                    if (res === "ok") {
                        zeroFrame.cmd("siteInfo", [], (res) => {
                            if (res.cert_user_id !== null) {
                                /* Show message when selecting an identity successfully. */
                                zeroFrame.cmd("wrapperNotification",
                                    ["done", "Identity successfully selected.", popupIntervall]);
                            }
                        });
                    }
                });
            }

            function sendMessage() {
                if (input.value !== "") {
                    input.readOnly = true;
                    zeroFrame.cmd("peerBroadcast", [input.value, false], (res) => {
                        if (res.sent) {
                            if (document.getElementById("notifyWhenSend").checked) {
                                zeroFrame.cmd('wrapperNotification',
                                    ['done', 'Sent message!', popupIntervall]);
                            }
                            input.value = "";
                        } else {
                            var errorMsg = "Message not sent";
                            if (res.error) {
                                errorMsg += " - " + res.error;
                            }
                            errorMsg += "!";
                            zeroFrame.cmd("wrapperNotification", ["error", errorMsg]);
                        }
                        input.readOnly = false;
                    });
                }
            }
            
            function clearMessages() {
                document.getElementById("history").innerHTML = "";
            }
            
            function sendMsgPong() {
                sendPong(true);
            }
            
            function sendPong(msg = false) {
                zeroFrame.cmd("peerBroadcast", ["pong", false], (res) => {
                    if (msg) {
                        if (res.sent) {
                            if (document.getElementById("notifyWhenSend").checked) {
                                zeroFrame.cmd('wrapperNotification',
                                    ['done', 'Sent pong!', popupIntervall]);
                            }
                        } else {
                            var errorMsg = "Pong not sent";
                            if (res.error) {
                                errorMsg += " - " + res.error;
                            }
                            errorMsg += "!";
                            zeroFrame.cmd("wrapperNotification", ["error", errorMsg]);
                        }
                    }
                });
            }
            
            input.addEventListener("keyup", function(event) {
                /* send when press enter */
                if (event.keyCode === 13) {
                    event.preventDefault();
                    document.getElementById("sendButton").click();
                }
            });

            zeroFrame.onRequest = function(cmd, message) {
                if (cmd === "peerReceive") {
                    /* receive message */
                    var text = message.params.message;
                    var nick = message.params.cert;
                    
                    if (text === "" || nick === "") {
                        /* ban message when empty */
                        zeroFrame.cmd("peerInvalid", [message.params.hash]);
                    } else {
                        // if ( ! ((text === "ping" || text === "pong") && ! document.getElementById("showping").checked) ) {
                        if ( (text !== "ping") && (text !== "pong") || document.getElementById("showping").checked) {
                            document.getElementById("history").innerHTML +=
                                    '<li><span class="nick">' + htmlEncode(nick) +
                                    '#' + htmlEncode(message.params.signed_by.substring(1, 5)) + '</span>: ' +
                                    '<span class="msg">' + htmlEncode(text) + '</span></li>' +
                                    "\n";

                            /* autoscroll */
                            var chat = document.getElementById("chat");
                            chat.scrollTop = chat.scrollHeight;

                            if (document.getElementById("notifyWhenReceive").checked) {
                                zeroFrame.cmd('wrapperNotification',
                                    ['done', 'Message received!', popupIntervall]);
                            }
                        }
                    
                        /* broadcast message to other peers */
                        zeroFrame.cmd("peerValid", [message.params.hash]);
                        
                        if (text === "ping" && document.getElementById("autoping").checked) {
                            requireLogin(sendPong, false);
                        }
                    }
                }
            };
        </script>
    </body>
</html>