Учебник по Node Socket.io — это тема, в которую мы углубимся сегодня. Сегодня мы создадим простое приложение для чата. Мы будем использовать Node.js для внутренней платформы и Socket.io для двусторонней связи в реальном времени. Теперь, во-первых, нам нужно создать файл package.json для установки наших необходимых зависимостей.

Пример Node Socket.io

WebSocket — это интернет-протокол, который обеспечивает полнодуплексную связь между сервером и клиентами.

Этот протокол выходит за рамки типичной парадигмы HTTP-запроса/ответа; с помощью WebSockets сервер может отправлять данные клиенту без инициирования клиентом запроса, что позволяет использовать некоторые очень интересные приложения.

В большинстве руководств, которые вы найдете на WebSockets, вы создадите приложение для чата, и мы сделаем то же самое здесь. Для этого мы будем использовать популярный серверный фреймворк Socket.IO Node.js.

Установите необходимый dev зависимости для нашего проекта.

Шаг 1. Настройте проект.

Выполните следующую команду в своем терминале.

 npm init 

Теперь, чтобы использовать ES6 в наш проект, нам нужно настроить Babel в нашем проекте.

Итак, давайте установим это, а также установим nodemon для сервера разработки, который помогает нам не перезагружаться каждый раз. Поэтому поместите следующий объект в файл package.json.

 "devDependencies": {"babel-cli": "^ 6.26.0", "babel-preset-es2015": "^ 6.24  .1 "," babel-preset-stage-0 ":" ^ 6.24.1 "," nodemon ":" ^ 1.15.0 "}, 

Теперь установите зависимости.

 npm install 

В корне проекта создайте один файл с именем . babelrc.

 {"presets": ["es2015", "stage-0"]} 

Хорошо, теперь создайте один файл с именем server.js внутри корня проекта. Кроме того, добавьте сценарий запуска в файл package.json .

 "scripts": {"start": "nodemon ./server.js --exec  babel-node -e js "}, 

Шаг 2: Установите экспресс и запустите сервер.

Установите пакеты, введите следующую команду.

 npm install express body-parser --save 

Мы будем использовать веб-сервер Express для обслуживания наших статических файлов и body-parser извлекает всю основную часть входящего потока запросов и предоставляет ее конечной точке API. Вы увидите, как они используются позже в этом руководстве.

Мы добавили флаг –save , чтобы он был добавлен как зависимость в наш package.json .

Запишите следующий код в файл server.js .

//сервер. jsimport express из 'express'; импорт пути из 'path'; импорт bodyParser из 'body-parser'; const app = express (); 

Шаг 3. Установка сокета .io библиотека.

Введите следующую команду, чтобы установить библиотеку socket.io .

 npm install -  -save socket.io 

Теперь создайте сервер узла.

//server.jsimport express из 'express'; импортировать путь из 'path'; import bodyParser  из 'body-parser'; const app = express (); const server = require ('http'). createServer (app); const io = require ('socket.io'). listen (server); const PORT = 3000  ; server.listen (PORT); console.log ('Сервер работает'); app.get ('/', (req, res) => {res.sendFile (__ dirname + '/index.html');}  ); 

Как видите, мы используем Express и Socket.IO для настройки нашего сервера. Socket.IO обеспечивает уровень абстракции над собственными WebSockets.

В нем есть несколько хороших функций, таких как резервный механизм для старых браузеров, не поддерживающих WebSockets, и возможность создавать «комнаты».

Здесь, Я создал серверную переменную и передаю в ней экспресс-приложение. Затем подключите socket.io к серверу.

Итак, когда любой клиент отправляет любой запрос, он напрямую прослушивает это событие. Кроме того, создайте файл с именем index.html внутри корневой папки.

           МЫ успешно настроили       

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

 npm start 

Вы можете увидеть http://localhost: 3000 . Наш сервер работает правильно.

Кроме того, мы включили клиентскую версию jQuery и Socket.io в файл index.html . Здесь мы используем CDN для демонстрации.

Шаг 4. Создайте форму для ввода сообщения.

Итак, нам нужно чтобы создать область чата для нашего приложения.

Я создал простой макет начальной загрузки.

           
 
 Node js Socket io Chat Application 
 
 
 
 
 
 
  
   
 
  Отправить кнопка> 
  
 
 
     y>   
 
 
  
 
  Шаг 5: Установите соединение через сокет.  
 
 Прежде всего, нам нужно создать массив соединений, чтобы отслеживать количество соединений в нашем приложении.  
 
 Также откройте соединение, чтобы мы могли подключить нашего клиента к сокету.  Введите следующий код, чтобы подготовить сокет к прослушиванию соединения. 
 
