Автор оригинала: FreeCodeCamp Community Member.
Нео Игодаро
Когда вы используете приложение чата, зная, когда человек, с которым вы общаетесь, это набрав сообщение, может улучшить ваш пользовательский опыт. Это дает вам некоторые отзывы, которые вы не одиноки в разговоре, и что сообщение идет на ваш путь.
В этом руководстве мы пройдем несколько простых шагов, чтобы создать эту функцию, используя C #, .NET и PUSHER.
В конце этого учебника у нас будет что-то подобное:
Это руководство предполагает предварительное знание:
- C #
- .Net mvc.
- JavaScript (jQuery)
Когда вы будете готовы, давайте начнем.
Настройка нашего проекта
Мы будем использовать Visual Studio , который является IDE, популярна для строительства проектов .NET. Visual Studio 2017 бесплатно и доступна для большинства операционных систем. Вы можете просмотреть подробности установки здесь Отказ
После установки Visual Studio запустите его и создайте новый проект, нажав Новый проект от приборной панели. После Новый проект Мастер мы:
- Установите C # как наш язык
- Выберите проект .NET MVC как шаблон
- Заполните название проекта (например, «Heychat» – но любое имя будет делать)
- Заполните имя решения (то есть имя приложения – «Heychat» или любое имя будет делать).
Написание кода Server-Side (C #)
Чтобы отобразить индикатор печати, наше приложение для чата необходимо иметь возможность распознавать, кто вписывает в любой момент времени. Для этого мы добавим некоторую ограниченную форму идентификации. Мы вообще не делаем аутентификацию, потому что этот учебник не требует этого.
Определение маршрута
Мы можем определить некоторые из маршрутов, которые нам нужно сделать эту функцию, которые являются:
- Домашний маршрут, который делает первую страницу, которая принимает имя пользователя.
- Автобусный маршрут, который принимает
ПостЗапрос имени пользователя. - Маршрут чата, который оказывает вид чата.
Чтобы добавить эти маршруты, мы открываем RouteConfig.cs Файл в App_start каталог нашего приложения. И в этом мы добавляем маршруты, которые мы определили.
routes.MapRoute( name: "Home", url: "", defaults: new { controller = "Home", action = "Index" } ); routes.MapRoute( name: "Login", url: "login", defaults: new { controller = "Login", action = "Index" } ); routes.MapRoute( name: "ChatRoom", url: "chat", defaults: new {controller = "Chat", action="Index"} );Используя Главная Маршрут в качестве образца, определение маршрута утверждает, что / Запросы будут обрабатываться Homecontroller который найден в Контроллеры/Homecontroller.cs Файл и Индекс Способ этого контроллера. Далее мы создадим контроллеры, которые нам понадобятся.
Создание контроллеров и методов действия
Чтобы создать новый контроллер, щелкните правой кнопкой мыши Контроллер каталог и выберите Добавить → Контроллер Отказ В полученной форме мы вводим имя нашего контроллера и выбираем пустой шаблон.
В нашем классе Logincontroller мы создаем метод индекса действия, указывающий [HttpPost] В верхней части метода действия указывают на то, что он обрабатывает Пост Запросы.
public class LoginController : Controller { [HttpPost] public ActionResult Index() {} }
Индексное действие LOGINCONTROLLER получит полезную нагрузку запроса, прочитайте имя пользователя из полезной нагрузки и назначьте ее на текущую сессию пользователей. Затем он перенасматривает наш пользователь на страницу чата. Когда мы добавляем это в наш метод действий, у нас будет:
public class LoginController : Controller { [HttpPost] public ActionResult Index() { string user = Request.Form["username"]; if (user.Trim() == "") { return Redirect("/"); } Session["user"] = user; return Redirect("/chat"); } }В нашем классе ChatController мы добавим метод действий индекса. Индексное действие ChatController окажет наш вид чата и пройдет вдоль текущего пользователя к представлению.
public class ChatController : Controller { public ActionResult Index() { if (Session["user"] == null) { return Redirect("/"); }ViewBag.currentUser = Session["user"];
return View (); } }
Давайте не будем забывать о нашем домашнем маршруте. В HomeController мы добавим код, чтобы сделать переднюю страницу.
public class HomeController : Controller { public ActionResult Index() { if ( Session["user"] != null ) { return Redirect("/chat"); }return View(); } }
На данный момент мы создали контроллеры и методы для обслуживания наших взглядов (которые мы еще не создали), поэтому пытаясь запустить, это даст вам некоторые ошибки! Давайте исправить это.
Реализация просмотров приложения
На основании маршрутов, которые мы определены до сих пор, нам понадобится два взгляда:
- Представление передней страницы с формой входа в систему – обслуживается
ИндексМетод действийHomecontrollerучебный класс - Вид чата, где будет замечена функция индикатора набора текста – обслуживается
ChatControllerкласс ‘ИндексМетод действий
Первая страница/страница входа
Для нашей первой страницы мы создадим страницу с формой, которая просит имя пользователя пользователя и показывает их кнопку для отправки для входа в систему. Ссылаясь на наш код контроллера:
public class HomeController : Controller { public ActionResult Index() { if ( Session["user"] != null ) { return Redirect("/chat"); } return View(); } }Создать наши Homecontroller Вид по умолчанию, мы:
- Щелкните правой кнопкой мыши каталог просмотров и выберите
Добавить новую папку, - Заполнить Главная как имя папки,
- Щелкните правой кнопкой мыши вновь созданные Главная папка и выберите
Добавить новый вид, - Заполните имя зрения (в нашем случае index ), выберите
БритваВ качестве двигателя View и нажмите OK.
Теперь, когда мы создали нашу первую страницу просмотра файла, мы добавим разметку для формы входа в систему.
Чат страницы
Мы создадим представление для страницы чата, следуя тем самым шагам, что и выше, но с использованием Чат как наше имя папки, а не Главная Отказ
В процессе чата мы добавляем разметку, чтобы дать нам боковую панель доступных пользователей и область для чата.
pChat — Private Chatroom @{ var currentUser = ViewBag.currentUser; } Did you see Avery's sword???
Err Looked normal to me...
maybe I'm a hater
Lmaooo
Мы используем Бритва шаблон двигателя , что дает нам возможность читать данные, переданные из кода C # и назначаем их переменным, которые можно использовать в нашем интерфейсе. Использование @ {var.currentUser} Мы прошли во имя текущего пользователя, который вскоре пригодится.
Теперь, когда у нас есть наши представления, мы можем перейти к нашей функции индикатора печати!
Реализация индикатора печати
Прослушивание события ввода
В большинстве приложений чата функция становится видимой, когда кто-то печатает. Чтобы реализовать его, мы начнем с прослушивания события ввода в области текста чата с помощью jQuery. Мы также передам CUNCEUSER Переменная, которую мы определили ранее с помощью бритвы на наш скрипт.
var currentUser = @currentUser;
$('#msg_box').on('keydown', function () { //stub });Мы добавили слушателю на КДУЩЬЮ Событие в нашей области печати, чтобы помочь нам мониторировать, когда кто-то печатает.
Теперь, когда мы создали наших слушателей, мы заставим их отправить сообщение о том, что кто-то печатает к другим членам чата. Для этого мы создадим конечную точку в нашем коде C #, чтобы получить этот запрос и транслировать его через толкатель.
Мы реализуем весь код клиента (при условии, что наш C # конечная точка существует, то мы будем на самом деле создать конечную точку позже).
// Debounce function // Credit: https://davidwalsh.name/javascript-debounce-function
// Returns a function, that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. If `immediate` is passed, trigger the function on the // leading edge, instead of the trailing. function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; };Теперь, когда у нас есть Дебати Функция, мы создадим функцию обратного вызова для нашего КДУЩЬЮ событие:
var isTypingCallback = debounce( function() { $.post('/chat/typing', { typer: currentUser, }); }, 600, true);и пройти обратный вызов нашим слушателям событий.
$('#msg_box').on('keydown',isTypingCallback);Создание конечной точки, вызванное событием ввода
Ранее у нас были слушатели событий отправьте Пост Запрос на /Чат/Набрав Маршрут на стороне клиента. Теперь мы создадим этот маршрут, который передаст событие ввода на другие пользователи клиента, используя Толкатель Отказ
Во-первых, мы создадим маршрут для конечной точки в нашем RouteConfig.cs файл.
... routes.MapRoute( name: "UserTyping", url: "chat/typing", defaults: new { controller = "Chat", action = "Typing" } );Далее мы создадим наш метод действий ввода в ChatController :
[HttpPost] public ActionResult Typing() { //stub }Используя Pusher, чтобы сделать наше обновление приложения в реальном времени
Наше /` Чат / Конечная точка набора текста получит полезную нагрузку пользователя, который делает набор текста. Мы собираемся использовать Толкатель передавать это всем остальным.
На нашем толчке Приборная панель , мы создадим новое приложение, заполняющее запрошенную информацию – имя приложения, Tech Tech и т. Д. Вы можете Регистрация бесплатно Если у вас нет учетной записи. Далее мы устанавливаем Pusher Server Пакет в нашем коде C # Использование Nuget, менеджер Packer для .NET.
Тогда мы добавим эфирное вещание нашему Набрав событие действий. Использовать толкатель, нам придется импортировать Pusher Server пространство имен в наш код.
... using PusherServer;
namespace HeyChat.Controllers { public class ChatController : Controller { ... [HttpPost] public ActionResult Typing() { string typer = Request.Form["typer"]; string socket_id = Request.Form["socket_id"];var options = new PusherOptions(); options.Cluster = "PUSHER_APP_CLUSTER";
var pusher = new Pusher( "PUSHER_APP_ID", "PUSHER_APP_KEY", "PUSHER_APP_SECRET", options);
pusher.TriggerAsync( "chat", "typing", new { typer = typer }, new TriggerOptions() { SocketId = socket_id });return new HttpStatusCodeResult(200); } ...
Мы инициализировали Pusher, используя наши Pusher_app_id , Pusher_app_key , Pusher_app_secret и Pusher_app_cluster (Обязательно замените их фактическими значениями с вашей приборной панели). Затем мы транслируем объект, содержащий Типер – который печатает лицо – на Набрав событие через Чат канал.
Теперь, когда есть событие ввода, наш C # код трансляции его на толкатель. Все, что осталось, это слушать эту трансляцию и отобразить функцию «XXXX».
Во-первых, мы инициализируем Pusher в разделе скрипта нашей страницы чата, используя наш Pusher_app_key и Pusher_app_cluster (Еще раз, замените их значениями с вашей приборной панели).
var pusher = new Pusher('PUSHER_APP_KEY', { cluster:'PUSHER_APP_CLUSTER' });Для реализации исключения вещателя мы упомянули ранее, мы получим идентификатор сокета от нашего клиента толкатель Экземпляр и изменить нашу полезную нагрузку для запроса на тексте на сервер, чтобы включить его.
var socketId = null; pusher.connection.bind('connected', function() { socketId = pusher.connection.socket_id; }); var isTypingCallback = debounce( function() { $.post('/chat/typing', { typer: currentUser, socket_id: socketId // pass socket_id parameter to be used by server }); }, 600, true);Теперь, когда толкатель инициализируется на нашей стороне клиента, мы будем подписаться на канал чата и реализовать нашу функцию, используя Типер прошедший.
var channel = pusher.subscribe('chat'); channel.bind('typing', function(data) { $('#typerDisplay').text( data.typer + ' is typing...'); $('.chat__typing').fadeIn(100, function() { $('.chat__type__body').addClass('typing_display__open'); }).delay(1000).fadeOut(300, function(){ $('.chat__type__body').removeClass('typing_display__open'); }); });Вывод
В этом руководстве мы проходили через реализацию популярной функции индикатора набора набора, используя Code Pusher, .NET, C # и какой-то jQuery. Мы также видели, как передавать сообщения и избежать отправителя, отвечаю на сообщение, которое они отправили.
Этот пост был впервые опубликован в Толкатель Отказ