Javascript ASK: .net – asp.net based chat

Monday, November 12, 2012

.net – asp.net based chat – where to go from here?

I\’m building a very simple chat page on my website, here is what I have so far:

chat

And this is the code:


<asp:Content ID=\"Content2\" ContentPlaceHolderID=\"maincontent\" Runat=\"Server\">
    <script language=\"javascript\" type=\"text/javascript\">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(EndRequestHandler);

        function EndRequestHandler(sender, args) {
            document.getElementById(\'<%=FormView1.FindControl(\"chattxt\").ClientID%>\').focus(); 
        }
    </script>
    <div id=\"chatbg\">
    <asp:UpdatePanel ID=\"UpdatePanel1\" runat=\"server\">
    <ContentTemplate>
<div id=\"chatmessages\">
    <asp:Repeater ID=\"Repeater1\" runat=\"server\" DataSourceID=\"SqlDataSource1\">
    <ItemTemplate>
        <asp:Literal ID=\"Literal1\" runat=\"server\" Text=\'<%# Eval(\"Username\") %>\'></asp:Literal>: <asp:Literal ID=\"Literal2\" runat=\"server\" Text=\'<%# Eval(\"Message\") %>\'></asp:Literal><br />
    </ItemTemplate>
    </asp:Repeater>
</div>
    <asp:ListBox ID=\"ListBox1\" runat=\"server\" Rows=\"16\" CssClass=\"memberlist\"></asp:ListBox>
    </ContentTemplate>
    </asp:UpdatePanel>
        <asp:UpdatePanel ID=\"UpdatePanel2\" runat=\"server\" UpdateMode=\"Conditional\">
        <ContentTemplate>
        <asp:FormView ID=\"FormView1\" runat=\"server\" DefaultMode=\"Insert\"
        OnItemInserted=\"fv_ItemInserted\" RenderOuterTable=\"False\" 
            DataSourceID=\"SqlDataSource1\">
        <InsertItemTemplate>
            <asp:Panel ID=\"Panel1\" runat=\"server\" DefaultButton=\"Button1\">
            <asp:TextBox ID=\"chattxt\" runat=\"server\" CssClass=\"chattxtbox\"
            Text=\'<%# Bind(\"Message\") %>\' autocomplete=\"off\"></asp:TextBox>
        <asp:Button ID=\"Button1\" runat=\"server\" CommandName=\"insert\" style=\"display:none\" Text=\"Button\"/>
            </asp:Panel>
        </InsertItemTemplate>
        </asp:FormView>
        </ContentTemplate>
        </asp:UpdatePanel>
</div>
    <asp:SqlDataSource ID=\"SqlDataSource1\" runat=\"server\" 
        ConnectionString=\"<%$ ConnectionStrings:orangefreshConnectionString1 %>\" 
        InsertCommand=\"INSERT INTO [Chat] ([Username], [Message]) VALUES (@Username, @Message)\" 
        SelectCommand=\"SELECT [Id], [Username], [Message], [Date] FROM [Chat] ORDER BY [Id]\" >
        <InsertParameters>
            <asp:Parameter Name=\"Message\" Type=\"String\" />
            <asp:Parameter Name=\"Date\" Type=\"DateTime\" /> 
            <asp:SessionParameter Name=\"Username\" SessionField=\"Username\" Type=\"String\" />
        </InsertParameters>
    </asp:SqlDataSource>
    <script type=\"text/javascript\">
        function scrollpos() {
            var objDiv = document.getElementById(\"chatmessages\");
            objDiv.scrollTop = objDiv.scrollHeight;
        }


</script>
</asp:Content>

The script at the top of the page puts the focus back on my Textbox

after a postback.

The script at the bottom of the page makes sure the scroll on the message window is always at the bottom through post backs.

This is my codebehind:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Security;
using orangefreshModel;

public partial class chat : BasePage
{

    protected void Page_Load(object sender, EventArgs e)
    {
        Session[\"Username\"] = User.Identity.Name;
        ListBox1.Items.Clear();
        foreach (MembershipUser myuser in Membership.GetAllUsers())
            if (myuser.IsOnline == true)
            {
                ListBox1.Items.Add(myuser.ToString());

            }

        ScriptManager.RegisterStartupScript(
                            UpdatePanel1,
                            this.GetType(),
                            \"ScrollPos\",
                            \"scrollpos();\",
                            true);
    }

    protected void fv_ItemInserted(object sender, FormViewInsertedEventArgs e)
    {
        this.FormView1.DataBind();
    }
}

So all of this is working pretty good, the UpdatePanel ensures my messages popup straight away, the problem now is seeing other user messages. This is my first ever ASP.NET project, so I thought about cheesing it a bit and trying a Timer every second to repopulate my repeater… but to no success, and I don\’t think it\’s a wise solution at all:

First of all, the Timer affecting my Repeater window made it impossible for a user to scroll back up to read messages, seeing as it refreshed every second scrolling was just not possible.

Secondly, I never got it to work anyway, this is the event I tried for my Timer:


 protected void Timer1_Tick(object sender, EventArgs e)
        {
            this.Repeater1.DataSource = SqlDataSource1;
            this.Repeater1.DataBind();
        }

But yeah, no success.

This is where I\’m at right now with this chat: I can see my messages popping up fine, but now I need to figure out a way for my window to update as other users type their message, if some other user types a new message in, I need to send in my own message in order to see theirs.

I\’ve been browsing the web for a bit, read a few things about Signal R, but I was wondering if someone had simpler idea on where I should go with this, how to implement real time updates on my message window?

Rating: 3 out of 5 based on 4 ratings