Рубрики
Без рубрики

Newbie Guide: код в чате приложение с Socket.IO

Newbie Guide: код в чате приложение с Socket.IO

Автор оригинала: Kauress.

Гид

  1. Часть 1 здесь
  2. Вступление
  3. Особенности приложения чата
  4. Socket.io Методы
  5. События Socket.io.
  6. Функции обратного вызова
  7. Структура каталогов
  8. До сих пор..
  9. Настройка index.html и style.css
  10. Отправка сообщения от клиента на сервер
  11. Получение сообщения от клиента на сервере
  12. Отображение сообщения всем подключенным клиентам
  13. Вещание «Пользователь печатает …» сообщение
  14. Показать поздравительное сообщение, когда кто-то присоединяется к чату
  15. Показывая общее количество пользователей

1. Введение

Собирать из Часть 1 Этот руководство будет сосредоточиться на создании приложения чата под названием «Kidda Fer» [Что случилось в Punjabi].

2. Особенности приложения чата

Особенности приложения чата в этом руководстве будут:

  1. Поздравительное сообщение для пользователя при подключении 🙂
  2. Пользователи/пользователя отправляют сообщение в чате, который отображается немедленно всем пользователям [aka в чате ] 💻
  3. Когда пользователь набирает сообщение, сервер передает: «Пользователь:» набрал …. «Сообщение всем другим пользователям ⌨️
  4. Отображать количество подключенных пользователей на панели 🌎

3. Socket.io Методы

Объект Socket использует Socket.IO для отслеживания данного соединения сокета в любой конкретный экземпляр. Объект Socket имеет методы и свойства, которые вы можете получить доступ и использовать.

Объекты представляют собой коллекцию свойств I.E. Пары ключевых ценностей. Свойство может быть описано как переменная, связанная с объектом, который может ссылаться на любой тип данных (примерных строк, номера, логические значения и т. Д.). Метод – это функция объекта, в нашем случае это <код> сокета объект.

Некоторые примеры сокета методы и свойства:

Socket.emit () [излучает событие всем связанным клиентам] Socket.id [Доступ к уникальному идентификатору соединения сокета]
Socket.join () [Подписывает сокет до указанного чата] розетка. Подключение [возвращает True или False]
Socket.Send () [отправляет сообщения, которые принимаются с помощью события «сообщения»] Socket.Disconnected [Возвращает true of false]
Socket.ON () [Этот метод принимает функцию Eventname и обратного вызова в качестве параметров)] Socket.CustomProperty [Установите пользовательское свойство на объекте гнезда]

Newbie Примечание. Обратите внимание, что метод сокета распознается скобками «()», тогда как вы просто доступаете в систему Socket объектов объекта через нотацию DOT.

Давайте посмотрим на Socket.io Properties:

console.log(socket.connected);
console.log(socket.id);
console.log(socket.disconnected);

Возвращает:

true
CYpR8HOx2dECnJy0AAAA
false

Эти методы Socket.io принимают 2 аргумента:

  • Имя события
  • Функция обратного вызова

Давайте перейдем к обсуждению событий Socket.io.

4. События Socket.io

Поскольку это приложение для чата, нам гарантированно, например, «события», такие как подключение, отключение, воссоединение или даже присоединение к определенному чату в главном канале.

Поскольку Socke.io предоставляет как сервер, так и клиентский API, мы должны заботиться о событии с обеих сторон.

Возьмите, например, наш код в Index.js из предыдущего учебника, в котором мы создали сервер и:

//declare var io which is a reference to a socket connection made on the server
var io= socket(server);

//Then use the io.on method which looks for a connection
//upon a connection execute a callback function which will console.log something
io.on('connection', function(){
  console.log('made socket connection');
});

Соединение IO.ON события «обрабатывает соединение». В этом случае мы ссылаемся на любые соединения, инициированные на стороне сервера с var io . И ON «Соединение»> «Соединение», которое мы хотим запустить функцию обратного вызова, которая будет консоль.

Принципиально «выбросы» и «на» методы ответственны за «общение». Это путем отправки сообщений через метод Emit и прослушивание испускаемых сообщений с методом «ON».

Есть зарезервированные серверные и клиентские боковые события. Некоторые из них:

Соединять Соединять
Подчеркивать Отключить
Присоединяйтесь к
Подчеркивать

Синтаксис такой, что кажется, что вы слушаете и запускаете события. Эти события обрабатываются Socket.io Server и Side Methods.

5. Функции обратного вызова

Как указано выше, методы Socket.iO, используют событие и функцию обратного вызова в качестве аргументов. Если вы хотите знать, какие функции обратного вызова вы можете прочитать этот маленький лист здесь Отказ

Для нас, по сути, функция обратного вызова – это то, что запускается в ответ на некоторое событие, такое как «соединение» или «отключение» события.

