• Thứ Tư, 17/12/2003 11:43 (GMT+7)

    “Thiết kế Web chat dùng ASP” hoàn thiện hơn

    PCW số tháng 3/2003 có đăng bài viết 'Thiết kế Web chat dùng ASP' của tác giả Phạm Hoàng Hải. Về chương trình mà tác giả đã giới thiệu, tôi xin có một số ý kiến đóng góp như sau:

    1. Phòng trò chuyện (chat room) chỉ hiển thị được 10 (hoặc x) thông điệp (message) sau cùng, các message gửi (post) lên trước đó đều không được hiển thị

    2. Màn hình hiển thị các message bị nháy mỗi khi display.asp làm tươi (refresh) để cập nhật các message mới (tác giả dùng các biến application để lưu trữ message mà người dùng (user) post lên và dùng trang display.asp được tự động refresh lại sau mỗi 5 giây để hiển thị các message).

    3. Người dùng không thể thấy ngay message của mình và các message mới được post lên mà phải đợi đến chu kỳ refresh của trang display.asp mới thấy được.

    4. Khi một user rời khỏi chat room bằng cách tắt trình duyệt mà không nhấn nút Exit thì chương trình không phát hiện được để đưa ra thông báo cho các user khác.

    5. Khi thay đổi số lượng message chương trình xử lý đòi hỏi phải viết lại nhiều lần đoạn mã gán nội dung các message cho nhau.

    Để giải quyết cho những vấn đề nêu trên, tôi đề nghị giải pháp như sau:

    • Vấn đề 1 và 2: trang display.asp thay vì hiển thị trực tiếp các message ra màn hình, nó sẽ tạo ra các client script (Java Script), các client script này có nhiệm vụ in ra nội dung của các message trên một trang html (msglist.htm) nằm trong một frame khác để hiển thị cho user xem, còn bản thân display.asp thì bị giấu đi. Do các message trên trang msglist.htm được sinh ra bằng client script của trình duyệt, nên số message trên msglist.htm không bị hạn chế và msglist.htm cũng không bị nháy mỗi khi in ra message mới.

    •Vấn đề 3: mỗi khi user gửi message lên, sau khi xử lý các message ta sẽ nạp lại (reload) trang display.asp để hiển thị các message mới ra màn hình của user.

    •Vấn đề 4: lợi dụng sự kiện onunload của một trang trong frameset chính (trang header.htm), sự kiện này sẽ gửi trang quit.asp, có nhiệm vụ cập nhật message thông báo user rời chat room.

    •Vấn đề 5: dùng một biến application để lưu trữ số message mà chương trình xử lý và dùng vòng lặp FOR để nội dung các message.

    Như vậy chương trình bổ sung của chúng tôi sẽ bao gồm các trang sau:

    1. Trang Chat.asp: phần chính là 1 frameset bao gồm 4 frame con chứa các trang (từ trên xuống) header.htm, msglist.htm, inputmsg.asp và display.asp. Trong đó frame chứa display.asp có chiếu cao = 0 để giấu trang này đi.

    <%

    if isempty(session('user')) then

         response.redirect 'enter.asp'

     end if

    %>

    <html>

    <head>

    <title>ASP Chat Room</title>

    </head>

    <frameset framespacing='0' border='false' frameborder='0' rows='8%,82%,10%,0%'>

     <frame name='header' scrolling='no' noresize src='header.htm' marginwidth='0' marginheight='0'>

     <frame name='msglist' src='msglist.htm' scrolling='auto' marginwidth='2' marginheight='2'>

     <frame name='input' scrolling='no' noresize src='inputmsg.asp' target='input' marginwidth='0' marginheight='0'>

     <frame name='display' scrolling='no' noresize src='display.asp' marginwidth='0'  marginheight='0'>

     <noframes>

    <body>

      <p>This page uses frames, but your browser doesn't support them.</p>

      </body>

      </noframes>

    </frameset>

    </html>

     

    2. Trang Enter.asp: đăng nhập người dùng và khởi tạo các biến application.

    <%

    if isempty(Application('refreshSec')) then

       'So giay ma trang hien thi se refresh 'de lay cac thong tin moi ve chat user 'va message

       Application('refreshSec')=2

       'So message toi da ma chat room co the 'tiep nhan trong khoang thoi gian 'refresh

       Application('totalMsg')=10

       'Khoi dong cac gia tri ban dau cho cac 'message va thoi diem post tuong ung 'cua mesage

       'Application('m' & i): message moi 'thu i, Application('t' & i): thoi 'diem post message thu i

       tnow=now

       for i=1 to Application('totalMsg')

             Application('m' & i)=''

             Application('t' & i)=tnow

       next

    end if

    'Neu user da dang ky,

    'redirect den trang chat.asp

    if not isempty(session('user')) then

       response.redirect 'chat.asp'

    else

       if request.form('txtname')<>'' then

       'neu bi danh hop le, luu tru lai bi

      Ơnh va thoi diem tham gia vao cac

       'bien session

       session('user')=request.form('txtname')

       session('time')=now

       totalMsg=Application('totalMsg')

       application.lock

      Âp nhat lai cac thong diep,

       'chuan bi thong diep cuoi cung de

       'nhan gia tri moi

       for i=1 to totalMsg-1

             application('m' & i)=application('m' & (i+1))

             application('t' & i)=application('t' & (i+1))

       next

       'Thong diep cuoi cung duoc cap nhat de 'thong bao user moi tham gia chat room

       application('m' & totalMsg)='<I>User ' & session('user') & ' tham gia chat room !</I>'

       application('t' & totalMsg)=now

       application.unlock

       response.redirect 'chat.asp'

       end if

    end if

    %>

    <html>

    <head>

    <title>Dang ky Chat room</title>

    </head>

    <body onload = 'document.forms[0].txtname.focus()'>

    <form method='post' action = 'enter.asp'>

      <center><p>Bí danh: <input name = 'txtname' size='15' ><input type = 'submit' value='Enter' name = 'btnEnter'></p>

      </center>

    </form>

    </body>

    </html>

    3. Trang Header.htm: trang tiêu đề, trong trang này có xử lý sự kiện unload dùng cho mục đích cập nhật thông báo user rời chat room.

    <html>

    <head>

    <title></title>

    </head>

    <script language='JavaScript'>

    function openQuit() {

       window.open('quit.asp',null,'height = 100,width=100');

       return true;

    }

    </script>

    <body onunload='return openQuit();' bgcolor='#008080'>

    <p align='center'><font color='#FFFFFF'><big><big><strong>ASP CHAT ROOM</strong></big></big></font></p>

    </body>

    </html>

    4. Trang msglist.htm: trang để hiển thị các message, nội dung của nó sẽ được bằng client script tạo ra ở dạng 'động'.

    <html>

    <body>

    </body>

    </html>

    5. inputmsg.asp: nhận và xử lý message do User nhập vào và Post lên chat room.

    <%

    if request.form('txtmsg')<>'' then

       application.lock

       totalMsg=application('totalMsg')

       for i=1 to totalMsg-1                              application('m' & i) = application('m' & (i+1))

             application('t' & i) = application('t' & (i+1))

       next

             application('m' & totalMsg)= session('user') & ': ' & request.form('txtmsg')

             application('t' & totalMsg) = now

             application.unlock

    %>

    <Script Language='JavaScript'>

    window.parent.frames[3].location = 'display.asp';

    </Script>

    <%                 

    end if

    %>

    <html>

    <head>

    <title>Input message</title>

    <base target='input'>

    <script Language = 'JavaScript'>

    function postmsg(){

       if (document.forms('msgForm') .txtmsg.value != '')

       return (true);

        else

       return (false);

       }

    </script>

    </head>

    <body>

    <form name='msgForm' method='POST' action='inputmsg.asp' onSubmit='return postmsg();'>

      <p>

        <input type='text' name='txtmsg' size='70'>

        <input type='Submit' value='Send'  name='btnSend'>

      </p>

    </form>

    </body>

    </html>

    6. Trang display.asp: lấy và ghi nội dung các message ra trang msglist.htm bằng client script. Trang này cũng có nhiệm vụ cuộn màn hình của msglist.htm đến cuối trang để hiển thị các message mới nhất (không bị che khi nội dung các message nhiều hơn trang màn hình)

    <%

    response.buffer=true

    response.ContentType='text/html'

    %>

    <html>

    <head>

    <meta http-equiv='refresh' content = '<%=application('refreshSec')%>; url=display.asp'>

    <title></title>

    </head>

    <body>

    <%

    response.write('<Script Language='JavaScript'>' & chr(13))

    totalMsg=application('totalMsg')

       'Dung client script de ghi cac message 'moi ra trang msglist.htm

    for i=1 to totalMsg

       mtime=application('t' & i)

       msg=application('m' & i)

       if mtime>session('time') and msg<>'' then

             mline = 'window.parent.frames[1] .document.writeln('' & msg & '<BR>');' & chr(13)

             response.write(mline)

       end if

    next

      Âp nhat moc thoi diem ghi message 'cua user bang voi thoi diem post 'message moi cuoi cung

       if session('time')<application('t' & totalMsg) then

       session('time')=application('t' & totalMsg)

       'Script de cuon man hinh den hien thi 'message cuoi cung duoc in ra

        mline='var ie = window.document.all;' & chr(13)

       mline=mline & 'if (ie) {'

       mline=mline & 'var msgs= window.parent.frames[1].document.all .tags('BR'); ' & chr(13)

       mline=mline & 'var msglen=msgs.length;' & chr(13)

       mline=mline & 'if (msglen>10) { msgs(msglen-1).scrollIntoView(true);}' & chr(13)

       mline=mline & '}'

       response.write(mline)

       end if

    response.write('</Script>' & chr(13))

    %>

    </body>

    </html>

     

    <script Language = 'JavaScript'>

    var ie = window.document.all;

    //Kiem tra xem document da hoan toan duoc load chua, neu roi moi set focus cho txtmsg

    if (ie) {

       if(window.parent.frames[2].document .readyState == 'complete') {

       window.parent.frames[2].document .forms[0].txtmsg.focus();

       }

    } else {

       window.parent.frames[2].document.forms[0] .txtmsg.focus();

    }

    </script>

    7. Trang quit.asp: được gọi bởi trang header.htm khi trang này bị unload. Quit.asp có nhiệm vụ cập nhật message thông báo user rời khỏi chat room

    <%

    if not isempty(session('user')) then

       totalMsg=Application('totalMsg')

       application.lock

       for i=1 to totalMsg-1

             application('m' & i) = application('m' & (i+1))

             application('t' & i) = application('t' & (i+1))

       next

              application('m' & totalMsg) = '<I>User ' & session('user') & ' roi khoi chat room!</I>'

              application('t' & totalMsg)=now

             application.unlock       

             session('user')=empty

    end if

    %>

    <script Language'JavaScript'>

    window.close();

    </script>

    <html>

    <head>

    <title></title>

    </head>

    <body>

    </body>

    </html>

    Như vậy chúng ta đã cải tiến được web chat  với các tính năng tương đối hoàn chỉnh, hy vọng bạn có thể sử dụng nó trong các ứng dụng Web của riêng mình

    Lã Mạnh Cường
    lmcuong@vnes.com

     

     

    ID: A0304_94