//server.jsconst connections = []; io.sockets.on ('connection', (socket) => {connections  .push (socket); console.log ('% s sockets is connected', connections.length);}); 
 Теперь осталось только одно - подключить сокет  клиенту.  Итак, на странице  index.html  напишите следующий код. 
  jQuery (document) .ready (function () {var socket = io.  connect ();});  
 Итак, здесь мы пытаемся подключиться к сокету.  Если сокет подключен, то мы можем узнать его длину на сервере.  
 Теперь мы можем отправлять сообщения туда и обратно, и мы можем получать сообщения в реальном времени.  Теперь откройте окно браузера по этому URL-адресу:  http://localhost: 3000/ 
 Вы можете сделать это в нескольких окнах и увидеть в консоли  что подключается все больше и больше розеток.  Когда мы закрываем окно, мы все еще видим, что два сокета соединяются.  Итак, давайте исправим это. 
//server.jsio.sockets.on ('connection', (socket) => {connections.push (socket); console. log ('% s сокетов подключено', connections.length);  socket.on ('disconnect', () => {connections.splice (connections.indexOf (socket), 1);});}); 
 Теперь мы также слушаем  отключить событие.  Если какой-либо из клиентов отключается от сокета, теперь мы можем видеть это на консоли. 
  Шаг 6. Прослушайте событие отправки сообщения.  
 Итак, со стороны клиента мы подключились к сокету.  
 Теперь нам нужно создать событие и отправить сообщение в чат в этом событии.  Итак, давайте создадим событие с нашим сообщением чата. 
  jQuery (document) .ready (function () {var socket = io.connect (); var form = jQuery ('#  myForm '); var txt = jQuery (' # txt '); var chatArea = jQuery (' # chatArea '); form.submit (function (e) {e.preventDefault (); socket.emit (' отправка сообщения ',  txt.val ()); txt.val ('');})});   
 Итак, это просто базовый jquery.  Мы подключились к сокету, поэтому просто запустите событие с именем , отправляющее сообщение.   Сервер будет прослушивать это событие, и мы можем транслировать его другим клиентам. 
//server.jsio.sockets.on ('connection', (socket) => {  connections.push (сокет); console.log ('% s сокетов подключено', connections.length); socket.on ('разъединить', () => {connections.splice (connections.indexOf (socket), 1)  ;}); socket.on ('отправка сообщения', (message) => {console.log ('Сообщение получено:', message);});}); 
 Здесь,  Я использовал метод  socket.on ()  для прослушивания этого события и регистрации сообщения, отправленного от клиента.  
 Итак, мы успешно отправили сообщение от клиента на сервер.  Теперь серверу необходимо отправить это сообщение другим клиентам.  Итак, давайте сделаем это. 
//server.jsio.sockets.on ('connection', (socket) => {connections.push (socket); console.log ('% s sockets  is connected ', connections.length); socket.on (' disconnect ', () => {connections.splice (connections.indexOf (socket), 1);}); socket.on (' отправка сообщения ', (message  ) => {console.log ('Сообщение получено:', сообщение); io.sockets.emit ('новое сообщение', {message: message});});}); 
 Итак, мы посылаем это новое сообщение каждому клиенту.  Теперь нам нужно прослушать это событие и на стороне клиента.  Итак, давайте сделаем это. 
  jQuery (document) .ready (function () {var socket = io.connect (); var form = jQuery ('# myForm'); var  txt = jQuery ('# txt'); var chatArea = jQuery ('# chatArea'); form.submit (function (e) {e.preventDefault (); socket.emit ('отправка сообщения', txt.val ()  ); txt.val ('');}); socket.on ('новое сообщение', функция (данные) {chatArea.append ('
' + data. сообщение + '');  });  });   
 Итак, когда запускается событие нового сообщения, мы можем прослушивать это событие и обновлять dom в соответствии с ним. 
  
 Наконец, наш пример Node Socket.io |  Как использовать узел с Socket.io закончено.  Я разместил этот код на Github. 
 Репозиторий Github 
  См. Также  
 Модули ES6  в Node.js 
 Пример загрузки изображения узла 
 Пример потоков узла 
 Пример файловой системы узла 
 Пример асинхронного ожидания узла