6. Структура каталогов

Ваша структура каталогов будет выглядеть так. Так же, как из Часть 1. Chat_app ├── osode_modules ├── Государственный │ └── index.html │ └── style.css │ └── Chat.js ├── index.js ├── Package.json.

Файлы, с которыми мы начали работать, являются index.js, который содержит наш серверный код и Chat.js, который содержит код бокового клиента.

7. До сих пор ..

В последнем руководстве мы настроили все наши зависимости, используемые Express.js, чтобы сделать сервер, включал ссылку на библиотеку Socket.IO в Index.html, а затем настроить Socket.io на сервере, так и на сторонах клиента <код > Требуется это.

Ваш код должен выглядеть так далеко:

Примечание: я ранее использовал ‘var’ вместо const

index.js.

const express = require('express');
const socket = require('socket.io')
let clients = 0;

const app = express();
const server = app.listen(4000, function(){
    console.log('listening for requests on port 4000,');
});

app.use(express.static('public'));

const io= socket(server);

Chat.js.

const io= socket(server);

io.on('connection', function(){
  console.log('made socket connection');
});

index.html.




    
        
        Newbie Guide
       
        
    
    
        
Socket.io

8. Настройте index.html и style.css

Настройте index.html как:




   
      
      
      
      
      
      #KIDDAFER
      
      
      
      
      
      
   
   
      

         

            

               

                  

                     
#hundas

                  

                  

                     
 

                     
Kidda Fer?

Настройте style.css как таковые:

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body{
  font-family: Montserrat, sans-serif;
  color: #FFFFFF;
  background-color: #23272A;
  overflow-x: hidden;
}

.header-container{
  background-image: url("images/kidda.png");
  height:150px;
  border-top: 3px solid #23272A;

}
.header-text{
  text-transform: uppercase;
  font-weight: 900;
  opacity: 0.7;
}

#main-output{
  background-color: #2C2F33;
}
#output{
  height: 450px;
  overflow-y: scroll;
  background-color: #2C2F33;
  border-bottom: 3px solid #23272A;
}

#message {
    width: 100%;
    height: 100px;
    background-color:#2C2F33;
    color: #FFFFFF;
    border: 3px solid #2C2F33;
    overflow:auto;
}
.fa-smile-o{
  color: #FFFFFF;
}
#action-here{
  border-left: 5px solid #23272A;

}
#file-button{
  background-color: #7289DA;
  color: #FFFFFF;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  border: none;
}
#send{
  background-color: #7289DA;
  border: none;
  opacity: 0.7;
}

#handle{
  width: 70%;
  background-color:#2C2F33;
  opacity: 0.5;
  border: none;
  height: 30%;
  color:#FFFFFF;
}
#date{
font-style: oblique;
color:#99AAB5;
font-size: 14px;
}

#style-handle{
  color: #7289DA;
}
.announcements{
    color: #7289DA;
    text-transform: full-width;
}
#right-panel{
  padding-top: 3px;
  text-align:center;
  color: #7289DA;
  border-top: 2px solid #7289DA;
}
#left-panel{
  padding-top: 3px;
  text-align:center;
  color: #7289DA;
  border-top:2px solid #7289DA;
}
/*
#7289DA
#FFFFFF
#99AAB5
#2C2F33
#23272A
*/

9. Отправка сообщения от клиента на сервер

Теперь давайте начнем с фактической части в чате ..

В Chat.js, что мы собираемся сначала сделать, это запрашивать элементы DOM из index.html и создавать ссылки на них. Чуть ниже const.connect ('http://www.localhost: 4000') Набрав следующее:

const socket = io.connect('http://localhost:4000');

// Query DOM elements
const message = document.getElementById('message');
const handle = document.getElementById('handle');
const sendButton = document.getElementById('send');
const output = document.getElementById('output');
const announcements = document.querySelectorAll('.announcements');
const feedback = document.getElementById('feedback');
const rightPanel = document.getElementById('right-panel');

//create date object
const date = new Date().toDateString();
  1. <Код> Const Message Ссылки Дом <Код> Textarea Элемент, в котором пользователь набирает сообщение.
  2. <Код> Ручка – это входной элемент, в котором пользователь будет ввести в его ручку чата
  3. <Код> SendButton Хорошо, что вы догадались, кнопка отправки.
  4. const Выход – это Div, где сообщения чата будут выводиться на экран.
  5. <Код> Объявления Const Ссылки Все

    Элементы с классом «Объявления», и это отобразит объявления, такие как когда пользователь присоединяется к чату.
  6. <Код> Обратная связь Const Ссылки DIV с идентификатором «Обратная связь» отобразит сообщение: «Пользователь набрал сообщение …».
  7. <Код> Const RightPanel Ссылки Div с классом <Код> правой панели , которые будут отображать общее количество пользователей в чате
  8. Мы также создаем новый объект даты, поскольку мы будем отображать дату строки, и это будет ссылаться <код> Date

