Instant Messaging (Chat) without page refresh in ASP .net

Σε συνέχεια του προηγούμενου post για τους online users, επεκτείνω τον κώδικα για να δείξω πώς μπορούμε να υλοποιήσουμε ένα αρκετά απλό (server side) chat engine.
Στο υλικό που βρήκα ψάχνοντας στο διαδίκτυο αναφέρονται αρκετοί τρόποι και παραδείγματα για την υλοποίηση ενός chat σε ASP .NET. Όμως, τα περισσότερα από αυτά είναι πολύπλοκα και χρονοβόρα στην μελέτη τους. Ένας απλός τρόπος, ο οποίος δεν απαιτεί refresh/reload της σελίδας και όλα φαίνονται καλά στα μάτια του χρήστη (με το μειονέκτημα των συχνών επερωτήσεων στην βάση δεδομένων) εξηγείται πιο κάτω.
Το παράδειγμα αφορά ένα chatroom και μπορεί εύκολα να επεκταθεί για πολλαπλά chatrooms ή για private chatting μεταξύ δύο χρηστών.
ONLINE DEMO: εδώ (Δοκιμάστε με δύο διαφορετικούς browser ταυτόχρονα για να γίνει ένα υποτιπώδες chat)

---

1. Δημιουργούμε τον ακόλουθο πίνακα στην βάση μας:

2. Δημιουργούμε μια νέα .aspx σελίδα και σε αυτή τοποθετούμε τα ακόλουθα:

• Ένα textbox στο οποίο θα γράφει ο χρήστης το μήνυμα του (newMessageTextBox) και ένα button για την αποστολή του μηνύματος (sendButton)
• Ένα <asp:BoundField /> το οποίο βρίσκεται μέσα σε ένα GridView (messagesGridView), στο οποίο θα κάνουμε bind τα μηνύματα
• Ένα listbox στο οποίο θα εμφανίζονται οι online users (usersInChatListBox)
• Ένα timer που ορίζουμε εμείς όσο θέλουμε το interval (ChatTextTimer) π.χ. κάθε 1 δευτερόλεπτο

Τοποθετούμε το messagesGridView και το usersInChatListBox μέσα σε Update Panels για να πετύχουμε την ανανέωση των δεδομένων χωρίς να γίνεται refresh/reload η σελίδα και βάζουμε triggers στα πιο πάνω controls. Δηλαδή εμείς θέλουμε κάθε φορά που πατά ο χρήστης το sendButton να εισάγονται τα δεδομένα στην βάση και να εμφανίζονται στο messagesGridView και σε κάθε interval του ChatTextTimer να ανανεώνονται τα μηνύματα στο messagesGridView και οι online users στο usersInChatListBox. Για να γίνουν αυτά λίγο πιο κατανοητά:

view plainprint?

1. <asp:UpdatePanel ID="ChatUpdatePanel" runat="server" UpdateMode="Always">  
2.    <ContentTemplate>  
3.       <div id="ChatText" style="width: 100%; height: 100%; overflow: auto; text-align: left">  
4.          <asp:GridView ID="messagesGridView" runat="server" Width="100%" AutoGenerateColumns="False">  
5.             <Columns>  
6.                <asp:BoundField Visible="False" DataField="sender" />  
7.                   <asp:TemplateField>  
8.                      <ItemTemplate>  
9.                        <asp:Label ID="msgContentLabel" runat="server" Text='<%#Eval("msgContent")%>'   
10.                         Font-Names="calibri" />  
11.                      </ItemTemplate>  
12.                   </asp:TemplateField>  
13.                <asp:BoundField Visible="false" DataField="isTitle" />  
14.             </Columns>  
15.          </asp:GridView>  
16.       </div>  
17.    </ContentTemplate>  
18.    <Triggers>  
19.       <asp:AsyncPostBackTrigger ControlID="ChatTextTimer" EventName="Tick" />  
20.       <asp:AsyncPostBackTrigger ControlID="SendButton" EventName="Click" />  
21.    </Triggers>  
22. </asp:UpdatePanel>  
23. <asp:Timer runat="server" ID="ChatTextTimer" Interval="1000" />  
24.   
25. Online Users:  
26. <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">  
27.    <ContentTemplate>  
28.       <asp:ListBox ID="usersInChatListBox" runat="server" Width="100%"   
29.          CssClass="usersinchatstyle" Height="115px">  
30.       </asp:ListBox>  
31.    </ContentTemplate>  
32.    <Triggers>  
33.       <asp:AsyncPostBackTrigger ControlID="ChatTextTimer" EventName="Tick" />  
34.    </Triggers>  
35. </asp:UpdatePanel>