Untitled

<html lang="en"><head>
    <title>Animal Jam | Official Mod </title>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <!--The above library(/socket.io/socket.io.js) will be generated by socket.io module of server -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <link rel="stylesheet" media="screen" href="https://ajwebcdn1.akamaized.net/assets/2.0/main-91475b0eba3490d3394bacd04d3653ef8822d80feb78bad48e45d3c2c840cd4d.css">
    <link rel="icon" href="https://ajwebcdn1.akamaized.net/assets/2.0/favicon/favicon-32x32-5407fe7fe85e9b2a11c1502a4ad5bd44b9239bdf54093a941e7d75e43ac95f04.png"
    <style></style></head>

<body style="">

<form>


    <!--text form to send data to the server-->


    <style>
        body {background: url(https://i.gyazo.com/f4af0963edf92d891425d1082364aee8.png); background-size: 100%;}
    </style>

    <input type="text" placeholder="Username
                                " id="messagee" style="
    margin-bottom: 0px;
    margin-top: 15px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 225px;
    width: 200px;
    ">

    <input type="text" placeholder="ID
                                " id="messagee2" style="
    margin-bottom: 0px;
    margin-top: 15px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 83px;
    width: 50px;
    ">

    <input id="submitt" type="button" value="Send String" style="
    padding-bottom: 20px;
    padding-bottom: 20px;
    display: inline-block;
    color: #236082;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    background-color: #2374cc;
    background-image: linear-gradient(0deg, #4bbbee 0%, #43a9d3 53.4%, #35dddc 53.5%, #44c6dd 98%);
    cursor: pointer;
    font-family: Tiki-Island;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: 1px;
    height: 40px;
    border-radius: 82px;
    margin-top: 13px;
    border-top-width: 2px;
    margin-left: 415px;

    ">


    <style></style><div style="height: 500px;width: 785px;overflow-y: scroll;background-color:;padding-bottom: 0px;margin-bottom: 305px;opacity: 0.7;margin-top: 120px;font-size: 25px;font-weight: bold;margin-left: 80px;" id="content"><p></p>
</div></form>


<script type="text/javascript">
    var socket = io.connect("/");
    /*Initializing the connection with the server via websockets */
    socket.on("message",function(message){
        /*
            When server sends data to the client it will trigger "message" event on the client side , by
            using socket.on("message") , one cna listen for the ,message event and associate a callback to
            be executed . The Callback function gets the dat sent from the server
        */
        console.log("Message from the server arrived")
        console.log(message); /*converting the data into JS object */
        $('#content').append('<div >'+message.data+'</div>'); /*appending the data on the page using Jquery */
    });
    // SENDS TO CLIENT
    $(function(){
        $('#submit').click(function(){ /*listening to the button click using Jquery listener*/
            var data1 = { /*creating a Js ojbect to be sent to the server*/
                message:$('#message').val(), /*getting the text input data      */
            }
            console.log("Sending");
            console.log(data1);
            socket.send(JSON.stringify(data1));
            /*Data can be sent to server very easily by using socket.send() method
            The data has to be changed to a JSON before sending
                                  it (JSON.stringify() does this job )*/
            /* This triggers a message event on the server side
            and the event handler obtains the data sent */
            $('#message').val('');
            //Emptying the text box value using jquery
        });
    });
    //SENDS TO SERVER
    $(function(){
        $('#submitt').click(function(){ /*listening to the button click using Jquery listener*/
            var data2 = { /*creating a Js ojbect to be sent to the server*/
                messagee:$('#messagee').val(), /*getting the text input data      */
            }
            console.log("Sending");
            console.log(data2);
            socket.send(JSON.stringify(data2));
            /*Data can be sent to server very easily by using socket.send() method
            The data has to be changed to a JSON before sending
                                  it (JSON.stringify() does this job )*/
            /* This triggers a message event on the server side
            and the event handler obtains the data sent */
            //Emptying the text box value using jquery
        });
    });
    // REPLACE TEXT
    $(function() {
        $('#submiter').click(function () {
            var data3 = {
                replace1:$("#replace1").val(), replace2:$("#replace2").val()
            }
            console.log("Sending");
            console.log(data3);
            socket.send(JSON.stringify(data3));
            $('#replace1').val('');
            $('#replace2').val('');
        });
    });
</script>

</body></html>