Теперь, что мы хотим, если мы хотим, это то, что, когда пользовательские типы в их дескрипте и сообщение в кнопке и щелкают на кнопке «Отправить», сообщение должно быть испущено для получения сервера. Сервер в свою очередь отправит сообщение всем клиентам.

Продолжая в чате

Так что, если длина сообщения и длина ручки> 0, мы хотим отправить обмен сообщениями чата с помощью метода «Emit». Причина, по которой мы проверяем свойство длины как сообщения, так и дескрипта, так что пользователи не спамины, отправляя пустые сообщения чата. Метод EMIT отправит сообщение по разъему на сервер. Требуется 2 аргумента:

  1. Имя события сообщения, что бы вы ни выбрали, чтобы позвонить. Мы назвали это «чат»

  2. Значение данных «Чат» – это вход сообщений чата. Мы отправляем Объект вместе с методом EMIT, который представляет собой объект JavaScript с следующим ключом: Value Pairs:

    • Сообщение: message.value, которое является значением элемента Textarea
    • Ручка: ручка. Value, которая является входным значением рукоятки
sendButton.addEventListener('click', function(){
  /*make sure user does not send an empty message with an empty handle which is annoying and spammy*/
   if(message.value.length > 0 & handle.value.length > 0){
  socket.emit('chat', {
      message: message.value,
      handle: handle.value
  });
}
//once the message is sent, reset the innerHTML of the message div to an empty string
  message.value = "";
});

Теперь давайте получим сообщение «Чат» на другой стороне, который является сервером.

10. Получение сообщения от клиента на сервере

В Index.js мы получим сообщение «Чат», которое было «излучено» на стороне клиента. То, что мы хотим сделать, это не только получать сообщение «чат», но также излучить его всем подключенным клиентам. Мы сделаем это внутри функции обратного вызова, которая называется, когда соединение сокета установлено с клиент.

socket.on("chat",function(data){
    io.sockets.emit("chat",data)
  });
});//main

Что происходит?

  1. Гнездо «относится к этому конкретному« соединению сокета », установленное с клиентом.
  2. Мы используем метод «в», который будет слушать событие «Чат» и пожаротать функцию обратного вызова
  3. Функция принимает «данные» в качестве параметра и получит данные, которые мы отправили.
  4. Мы отправляем это сообщение чата с <Код> IO.sockets.emit – в этом случае <код> IO.Sockets относится ко всем подключенным клиентам.
  5. И еще раз отправив событие сообщения «Чат» вместе с данными, полученными от первого клиента, который является объектом «данных» в качестве 2-го параметра.

11. Отображение сообщения всем подключенным клиентам

Поэтому мы отправили сообщение от клиента на сервер. Затем сервер получил сообщение и отправил его всем клиентам, подключенным к серверу. Это включает в себя оригинальный отправитель сообщения.

Но мы все еще должны отображать сообщение, отправленное с сервера для всех подключенных клиентов. Способ сделать это – вернуться к Chat.js и простое получите сообщение «Чат» и отобразить его с помощью свойства InnerHTML выхода дисплея.

В чате

socket.on('chat', function(data){
   feedback.innerHTML = '';
  output.innerHTML += '
'+ '' + date  + "  " + '' + '' + data.handle + '  :   ' + ''  + data.message + '
';
});

Что происходит?

  1. <Код> сокета относится к <код> Const Socket , чтобы отдельную розетку для клиента
  2. Еще раз использую этот метод On , чтобы прослушать событие «Чат», выпущенное от сервера
  3. И после события «чата» мы выпустим функцию обратного вызова, которая принимает <код> данных в качестве параметра
  4. Не беспокойтесь о FEECTBACK.INNERHTML ..
  5. Внутри функции обратного вызова мы можем сделать что-то с полученными данными. Итак, отображение полученного объекта данных, которое имеет клавиши ручки и сообщения

12. Вещательные сообщения для подключенных клиентов

Что такое вещательное событие? Хорошо, когда сервер транслярует сообщение, которое он отправит его каждому клиенту вниз по соединению сокета , кроме клиента, который отправил сообщение в первую очередь.

Теперь, что мы сделаем, это транслируйте «пользователь», набрав сообщение «всем другим пользователям, когда пользователь« A »набрал сообщение.

В чате

message.addEventListener('keypress', function(){
  if(handle.value.length > 0){
    socket.emit('typing', handle.value);
  }
});

Что происходит?

  1. Прикрепите <код> addeventListener Метод Message Переменная, ссылаясь на Textarea в index.html
  2. Слушатель событий «Слушан» для события KeyPress
  3. Когда происходит событие KeyPress, вы запустите функцию обратного вызова
  4. Функция обратного вызова изменит событие «ввода» на сервер вместе с дескриптором пользователя ( DILLING. Value ) Если Ручка. Value.lue.length is> 0 (то есть пользователь фактически вводил их имя пользователя)

