CODEWITHSUNDEEP
javascriptjqueryhtmlcss
IE8IsBetterThenGoogleChrome
IE8IsBetterThenGoogleChrome

Reputation: 2325

Creating a messenger app using jQuery (failed)

I failed here. I'm new to web development and have good experience with HTML/CSS/JS(jQuery). I tried using only what I know to build a chat application. I uploaded it to a web server and found out that when someone else types on a different computer, messages from other people also typing on the site don't show up. I thought that having jQuery adding elements to a unordered list, it would show for everybody connected to the website. Do you think by editing some of my code i could get to my goal? Or am i completely off course and trying do so something impossible (Only using JS/jQuery). If it's the second, can you please lead me in the correct direction. HTML:

<html>
<head>
<script src="http://www.codehelper.io/api/ips/?js"></script>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="js/jQuery.js"></script>
<title>Instant Messenger</title>
</head>
<link rel="stylesheet" href="css/style.css"/>
<body>
    <div class="Talk">
<ul>
</ul>
</div>
<form>
    <div class="Messages">
Message: <input type="text" id="Message" size="100px">
<input type="submit" id="submit">
    </div>
</form>

</body>

</html>

CSS:

@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900");


.Messages{
    position: fixed;
    bottom: 10;
}

JS:

$(document).ready(function(){
    $("#submit").click(function(e){
        //alert(codehelper_ip.IP);
        //alert(codehelper_ip.CityName);
        e.preventDefault();
        var Input = $("#Message").val();
        //alert(Input);
        $(".Talk ul").append('<li>'+'['+ codehelper_ip.CityName +'~'+codehelper_ip.IP+']'+Input+'</li>');
        $("#Message").val("");
    });
setInterval(main,500);
});

function main(){
    var count = $(".Talk li").length;
    if(count >= 20 ){
        //alert("20th");
         $(".Talk li").remove();
    }

}

Upvotes: 1

Views: 824

Answers (1)

Amadan
Amadan

Reputation: 198476

This is impossible to do with technologies you're using. You need a Meteor server, a node.js socket.io server, or some other server that will transmit messages from you to other users (and vice versa). As it stands, you're just adding messages a user types to the copy of the page he has in his browser. A chat application is actually rather hard, and you definitely need to understand the way the Web works in much more depth; and you can't do it at all on most web hosting providers, since they only support Apache (which, awesome as it is, can't do what needs to be done for a chat app).

Upvotes: 2

Related Questions