Введение:
Мой первый простой чат был написан на ASP 3.0. Это не более чем два текстовых поля, они отправляют сообщения в переменные программы, а затем отображают их на странице, которая обновляется каждую секунду. В ту эпоху настоящий чат должен был использовать Java-апплет или элемент управления ActiveX. Но все изменилось с появлением AJAX. AJAX — это асинхронный механизм связи, сочетающий XML и JavaScript. Теперь мы можем сделать это, используя только серверный код и немного JavaScript. В этой статье рассказывается, как использовать технологию AJAX для создания простого чата.
Пример программы
Пример программы представляет собой единый многопользовательский чат. Он поддерживает внутренний список вошедших в систему пользователей. Из списка будут удалены пользователи с истекшим сроком сеансов. В то же время он также поддерживает некоторые команды, такие как /admin Очистить, чтобы очистить комнату чата /ник [Имя] для изменения имени пользователя.
Вам также необходимо знать, что
эта программа использует класс ChatEngine. Этот класс управляет всеми пользователями и сообщениями. Пользователи хранятся в Hashtable, а сообщения хранятся в StringCollection:
пользователи Hashtable;StringCollection Chat;
Глобальный экземпляр ChatEngine помещается в Global.asax.cs:
public static UChat.ChatEngine.IChatEngine Engine =new UChat.ChatEngine.ChatEngine();
Функция JavaScript используется для асинхронного отображения данных в глобальной переменной на странице:
function setTimers(){timeID = window.setTimeout( "updateAll()",refreRate );}
Используйте имя и идентификатор, предоставленные каждым пользователем, для идентификации пользователей:
public void AddUser(string id, string user){//убедитесь, что имя пользователя уже не существует, если(!UserExists(user)){//добавьте пользователя в список пользователейusers. Add( id, user );//отображаем уведомление всем пользователям в чате.Add( this.MakeServerMessage(string.Format(joinedfmt, user ) ));}}
Скриншоты и этапы реализации
На домашней странице отображается основная информация о чате, например количество людей в чате и размер журнала чата.
Чтобы иметь возможность войти в чат, необходимо указать имя.
При нажатии кнопки «Войти». Будет выполнен следующий код
: = "Пользователь с таким " +" именем уже существует, попробуйте еще раз.»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. Будет выполнен следующий код:
// Зафиксируйте клавишу ввода в поле ввода и опубликуйте сообщение function captureReturn( event ){if(event.that || event.keyCode){if ((event.that == 13) || ( event.keyCode == 13)){postText();return false;}else {return true;}}}function postText(){rnd++;//Сначала очистить текстовое полеchatbox = getElement( "mytext" );chat = Chatbox . value;chatbox.value = ""//получить GUID пользователя из urluserid = location.search.substring( 1, location.search.length );//создать Ajax-сервер URLurl = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' +encodeURIComponent(chat) + '&session=' + rnd;//Создаем и устанавливаем экземпляр //соответствующего объекта XMLHTTP-запросаreq = getAjax();//Обновляем страницу новым messagereq.onreadystatechange = function() {if(req.readyState == 4 && req.status == 200) {updateAll();}}req.open('GET', url, true);req.send(null);}
Сделанный! Вот и все. Ничего особенного, скачайте пример программы и разберитесь в коде!
Автор оригиналаДахан Абдо
Переведенный
адрес оригинальной статьи
yueue, образец программы для загрузки:
локальная загрузка
codeproject