Сервер в свою очередь получит испускаемое сообщение. А затем транслируйте сообщение всем клиентам , кроме клиента, который излучал событие «Набрать».

В index.js:

Внутри основной функции подключения <код> Socket.ON («Чат» ..) 

  // Handle typing event
   socket.on('typing', function(data){
    socket.broadcast.emit('typing', data);
 });

Что происходит?

  1. Создайте другой <код> socket.on метод, который слушает для «набора текста»
  2. Когда событие происходит, выполняется функция обратного вызова, которая принимает «данные» в качестве аргумента
  3. «Данные» в этом случае – это ручка пользователя. Valueue
  4. Затем мы хотим транслировать сообщение всем связанным клиентам
  5. Еще раз <код> сокета относится к отдельным соединению сокета, созданного между сервером и клиентом
  6. Метод Broadcast.emit отправит событие «набрать» и данные, которые являются Dising. Valueue

Теперь давайте поработаем на стороне клиента, которая получит сообщение «Набрать», транслируемое с сервера.

В чате

socket.on('typing', function(data){
    feedback.innerHTML = '
' + data + ' is typing a message...
';
});

Что происходит?

  1. <Код> сокета относится к этому конкретному сокету между клиентом и сервером
  2. Использование <код> на методе
  3. Первый аргумент ON – <код> событие
  4. После Typing событие мы запустим функцию обратного вызова, которая принимает <код> данных в качестве параметра
  5. И внутри функции вы сделаете что-то с помощью «данных»
  6. И в этом случае мы изменим свойство innerhtml элемента обратной связи к данным + ‘набрав сообщение …’

13. Отображение общего количества пользователей и отправки пользователей A «Добро пожаловать» сообщение

В этом разделе мы будем:

  1. Отображение общего количества пользователей чата на панели справа от основного чата
  2. Показать приветствие пользователю, когда они находятся на странице чата

В Index.js, объявите <код> клиентов , который будет отслеживать общее количество клиентов

const express = require('express');
const socket = require('socket.io')
let clients = 0;

И выше основного Socket.on .. Функция подключения, введите следующее:

socket.emit("message", {
greeting: "Hi there! Remember, choose your handle! "
  });
clients++;
 socket.broadcast.emit('newClientConnect',{ description: clients + ' clients connected!'});
 socket.emit('newClientConnect',{ description: clients + ' clients connected!'});

 socket.on('disconnect', function () {
    clients--;
    socket.broadcast.emit('newClientConnect',{ description: clients + ' clients connected!'});

 });

Что происходит?

  1. Когда соединение сокета установлено, мы будем использовать метод Emit
  2. Метод предпринимает событие, которое будет получено на стороне клиента в качестве аргумента. Это событие называется «сообщение»
  3. В ответ на событие «Сообщение» некоторые данные i.e. Объект будет выделен
  4. Объект имеет ключ «Приветствие», значение которого является строкой: «Привет! Помните, выберите свою ручку!
  5. После чего вы будете увеличивать счетчик клиента на 1 с помощью <код> клиентами ++
  6. Затем вы будете использовать <код> EMIT и WARDCAST.EMIT методы для отправки сообщения «newclientConnnnnned»
  7. Сообщение будет содержать количество подключенных клиентов и строку: <Код> Описание: Клиенты + ‘Клиенты подключены!’
  8. После события отключения, <код> socket.on запустит функцию обратного вызова
  9. Функция обратного вызова будет уменьшаться клиентов на 1 с клиентами -
  10. И в случае события «Отключить» мы обновим <код> NewClientConned сообщение, чтобы показать обновленное количество клиентов

Фу! Теперь давайте получим это сообщение на стороне клиента!

В чате

socket.on('message',function(data){
   announcements[0].innerHTML+= data.greeting;
});

socket.on('newClientConnect',function(data) {
  rightPanel.innerHTML= data.description;
 });

Что происходит?

  1. SOCKET.ON метод получает <код> событие, которое, в свою очередь, вызывает функцию обратного вызова, которая принимает <код> данных в качестве аргумента
  2. Затем мы изменяем innerhtml элемента <объявлений> при индексе [0] (так как мы итерация по элементам DOM с классом «Объявления»
  3. InnerHTML включает приветствие: «Привет там! Помните, выберите свою ручку!
  4. Затем <код> socket.on method получает <код> newclientconnect событие, которое, в свою очередь, запустит функцию обратного вызова
  5. Функция, которая принимает <код> данных в качестве аргумента, отобразит общее количество клиентов, связанных в любое время

Читайте ещё по теме: