소개:
나의 첫 번째 간단한 대화방은 ASP 3.0으로 작성되었습니다. 두 개의 TextBox에 지나지 않으며 프로그램 변수에 메시지를 보낸 다음 매초마다 새로 고쳐지는 페이지에 표시합니다. 그 시대에는 실제 채팅방에서는 Java Applet이나 ActiveX 컨트롤을 사용해야 했습니다. 그러나 AJAX가 등장한 후 모든 것이 바뀌었습니다. AJAX는 XML과 JavaScript를 결합한 비동기 통신 메커니즘입니다. 이제 서버 코드와 약간의 JavaScript만으로 이를 수행할 수 있습니다. 이 기사에서는 AJAX 기술을 사용하여 간단한 채팅방을 구축하는 방법을 소개합니다.
샘플 프로그램
샘플 프로그램은 단일 다중 사용자 채팅방입니다. 내부적으로 로그인한 사용자 목록을 유지 관리합니다. 목록은 세션이 만료된 사용자를 제거합니다. 동시에 채팅방을 지우는 /admin Clear와 같은 일부 명령도 지원합니다. /nick [이름]을 사용하여 사용자 이름을 변경합니다.
또한이 프로그램이 ChatEngine이라는 클래스를 사용한다는
것도 알아야 합니다
.이 클래스는 모든 사용자와 메시지를 제어합니다. 사용자는 Hashtable에 저장되고 메시지는 StringCollection에 저장됩니다.
Hashtable users;StringCollection chat;
ChatEngine의 전역 인스턴스는 Global.asax.cs에 배치됩니다.
public static UChat.ChatEngine.IChatEngine Engine =new UChat.ChatEngine.ChatEngine();
JavaScript 함수는 페이지의 전역 변수에 있는 데이터를 비동기적으로 표시하는 데 사용됩니다.
function setTimers(){timeID = window.setTimeout( "updateAll()",refreshRate );}
각 사용자가 제공한 이름과 ID를 사용하여 사용자를 식별합니다.
public void AddUser(string id, string user){//사용자 이름이 이미 존재하지 않는지 확인합니다if(!UserExists(user)){//사용자 목록users에 사용자를 추가합니다. Add( id, user );//모든 사용자에게 알림 메시지 표시 chat.Add( this.MakeServerMessage(string.Format(joinedfmt, user ) ));}}
스크린샷 및 구현 단계
홈페이지에는 채팅방 인원수, ChatLog 크기 등 채팅방의 기본 정보가 표시됩니다.
채팅방에 로그인하려면 이름을 입력해야 합니다.
로그인 버튼을 클릭했을 때. 다음 코드가 실행됩니다:
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 키를 캡처하고 메시지 게시함수 CaptureReturn( event ){if(event.which || event.keyCode){if ((event.which == 13) || ( event.keyCode == 13)){postText();return false;}else {return true;}}}function postText(){rnd++;//텍스트 상자 지우기 firstchatbox = getElement( "mytext" );chat = chatbox . value;chatbox.value = ""//urluserid에서 사용자 GUID 가져오기 = location.search.substring( 1, location.search.length );//Ajax 서버 URL 구성url = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' +encodeURIComponent(chat) + '&session=' + rnd;//적절한 XMLHTTP 인스턴스 생성 및 설정 //Request objectreq = getAjax();//새 메시지로 페이지 업데이트req.onreadystatechange = function( ) {if( req.readyState == 4 && req.status == 200 ) {updateAll();}}req.open( 'GET', url, true );req.send( null );}
완료! 그게 다야. 특별한 것은 없습니다. 샘플 프로그램을 다운로드하고 코드를 이해해보세요!
원저자Dahan Abdo
번역된 yueue
원문 주소
다운로드 샘플 프로그램:
codeproject
로컬 다운로드