はじめに:
私の最初のシンプルなチャット ルームは ASP 3.0 で作成されました。これは 2 つの TextBox にすぎません。メッセージをプログラム変数に送信し、毎秒更新されるページにメッセージを表示します。当時、実際のチャット ルームでは Java アプレットまたは ActiveX コントロールを使用する必要がありました。しかし、AJAX の登場によって状況はすべて変わりました。 AJAX は、XML と JavaScript を組み合わせた非同期通信メカニズムです。今では、サーバー コードと少しの JavaScript だけでそれを行うことができます。この記事では、AJAX テクノロジーを使用して簡単なチャット ルームを構築する方法を紹介します。
サンプル プログラム
サンプル プログラムは、単一のマルチユーザー チャット ルームです。ログインしているユーザーのリストを内部的に維持します。リストからセッションの有効期限が切れたユーザーが削除されます。同時に、チャット ルームをクリアする /admin Clear、ユーザー名を変更する /nick [Name] などのコマンドもサポートしています。
このプログラムは ChatEngine というクラスを使用している
ことも知っておく必要があります
。このクラスはすべてのユーザーとメッセージを制御します。ユーザーはハッシュテーブルに保存され、メッセージは StringCollection:
ハッシュテーブル ユーザー;StringCollection チャット;
に保存されます。
ChatEngine のグローバル インスタンスは Global.asax.cs に配置されます。
public static UChat.ChatEngine.IChatEngine Engine =new UChat.ChatEngine.ChatEngine();
JavaScript 関数を使用して、グローバル変数内のデータをページに非同期的に表示します。
function setTimers(){timeID = window.setTimeout( "updateAll()", freshRate );}
各ユーザーが指定した名前と ID を使用してユーザーを識別します。
public void AddUser(string id, string user){//ユーザー名が既に存在しないことを確認しますif(!UserExists(user)){//ユーザーをユーザー listusers に追加します。 Add( id, user );//すべてのユーザーに通知メッセージを表示する chat.Add( this.MakeServerMessage(string.Format(joindfmt, user ) ));}}
スクリーンショットと実装手順
ホームページには、チャット ルームの人数やチャットログのサイズなど、チャット ルームの基本情報が表示されます。
チャット ルームにログインするには、名前を入力する必要があります。
「ログイン」ボタンをクリックしたとき。次のコードが実行されます。
protected void Login( object sender, EventArgs e ){string user = txtUsername.Text;if( !ValidateNick( user ) ) return;if( Global.Engine.UserExists( user ) ){lblErrorMsg. = "この名前のユーザーは既に存在します。もう一度お試しください。"return;}Response.Redirect( "Server.aspx?action=Login&u=" + user );}
いくつかの検証の後、ユーザーは、AddUser 関数を使用してユーザーをユーザー リストに追加する別のページにリダイレクトされます。これがすべて完了したら。ユーザーは Chat.aspx ページにリダイレクトされ、このページで次の JavaScript 関数が実行されます。
<script type="text/javascript">sniffBrowserType();//読み込み中を表示します。screenshowLoadScreen();//JavaScript タイマーを設定し、 //ユーザー リストとメッセージを読み込みます setTimers();setFocus('mytext');< /script><input type="text" class="mytext"id="mytext" onkeydown="captureReturn(event)">
ユーザーがテキストを入力して Enter キーを押したとき。次のコードが実行されます。
// 入力ボックスの Enter キーをキャプチャし、メッセージをポストしますfunction CaptureReturn(event){if(event.that ||event.keyCode){if((event.that == 13) || ( event.keyCode == 13)){postText();return false;}else {return true;}}}function postText(){rnd++;//テキスト ボックスをクリア firstchatbox = getElement( "mytext" );chat = chatbox 。 value;chatbox.value = ""//urluserid = location.search.substring( 1, location.search.length )からユーザー GUID を取得;//Ajax サーバー URL を構築url = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' +encodeURIComponent(chat) + '&session=' + rnd;//適切な XMLHTTP リクエスト object のインスタンスを作成して設定しますreq = getAjax();// 新しいメッセージでページを更新req.onreadystatechange = function( ) {if( req.readyState == 4 && req.status == 200 ) {updateAll();}}req.open( 'GET', url, true );req.send( null );}
終わり！それだけです。特別なことは何もありません。サンプル プログラムをダウンロードしてコードを理解してください。
原作者Dahan Abdo
翻訳されたyueue
原文アドレス
ダウンロードサンプルプログラム：
codeproject
ローカルダウンロード