Permalink
Browse files

the chat page

  • Loading branch information...
1 parent 5990538 commit 9e572cfd757b6ef26fd164223d0e68a8a2d34278 @motyar committed Jan 25, 2012
Showing with 99 additions and 0 deletions.
  1. +99 −0 index.php
View
@@ -0,0 +1,99 @@
+<?php
+$room = 'roomname';
+?>
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <style>
+ body{
+ width: 80%;
+ margin: 0 auto;
+ }
+ #msg {
+ font-size: 25px;
+ width: 99%;
+ border: 1px solid #DDD;
+ border-radius: 5px;
+ -moz-border-radius: 5px;
+ font-family: Arial, Helvetica, sans-serif;
+ margin: 5px auto 20px;
+ padding: 5px;
+ border-image: initial;
+ }
+ .msgln{
+ padding:3px;
+ }
+ .msgln:nth-child(odd) {
+ background: #EAEAEA;
+ }
+ footer{
+ position:fixed;
+ bottom:10px;
+ }
+
+ #chats{
+ height: 500px;
+ overflow-y: scroll;
+ }
+ </style>
+</head>
+<body>
+ <div id="chats"></div>
+ <form onsubmit="javascript:sendMsg();return false;">
+ <input type="text" name="text" id="msg" autocomplete="off" />
+ </form>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
+ <script>
+
+ var username = '';
+
+ if(!username){
+ var username = prompt("Hey there, good looking stranger! What's your name?", "");
+ }
+
+ function sendMsg(){
+ if(!username){
+ username = prompt("Hey there, good looking stranger! What's your name?", "");
+ if(!username){
+ return;
+ }
+ }
+
+var msg = document.getElementById("msg").value;
+if(!msg){
+ return;
+}
+document.getElementById("chats").innerHTML+=strip('<div class="msgln"><b>'+username+'</b>: '+msg+'<br></div>');
+$("#chats").animate({ scrollTop: 2000 }, 'normal');
+
+ $.get('/server.php?msg='+msg+'&user='+username+'&room=<?=$room?>', function(data) {
+ document.getElementById("msg").value = '';
+ });
+ }
+
+ var old = '';
+ var source = new EventSource('/server.php?room=<?=$room?>');
+ source.onmessage = function(e) {
+ if(old!=e.data){
+
+ document.getElementById("chats").innerHTML='<span>'+e.data+'</span>';
+ old = e.data;
+
+ }
+ };
+
+ function strip(html)
+{
+ var tmp = document.createElement("DIV");
+ tmp.innerHTML = html;
+ return tmp.textContent||tmp.innerText;
+}
+
+ </script>
+<footer>
+Created by <a href="http://twitter.com/motyar">@motyar</a> | <a href="http://motyar.blogspot.com/">blog</a> | <a href="http://news.ycombinator.com/item?id=3509146">discuss</a>
+</footer>
+</body>
+</html>

0 comments on commit 9e572cf

Please sign in to comment.