使用 Ajax 和 ASP.NET 创建聊天系统
本文解释了如何使用 Ajax 在 ASP.NET 中制作聊天应用程序
引言
我一直在想，如何在没有 Flash 的情况下制作一个自动刷新聊天室。自从我在 CodeProject 上阅读了大量文章后，我发现我应该使用 ASP.NET 和 Ajax。 因此，我结合了 Albert Pascual 和 dealarconjose 的作品，并加入了一些我自己的想法和代码，你将在本文中找到。
在这里，我将解释如何使用 JavaScript、Ajax 和 C# 创建一个聊天室。
为什么选择 Ajax 以及如何在 ASP.NET 中使用它？
为什么选择 Ajax？
我的理解是，你现在可以使用 JavaScript 代码来实现 C# 或 VB.NET 代码，
并在不刷新页面的情况下更新内容（实际上不是没有刷新，只是刷新了
页面而没有 Flash）。
有关更多详细信息，请参阅 此链接。
如何使用？
请参考 此。
查看代码
1. ChatEngine.cs
部分想法来自 Albert Pascual 的文章。 此代码用于管理数组列表中的聊天内容。
//Part of the code is referenced from
//https://codeproject.org.cn/aspnet/SimpleChat.aspx Author: Albert Pascual
//Good job~man~:)
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections;
namespace Chat
{
/// <summary>
/// Summary description for ChatEngine
/// </summary>
public class ChatEngine
{
public ChatEngine()
{
//
// TODO: Add constructor logic here
//
}
static protected ArrayList pArray = new ArrayList();
[Ajax.AjaxMethod]
public void AddMessage(string sUser, string sMsg)
{
string sAddText = "<STRONG>" + sUser + " says :" + "</STRONG>" + sMsg;
pArray.Add(sAddText);
if (pArray.Count > 200)
{
pArray.RemoveRange(0, 10);
}
}
[Ajax.AjaxMethod]
public string GetAllMessages()
{
string sResponse = "";
for (int i = 0; i < pArray.Count; i++)
{
sResponse = sResponse + "<BR>" + pArray[i].ToString();
}
return (sResponse);
}
//add the join message to the array list
public void joinRoom(string sUser)
{
string sAddText = "<STRONG>" + sUser + " has joined the room" + "</STRONG>";
pArray.Add(sAddText);
}
//add the leave message to the array list
public void leaveRoom(string sUser)
{
string sAddText = "<STRONG>" + sUser + " has Leaved the room" + "</STRONG>";
pArray.Add(sAddText);
}
public bool check()
{
if (pArray.Count == 0)
{
return false;
}
else
{
return true;
}
}
[Ajax.AjaxMethod]
public void Clean()
{
pArray.Clear();
}
}
}
2. CustomerManagement.cs
此代码用于管理数组列表中的用户
//This code idea is from https://codeproject.org.cn/aspnet/SimpleChat.aspx
//Author: Albert Pascual
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections;
namespace Chat
{
/// <summary>
/// Summary description for CustomerManagement
/// </summary>
public class CustomerManagement
{
private ChatEngine c = new ChatEngine();
public CustomerManagement()
{
//
// TODO: Add constructor logic here
//
}
static protected ArrayList cArray = new ArrayList();
[Ajax.AjaxMethod]
public void AddCustomer(string sUser)
{
string cAddText = "<STRONG>" + sUser + "</STRONG>";
cArray.Add(cAddText);
if (cArray.Count > 200)
{
cArray.RemoveRange(0, 10);
}
}
[Ajax.AjaxMethod]
public string GetAllUsers()
{
string cResponse = "";
for (int i = 0; i < cArray.Count; i++)
{
cResponse = cResponse + "<BR>" + cArray[i].ToString();
}
return (cResponse);
}
public bool CheckUser(string Username)
{
if (cArray.Contains("<STRONG>" + Username + "</STRONG>"))
{
return true;
}
else
{
return false;
}
}
[Ajax.AjaxMethod]
public void SignOut(string Username)
{
if (cArray.Contains("<STRONG>" + Username + "</STRONG>"))
{
cArray.Remove("<STRONG>" + Username + "</STRONG>");
c.leaveRoom(Username);
}
}
public void clean()
{
cArray.Clear();
}
}
}
3. Default.aspx.cs
这里没有什么可解释的，只是一个 JavaScript 代码，用于在新窗口中打开聊天室，没有工具栏和菜单栏，目的是阻止用户刷新页面。
private static SqlConnection myConnection =
new SqlConnection("server=(local);database=mySystem;Trusted_Connection=true");
private SqlCommand myCommand;
private SqlDataAdapter myAdapter;
private string command;
private DataSet myDataSet;
private Chat.CustomerManagement c = new Chat.CustomerManagement();
private Chat.ChatEngine cc = new Chat.ChatEngine();
protected void btnJoin_Click(object sender, EventArgs e)
{
if (getUser(txtUserName.Text, txtPassword.Text))
{
if(c.CheckUser(txtUserName.Text))
{
lblError.Text = "You are in the chat room already!";
}
else
{
c.AddCustomer(txtUserName.Text);
cc.joinRoom(txtUserName.Text);
Session["UserName"] = txtUserName.Text;
//open a new window without toolbar and menubar
Response.Write("<script language="\""javascript\">" + "\n");
Response.Write("window.open(\"Chat.aspx\",\"chat\",
\"width=800\",\"height=600\",\"toolbar=no\",
\"menubar=no\")" + "\n</script>");
}
}
else
{
lblError.Text = "Login Failed";
}
}
private bool getUser(string UserName, string password)
{
DataTable UserInfo = new DataTable();
try
{
command = "Select * From Customer where UserName = '" +
UserName + "' and Password = '" + password + "'";
myAdapter = new SqlDataAdapter(command, myConnection);
myDataSet = new DataSet();
myAdapter.Fill(myDataSet,"User");
UserInfo = myDataSet.Tables[0];
if (UserInfo.Rows.Count != 0)
{
return true;
}
else
{
return false;
}
}
catch(Exception e)
{
UserInfo = null;
return false;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
c.clean();
}
4. Chat.aspx 和 Chat.aspx.cs
//Chat.aspx.cs
Chat.ChatEngine engine = new Chat.ChatEngine();
protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(Chat.ChatEngine));
Ajax.Utility.RegisterTypeForAjax(typeof(Chat.CustomerManagement));
if (Session["UserName"] == null)
{
Response.Write("<script language="\""javascript\">" + "\n");
Response.Write("alert(\"Please Login First\")" + "\n</script>");
Response.Write("<script language="javascript">
window.location.href='default.aspx';</script>");
}
}
所有的魔力都在 JavaScript 部分。 请阅读我在代码中编写的命令。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Chat System</title>
<script language="javascript" src="ajax/common.ashx"></script>
<script language="javascript" src="ajax/Chat.ChatEngine,ChatEngine.ashx"></script>
<script language="javascript"
src="ajax/Chat.CustomerManagement,CustomerManagement.ashx"></script>
<script language="JavaScript">
//No right click code start(for no refresh the page purpose)
var oLastBtn=0;
bIsMenu = false;
if (window.Event)
{
document.captureEvents(Event.MOUSEUP);
}
function nocontextmenu()
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
function norightclick(e)
{
if (window.Event)
{
if (e.which !=1)
return false;
}
else
if (event.button !=1)
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
}
document.oncontextmenu = nocontextmenu;
document.onmousedown = norightclick;
//no right click end
//ajax using C# function to get the chat content
function dameMsg_CallBack(response){
document.getElementById('ChatContent').innerHTML = response.value;
setTimeout("ChatEngine.GetAllMessages(dameMsg_CallBack)",1000);
}
function cleanTxt(){
document.getElementById('txtMsg').value = '';
}
//ajax using C# function to get the online users
//the idea is from simplechat.asp Autor: dealarconjose
function customer_CallBack(response){
document.getElementById('CustomerContent').innerHTML = response.value;
setTimeout("CustomerManagement.GetAllUsers(customer_CallBack)",1000);
}
function username(){
var uname = '<%= Session["UserName"]%>';
document.getElementById('HidedUserName').value = uname;
}
//auto scrolling the chat content
function scroll(){
if(document.getElementById('ckAutoScroll').checked==true)
{
var objDiv = document.getElementById('ChatContent');
objDiv.scrollTop = objDiv.scrollHeight;
}
setTimeout("scroll()",1);
}
function load() {
window.location="default.aspx";
}
//if close button clicked sign the user out **start**
var UserClicked=false;
document.onmousedown=spyclick;
function spyclick()
{
UserClicked=true;
setTimeout("UserClicked=false",1);
}
function popup()
{
if(!UserClicked)
{
CustomerManagement.SignOut
(document.getElementById('HidedUserName').value);
}
}
window.onbeforeunload=popup;
//**end**
function document.onkeydown(){
//if alt + F4 pressed sign the user out
if ((window.event.altKey)&&(window.event.keyCode==115))
{
CustomerManagement.SignOut
(document.getElementById('HidedUserName').value);
return false;
}
//block F5, no refresh
if(window.event.keyCode==116)
{
event.keyCode=0;
event.returnValue = false;
}
//block Ctrl + R, no refresh
if ((window.event.ctrlKey)&&(window.event.keyCode==82))
{
event.keyCode=0;
event.returnValue = false;
}
//if enter pressed, press Tab key instead
if (event.keyCode==13)
{
event.keyCode=9;
event.returnValue = false;
}
//block ctrl + N, no new window
if ((window.event.ctrlKey)&&(window.event.keyCode==78))
{
event.keyCode=0;
event.returnValue = false;
}
}
</script>
</head>
<body onload="ChatEngine.GetAllMessages(dameMsg_CallBack),scroll(),
CustomerManagement.GetAllUsers(customer_CallBack),
username()" oncontextmenu="event.returnValue = false">
<form id="form1" runat="server" method="post">
<div runat="server" id="ChatContent" style="height:300px;
width:600px;padding:6px;overflow-y:scroll;word-break:
break-all;overflow:auto;"></div>
<div runat="server" id="CustomerContent"
style="height:300px;width:200px;padding:6px;overflow-y:scroll;
word-break: break-all;overflow:auto; position:absolute;
left:620px;top:14px"></div>
Message:<input type="text" id="txtMsg" name="txtMsg"
size="25" onkeydown="if(window.event.keyCode==13) btnSubmit.click()"/>
<!-- ajax using C# function of AddMessage() -->
<input id="btnSubmit" type="button" value="Submit"
onclick="javascript:ChatEngine.AddMessage
(document.getElementById('HidedUserName').value,
document.getElementById('txtMsg').value),cleanTxt()"/>
Auto Scrolling<input id="ckAutoScroll" type="checkbox" checked /><br />
<input id="HidedUserName" type="hidden" value="" />
<br />
<!-- ajax using C# function of Clean() -->
<input id="btnClean" type="button"
value="Clean Screen"onclick="javascript:ChatEngine.Clean();"/>
<!-- ajax using C# function of SignOut() -->
<input id="Button1" type="button"
value="Sign Out"onclick="javascript:CustomerManagement.SignOut
(document.getElementById('HidedUserName').value);javascript:load()"/>
</form>
</body>
</html>
结论
这只是一个简单的聊天室，而不是一个高性能的魔法系统。 希望它能给你一些帮助或提示。 如果您有任何问题，请随时告诉我。