私は自分のウェブサイトに非常にシンプルなチャットページを作成しています。これまでのところ、次のようになっています。
そしてこれはコードです:
<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プロジェクトなので、少しだけそれを応援し、毎秒タイマーを試してリピーターを再作成することを考えました...しかし成功せず、それは賢明な解決策ではないと思います:
まず第一に、私のリピーターウィンドウに影響を与えるタイマーは、ユーザーがメッセージを読むために上にスクロールすることを不可能にしました。
第二に、私はとにかくそれを動作させることができませんでした、これは私が私のタイマーのために試したイベントです:
protected void Timer1_Tick(object sender, EventArgs e)
{
this.Repeater1.DataSource = SqlDataSource1;
this.Repeater1.DataBind();
}
しかし、ええ、成功しません。
これが私が今このチャットをしているところです:メッセージがうまくポップアップするのを見ることができますが、他のユーザーが新しいメッセージを入力した場合に、他のユーザーがメッセージを入力したときにウィンドウを更新する方法を理解する必要がありますメッセージを入力します。彼らのメッセージを表示するには、自分のメッセージを送信する必要があります。
私は少しの間Webを閲覧していて、Signal Rについていくつか読んでいますが、誰かがこれをどこに行けばいいのか、メッセージウィンドウにリアルタイム更新を実装する方法についてもっと簡単なアイデアがあるのではないかと思っていました。