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

    Thiết kế web chat dùng ASP


    Chat giờ đây gần như là một món ăn tinh thần không thể thiếu đối với người dùng máy tính mỗi khi lên mạng. Bên cạnh đó,  việc tự viết ứng dụng Web hiện không còn là công việc vượt quá tầm đối với nhiều người. Vậy tại sao bạn lại không tự tạo cho mình một Website có chức năng chat mà không cần phải sử dụng các chương trình chat của người khác. Dĩ nhiên, có thể ứng dụng Web chat của bạn không đầy đủ các chức năng bằng các chương trình khác, nhưng nó giúp bạn có thêm kiến thức và phát triển thành một Website hoàn chỉnh trong tương lai.
    Bài viết này giới thiệu một Web chat đơn giản dạng công cộng, không dùng cơ sở dữ liệu. Tôi chỉ mong đưa ra cho các bạn một ví dụ để tham khảo và nghiên cứu. Mọi thắc mắc có thể gửi về theo địa chỉ cuối bài này.


    Ứng dụng gồm các trang .asp sau
    1. Trang chủ index.asp
    Trang này chỉ hiện ra một câu thông báo cho người sử dụng bắt đầu vào trang Web chat bằng cách click chuột vào “Đăng nhập vào chatroom”.

    index.asp

    <%
    APPLICATION.LOCK
    Application(“txt10”) = “”
    Application(“txt9”) = “”
    Application(“txt8”) = “”
    Application(“txt7”) = “”
    Application(“txt6”) = “”
    Application(“txt5”) = “”
    Application(“txt4”) = “”
    Application(“txt3”) = “”
    Application(“txt2”) = “”
    Application(“txt1”) = “”
    APPLICATION.UNLOCK
    %>
    <HTML>
    <HEAD>
      <script language=”JavaScript”>
      <!— hide from JavaScript-challenged browsers
      function openWindow(url) {
        popupWin = window.open(url, ‘remote’, ‘scrollbars,resizable,width=400, height=300’)
      }
    // done hiding —> </script>
    </HEAD>
    <BODY BGCOLOR=”#FFFFFF” TEXT=”#000000' LINK=”#000000' VLINK=”#000000'>
    <A HREF=”javascript:openWindow (‘chat.asp’);”>Đăng nhập vào chatroom</A>
    </BODY>
    </HTML> 


    2. Trang màn hình chính chat.asp
    Trang này bắt đầu bằng chức năng kiểm tra người sử dụng đã đăng nhập vào hệ thống chưa, nếu chưa đăng nhập sẽ đưa ra một trang web có nội dung là một Textbox và một nút submit cho phép người sử dụng đăng nhập hệ thống.
    Sau khi người dùng đã đăng nhập, hệ thống sẽ lấy thông tin về các nội dung chat mà người sử dụng đã nhập vào.
    Trong chương trình này tôi dùng đối tượng ASP Application. Các bạn có thể sử dụng đối tượng Session vì xét về chức năng, chúng cũng tương đối giống nhau. Đối tượng ASP Application lưu trữ thông tin toàn cục, trong khi Session lưu thông tin về cá nhân người dùng. Một biến đối tượng Application khả dụng cho tất cả phiên làm việc của người dùng trong trình ứng dụng Web, trong lúc mỗi phiên làm việc của cá nhân người dùng có bản sao biến Session riêng. Trên Website tôi chỉ giới hạn dùng 10 đối tượng ASP Application, các bạn có thể tăng hay giảm số lượng này nếu thích.
    Màn hình chat gồm 2 khung: một khung để nhập nội dung chat, một khung để hiển thị thông tin chat.

    chat.asp
    <%
    IF len(Request.Cookies(“nick”)) = 0 AND len(Request.Form(“nick”)) = 0 THEN
    %>
    <HTML>
    <HEAD>
    <TITLE>Đăng nhập người sử dụng</TITLE>
    </HEAD>
    <BODY BGCOLOR=”#FFFFFF” TEXT=”#000000' LINK=”#FF0000' VLINK=”#FF0000'>
    <BR>
    <CENTER>Vui lòng nhập vào nickname của bạn:</CENTER>
    <FORM METHOD=”POST” ACTION=”chat.asp”>
    <CENTER><INPUT NAME=”nick” TYPE=”TEXT” SIZE=10></CENTER>
    <CENTER><INPUT TYPE=”SUBMIT” VALUE=”Enter Chat”></CENTER>

    </BODY>
    </HTML>
    <%
    ELSE
    Response.Cookies(“Nick”)=Request.Form(“nick”)
    APPLICATION.LOCK
    Application(“txt10”) = Application(“txt9”)
    Application(“txt9”) = Application(“txt8”)
    Application(“txt8”) = Application(“txt7”)
    Application(“txt7”) = Application(“txt6”)
    Application(“txt6”) = Application(“txt5”)
    Application(“txt5”) = Application(“txt4”)
    Application(“txt4”) = Application(“txt3”)
    Application(“txt3”) = Application(“txt2”)
    Application(“txt2”) = Application(“txt1”)
    Application(“txt1”) = “<FONT COLOR=””#0000FF””>** Xin chào “ & Request.Form(“nick”) & “ đã đăng nhập vào chatroom **</FONT>”
    APPLICATION.UNLOCK
    %>
    <HTML>
    <HEAD><TITLE>** SHCVN Chat v. 1.0 **</TITLE></HEAD>
    <FRAMESET ROWS=”180,70' FRAMEBORDER=”0' BORDER=”false”>
    <FRAME SRC=”display.asp” SCROLLING=”auto”>
    <FRAME SRC=”message.asp” SCROLLING=”no”>
    </FRAMESET>
    </HTML>
    <%
    END IF
    %>


    3. Trang hiển thị display.asp
    Trang Web này dùng để hiển thị tất cả các nội dung chat sau mỗi lần có giao tác cập nhật thông tin từ ASP Application. Thông tin được lấy từ đối tượng này và hiện lên màn hình.

    display.asp

    <HTML>
    <HEAD>
    <META HTTP-EQUIV=”REFRESH” CONTENT=”5;display.asp”>
    </HEAD>
    <BODY BGCOLOR=”#FFFFFF” TEXT=”#000000' LINK=”#FF0000' VLINK=”#FF0000'>
    <FONT SIZE=2>
    <%=Application(“txt10”)%><BR>
    <%=Application(“txt9”)%><BR>
    <%=Application(“txt8”)%><BR>
    <%=Application(“txt7”)%><BR>
    <%=Application(“txt6”)%><BR>
    <%=Application(“txt5”)%><BR>
    <%=Application(“txt4”)%><BR>
    <%=Application(“txt3”)%><BR>
    <%=Application(“txt2”)%><BR>
    <%=Application(“txt1”)%><BR>
    </FONT>
    </BODY>
    </HTML>

    4. Trang Web cập nhật nội dung chat message.asp
    Bước đầu kiểm tra xem tất cả người dùng có đưa ra câu chat nào mới hay không, nếu phát hiện có một câu thông báo mới thì sẽ đẩy dần nội dung chat lên trên, đối tượng Application mới nhất sẽ được hiển thị dưới cùng trong khung thông tin chat.
    Nội dung hiển thị của trang Web này đơn giản chỉ là một Textbox dùng để gõ câu lệnh chat vào, một nút SEND để gửi nội dung chat, ngoài ra còn một nút EXIT (hình) để kết thúc chat.

    message.asp
    <%
    If not Request.Form(“message”)=”” THEN
    APPLICATION.LOCK
    Application(“txt10”) = Application(“txt9”)
    Application(“txt9”) = Application(“txt8”)
    Application(“txt8”) = Application(“txt7”)
    Application(“txt7”) = Application(“txt6”)
    Application(“txt6”) = Application(“txt5”)
    Application(“txt5”) = Application(“txt4”)
    Application(“txt4”) = Application(“txt3”)
    Application(“txt3”) = Application(“txt2”)
    Application(“txt2”) = Application(“txt1”)
    Application(“txt1”) = “<font color=red><B><u>” & Request.Cookies(“nick”) & “:</u></B></Font> “ & Request.Form(“message”)
    APPLICATION.UNLOCK
    END IF
    %>
    <HTML>
    <HEAD><TITLE>Trang web chat</TITLE>
    </HEAD>
    <BODY BGCOLOR=”#006699' TEXT=”#FFFFFF” LINK=”#FF0000'>
    <FORM METHOD=”POST” ACTION=”message.asp”>
    <FONT SIZE=2>Nhập nội dung chat và nhấn nút SEND </FONT><BR>
    <TABLE BORDER=0 CELLSPACING=0>
    <TR>
    <TD>
    <INPUT NAME=”message” TYPE=”TEXT” SIZE=30>
    </TD>
    <TD>
    <INPUT TYPE=”IMAGE” SRC=”send.gif” WIDTH=40 HEIGHT=24 BORDER=0>
    </TD><TD>&nbsp;</TD>
    <TD VALIGN=TOP>
    <A HREF=”logoff.asp” TARGET=”_top”><IMG SRC=”exit.gif” WIDTH=35 HEIGHT=26 BORDER=0></A>
    </TD> </TR>
    </TABLE></FORM>
    </BODY>
    </HTML>

    5. Trang kết thúc logoff.asp
    Dùng để thông báo cho chatroom biết người sử dụng nào đã vừa kết thúc và kết thúc chương trình.
    Các bạn thấy đó, cũng khá là đơn giản phải không. Các bạn có thể phát triển thêm nhiều chức năng khác. Ít nhất thì để phát triển lên tương tự như trang Web chat truyền thống www.alamak.com là chuyện trong tầm tay. Tuy nhiên, nên xây dựng kết nối với cơ sở dữ liệu như Access hoặc SQL Server để khai thác hết sức mạnh của chat.
    Hy vọng sẽ có dịp giới thiệu tới các bạn một chương trình hoàn chỉnh, có thể dùng Visual Basic cho đơn giản nhưng cho phép chat trên Web tương tự như Yahoo Messenger.

    logoff.asp

    <%
    ‘lấy lại nickname
    nickname = Request.Cookies(“Nick”)
    nickname_entry = nickname & “#”
    Response.Cookies(“Nick”)=””
    APPLICATION.LOCK
    Application(“txt10”) = Application(“txt9”)
    Application(“txt9”) = Application(“txt8”)
    Application(“txt8”) = Application(“txt7”)
    Application(“txt7”) = Application(“txt6”)
    Application(“txt6”) = Application(“txt5”)
    Application(“txt5”) = Application(“txt4”)
    Application(“txt4”) = Application(“txt3”)
    Application(“txt3”) = Application(“txt2”)
    Application(“txt2”) = Application(“txt1”)
    Application(“txt1”) = “<FONT COLOR=””#00C800'”>** “ & nickname & “ rời khỏi chatroom **</FONT>”
    APPLICATION.UNLOCK
    %>

    <HTML>
    <HEAD>

    <script language=”JavaScript”>

    {close();}

    </SCRIPT>
    </HEAD>
    <BODY> </BODY>
    </HTML>

    Phạm Hoàng Hải 
    99CT, Trường ĐH Hùng Vương, TP. HCM
    Email : Shcvn@fptnet.com.vn

     

     

    ID: A0303_92