我正在我的网站上构建一个非常简单的聊天页面,这是我目前所拥有的:
这是代码:
<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>
- 页面顶部的脚本在回发后将焦点重新放在我的文本框上。
- 页面底部的脚本通过回发确保消息窗口上的滚动始终位于底部。
这是我的代码隐藏:
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();
}
}
所以这一切工作得很好,UpdatePanel 确保我的消息立即弹出,现在的问题是看到其他用户消息。这是我的第一个 ASP.NET 项目,所以我考虑过一点,并尝试每秒尝试一个 Timer 来重新填充我的中继器......但没有成功,我认为这根本不是一个明智的解决方案:
首先,影响我的中继器窗口的计时器使用户无法向上滚动以阅读消息,因为它每秒刷新一次滚动是不可能的。
其次,无论如何我从来没有让它工作,这是我为我的计时器尝试的事件:
protected void Timer1_Tick(object sender, EventArgs e)
{
this.Repeater1.DataSource = SqlDataSource1;
this.Repeater1.DataBind();
}
但是,是的,没有成功。
这就是我现在与这个聊天的地方:我可以看到我的消息弹出很好,但现在我需要想办法让我的窗口在其他用户输入他们的消息时更新,如果其他用户输入一个新的消息,我需要发送自己的消息才能看到他们的消息。
我一直在浏览网页,阅读了一些关于 Signal R 的内容,但我想知道是否有人对我应该去哪里有更简单的想法,如何在我的消息窗口上实现实时更新?