Simple chat using jsp and ajax

#18 يونيو 2011 في 04:03 صاحب الموضوع

السلام عليكم ,

ده مشروع شات بسيط بإستخدام jsp

اولاstyle sheet for all pages

/* 
    Document   : chat
    Created on : Apr 24, 2011, 1:19:46 PM
    Author     : ahmed salah
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/


#header{
    height: 30px;
    background-color:  azure;
    width: 990px;
    margin-bottom: 3px;


}
#logo{
    padding: 40px;
    padding-left: 360px;
    font-family: 'American Typewriter', Courier, monospace ;
    font-size: 30px;


}
#display{
    height: 300px;
    float: left;
    width: 990px;
    background-color:  #ccffff;
    overflow: auto

}

#input{
    height: 200px;
    float: left;
    width: 990px;
    background-color: #ccffff;

}
#InputTxt{
    float: left;
    margin-left: 45px;


}
#InputBtn{
    float: left;
    margin-left: 450px;

}

#footer{
    height:30px;
    background-color: azure;
    clear: both;


}

#fo{
    border: 10px;
    padding: 10px 0 0 10px;
    font-size: 18px;
    font-family: 'American Typewriter', Courier, monospace ;

}
#name{
    font-size: large;
    font-style: italic;
    color: red;
}
#login{
    height: 470px;
    background-color: #ccffff;
    width: 990px;

}
#loginForm{
    float: left;
    margin-left: 370px;
    margin-top: 120px;
}

ثم صفحة login

<%-- 
    Document   : login
    Created on : May 1, 2011, 1:48:34 PM
    Author     : ahmed
--%>

<%@page contentType="text/html" pageEncoding="UTF-8" session="false"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" href="resources/css/chat.css" rel="stylesheet"/>
        <title>Chat Login</title>
    </head>
    <body>

        <div id="header" >
            <img src="" alt="Web Chat Application" id="logo">
        </div>
        <div id="login">
            <form name="login" action="chatLogic.jsp" method="POST" id="loginForm">
                <h1> Enter Your Name</h1><input type="text" name="userName" value="" />
                <input type="submit" value="Enter Chat"/>
            </form>
        </div>
        <div id="footer">
            <img src="" alt="CopyRights To Ahmed Salah" id="fo">
        </div>
    </body>
</html>

ثم الصفحة الرئيسية إلا هتظهر لليوزر بعد عملية login

<%-- 
    Document   : index
    Created on : Apr 23, 2011, 2:09:07 PM
    Author     : ahmed
--%>

<%@page import="java.util.ArrayList"%>
<%@page session="false" %>
<%@page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>

        <title>Web Chat</title>
        <link type="text/css" rel="stylesheet" href="resources/css/chat.css"/>
        <script type="text/javascript">
            var xmlHttp;
            var t;
            var s=0;

            function showChat()
            {

                var url;
                xmlHttp=CreateXmlHttpObject()
                if (xmlHttp==null)
                {
                    alert ("Browser does not support HTTP Request")
                    return
                }
                url="chatView.jsp";

                xmlHttp.open("GET",url,true)
                xmlHttp.onreadystatechange=stateChanged
                xmlHttp.send(null)

                t=setTimeout("showChat()", 1000);
            }
            function stateChanged()
            {

                if(xmlHttp.readyState==4||xmlHttp.readyState=="complete"){
                    document.getElementById("display").innerHTML= xmlHttp.responseText;

                }

            }

            function sendComment(msg)
            {


                var url;
                xmlHttp=CreateXmlHttpObject()
                if (xmlHttp==null)
                {
                    alert ("Browser does not support HTTP Request")
                    return
                }

                url="chatLogic.jsp?comment="+msg;
                 document.getElementById("InputTxt").value="";
                xmlHttp.open("GET",url,true)

                xmlHttp.send(null);
            }

            function CreateXmlHttpObject()
            {

                var objXMLHttp=null
                if (window.XMLHttpRequest)
                {
                    objXMLHttp=new XMLHttpRequest()
                }
                else if (window.ActiveXObject)
                {
                    objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
                }
                return objXMLHttp
            }



        </script>

    </head>
    <body onload="showChat()">

        <%!            ArrayList<String> comArr = new ArrayList<String>();
            ArrayList<String> usrArr = new ArrayList<String>();
        %>
        <div id="all" >
            <div id="header" >
                <img src="" alt="Web Chat Application" id="logo">
            </div>

            <div id="display" >
            </div>

            <div id="input">

                <textarea name="comment" rows="6" cols="109"  id="InputTxt">
                </textarea>
                <input type="submit" value="Send" id="InputBtn" onclick="sendComment(document.getElementById('InputTxt').value)"/>

            </div>
            <div id="footer">
                <img src="" alt="CopyRights To Ahmed Salah" id="fo">
            </div>

        </div>

    </body>
</html>

ثم الصفحة المسئولة عن إستقبال الداتا سواء من صفحة login او من صفحة chat

<%-- 
    Document   : chat
    Created on : Apr 24, 2011, 5:46:52 PM
    Author     : ahmed
--%>

<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page isThreadSafe="true" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <%!            ArrayList<String> comArr = new ArrayList<String>();
            ArrayList<String> usrArr = new ArrayList<String>();
        %>

        <%
                    ArrayList<String> c = (ArrayList<String>) application.getAttribute("comment");
                    if (c == null) {                     
                        session.setAttribute("Name", request.getParameter("userName"));                     
                    } else {
                        if (session.isNew()) {                 
                            session.setAttribute("Name", request.getParameter("userName"));                            

                        } else {

                            comArr.add(request.getParameter("comment"));
                            usrArr.add((String) session.getAttribute("Name"));

                        }
                    }
                    application.setAttribute("comment", comArr);
                    application.setAttribute("uName", usrArr);

        %>
        <%

                    pageContext.forward("Chat.jsp");
        %>
    </body>
</html>

ثم الصفحة المسئولة عن تحديث و إضافة new comments without page refresh or submits

<%-- 
    Document   : chatView
    Created on :Apr 23, 2011, 2:48:17 AM
    Author     : ahmed
--%>

<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>

    </head>
    <body>

        <table>

            <%
                        ArrayList<String> CommentArray = (ArrayList<String>) application.getAttribute("comment");
                        ArrayList<String> NameArray = (ArrayList<String>) application.getAttribute("uName");

                        for (int i = 0; i < CommentArray.size(); i++) {
                            String comment = CommentArray.get(i);
                            String user = NameArray.get(i);
                            if (comment == null) {
                                continue;
                            } else {

            %>


            <tr>
                <td id="name"><%= user + " >> "%></td>
                <td><%= comment%></td>

            </tr>

            <%
                            }

                        }
            %>
        </table>

    </body>
</html>

السناريو كالآتى

1 - اليوزر هيفتح صفحة login و هيكتب اسمه إلا هيظهر فى الشات

2- بعد تسجيل الإسم السرفر هيحوله للصفحة الرئيسة و فيها حاجتين :- أولا لما اليوزر يكتب كومنت و يضغط على button فأنا هستخدم ajax to make asynchoronous requests to server to add new comments without making page refresh or submitting

ثانيا انا هستخدم ajax for updating get all new users comments

أسف على الإطالة و شكرا

#28 يونيو 2011 في 10:15

؟

#39 يونيو 2011 في 02:28

على ماذا تستفسر ؟

#49 يونيو 2011 في 19:02

ماهو المطلوب في السؤال .. أنت وضحت ماذا لديك ولم توضح المطلوب ..

عفواً أحبتي انقطاعي بسبب الدراسة دعواتكم بالتوفيق..

{ لا ينال العلم مستحٍ ولا مستكبر }

#59 يونيو 2011 في 20:07

JavaPorgrammer كتب:
ماهو المطلوب في السؤال .. أنت وضحت ماذا لديك ولم توضح المطلوب ..

انا بالفعل ليس لدى مطلوب و أريد فقط الأراء و الإقتراحات

#612 يونيو 2011 في 10:42

المشروع غير كاملا

فين الـchatLogic.jsp

الموجوده فى

<form name="login" action="chatLogic.jsp" method="POST" id="loginForm">

اتمنى ان تضع المشروع كاملا وليس على هيئة صفحات

Software Developer
Mahmoudkelany.com

#716 يونيو 2011 في 22:51

هذا هوه ملف ( war .) للمشروع

اعمل (deploy ) لهذا الملف على السيرفر و جرب الأبليكشن و منتظر الأراء و الإقتراحات

WebChat.rar

#821 يونيو 2011 في 18:44

Ahmed Salah AbdElAziz كتب:
هذا هوه ملف ( war .) للمشروع
اعمل (deploy ) لهذا الملف على السيرفر و جرب الأبليكشن و منتظر الأراء و الإقتراحات

هل قام أحد بتجربة هذا الأبليكشن ؟؟

Simple chat using jsp and ajax

مواضيع مشابهة