Создайте приложение для чата в режиме реального времени из командной строки с помощью SocketIO

Узнайте, как создать приложение чата из командной строки с помощью SocketIO.

В этом посте мы узнаем, как создать приложение группового чата из командной строки с помощью SocketIO.

Socket.IO обеспечивает двунаправленную связь на основе событий в реальном времени. Это состоит из:

1. сервер Node.js

2. Клиентская библиотека Javascript для браузера (или клиент Node.js)

Что мы узнаем из этого поста:

• Как создать веб-сокеты
• Как работает групповой чат
• Как установить и использовать SocketIO

Подсказка:

Долой правило монолитности. Приветствую модульность! Да здравствует возможность повторного использования!

Позвольте Bit инкапсулировать для вас модули. Bit отслеживает зависимости ваших модулей, тестовые файлы и т. Д. - Когда все будет готово, просто отправьте их в облако Bit, где они могут быть обнаружены и использованы вашей командой или всем сообществом разработчиков ПО. Bit организует ваши модули в коллекции, НО каждый модуль можно совместно использовать и устанавливать индивидуально 😮

Настройка / установка проекта

Сначала мы создаем проект Node:

mkdir node-stream
cd node-stream
npm init -y

Теперь устанавливаем библиотеку socket.io:

npm i socket.io

Теперь у socket.io есть клиентская библиотека, которая будет использоваться клиентом для связи с сервером socket.io:

npm i socket.io-client

Создайте сервер SocketIO

Теперь мы создадим наш сервер Websocket. Для этого создадим файл chat-node.js

touch chat-node.js

Затем мы добавляем следующее в файл chat-node.js:

const http = require('http').createServer();
const io = require('socket.io')(server);
const port = 3000
io.on('connection', (socket) => {
    log('connected')
})
io.on('disconnect', (evt) => {
    log('disconnected')
})
http.listen(port, () => log(`server listening on port: ${port}`))

Вышеупомянутое присоединяет socket.io к простому HTTP-серверу Node.JS, который прослушивает порт 3000.

SocketIO основан на событиях, вы настраиваете события с помощью его обработчика, и когда событие генерируется, запускается соответствующий обработчик. Для настройки событий используется метод .on, он принимает два параметра, первый - это строка, содержащая имя события, а второй параметр - это обратный вызов функции.

Событие подключения генерируется при установлении соединения. Аргумент socket следует использовать в дальнейшем общении с клиентом.

Событие отключения генерируется, когда клиент отключается от сервера.

Теперь, когда мы настроили наш сервер сокетов, давайте посмотрим, как подключиться к серверу.

Создайте клиент SocketIO

Создаем файл chat-client.js

touch chat-client.js

Теперь добавьте приведенный ниже код в файл chat-client.js:

var socket = require('socket.io-client')('http://localhost:3000');
  const repl = require('repl')
  const chalk = require('chalk');
  socket.on('disconnect', function() {
      socket.emit('disconnect')
  });
  socket.on('connect', () => {
      console.log(chalk.red('=== start chatting ==='))
  })
  socket.on('message', (data) => {
      const { cmd, username } = data
      console.log(chalk.green(username + ': ' + cmd.split('\n')[0]));
  })

  repl.start({
      prompt: '',
      eval: (cmd) => {
          socket.send(cmd)
      }
  })

Нам потребовалась библиотека socket.io-client, она вернула функцию, которую мы вызвали, передав URL-адрес сервера http://localhost:3000. Помните, что мы создали сервер через порт 3000, поэтому мы ссылаемся на порт 3000. Это дает нам канал сокета к серверу WebSocket для связи. С socket мы можем отправлять сообщения на сервер.

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

Настраиваем различные прослушиватели событий:

connect: запускается, когда клиент устанавливает успешное начальное соединение с сервером. Здесь мы делаем так, чтобы обработчик отображал '=== start chatting ===' красным цветом с помощью мела.

отключить: это событие запускается, когда мы отключаемся от сервера.

сообщение: это событие вызывается при отправке данных с сервера. Здесь обработчик имеет аргумент данных, он содержит данные, отправленные с сервера.

Затем, в последний раз, мы вызвали метод запуска repl. Функция в свойстве eval всякий раз, когда мы вводим что-либо в терминал и нажимаем Enter. Таким образом, аргумент cmd содержит типизированное сообщение, и мы использовали метод send в API сокета для отправки сообщения на сервер.

Каждый раз, когда вызывается метод send, вызывается сервер, и сервер, если у него есть зарегистрированный сокет, получает сообщение, это событие message будет запущено, и будет вызван его обработчик.

Отправка сообщений туда и обратно

Теперь в нашем chat-node.js обработчик события подключения получает сокет в своем аргументе,

io.on('connection', (socket) => {
    log('connected')
})

давайте воспользуемся им, чтобы зарегистрировать message событие.

io.on('connection', (socket) => {
    log('connected')
    socket.on('message', (evt) => {
    })
})

В evt хранятся полезные данные, передаваемые вместе с событием сообщения. Теперь, как групповой чат, сервер должен отправлять сообщение всем зарегистрированным сокетам, подключенным к нему. Это означает вещание на все прослушивающие сокеты.

io.on('connection', (socket) => {
    log('connected')
    socket.on('message', (evt) => {
        log(evt)
        socket.broadcast.emit('message', evt)
    })
})

Теперь, если два человека запускают chat-client.js и человек 1 отправляет сообщение «I'm person1», сообщение будет получено сервером в событии message, а вызов socket.broadcast.emit отправит сообщение человеку. 2 и person1, все подключены к потоку сокетов.

См. Вызов socket.broadcast.emit('message', evt), первый параметр указывает событие, которое будет сгенерировано на всех подключенных сокетах, в данном случае это событие message, и их соответствующие обработчики будут запускаться, передавая evt передаваемое сообщение.

Запуск его

Чтобы запустить его, мы запускаем chat-node.js в одном терминале и chat-client.js в другом терминале.

См. Зарегистрированный сервер server listening on port: 3000. Теперь откройте другой терминал и запустите chat-client.js

Посмотрите, на сервере он зарегистрирован connected, что обработчик соединения запущен, потому что мы подключили сокет.

Откройте другой терминал и запустите chat-client.js

Смотрите, как зарегистрировано другое подключенное

Теперь на двух созданных нами клиентских терминалах введите сообщение на одном терминале и нажмите Enter.

Смотрите, это появилось на втором терминале. Теперь введите на втором терминале и нажмите Enter:

Смотрите, это появилось на первом терминале.

Делать это весело

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

Давайте добавим переменную имени пользователя в chat-client.js:

var socket = require('socket.io-client')('http://localhost:3000');
  const repl = require('repl')
  const chalk = require('chalk');
  var username = null
//...

Теперь мы получим имя пользователя из терминала при подключении следующим образом: node chat-client nnamdi. Это будет сделано в событии connect:

// ...
  socket.on('connect', () => {
      console.log(chalk.red('=== start chatting ==='))
      username = process.argv[2]
  })

Имя извлекается и сохраняется в переменной имени пользователя.

Теперь нам нужно отредактировать вызов отправки. При отправке нашего сообщения оно должно быть помечено нашим именем пользователя:

// ...
repl.start({
      prompt: '',
      eval: (cmd) => {
          socket.send({ cmd, username })
      }
  })

Обработчик событий сообщения должен быть изменен, чтобы преобразовать вышеуказанный объект в имя пользователя и cmd.

// ...
  socket.on('message', (data) => {
      const { cmd, username } = data
      console.log(chalk.green(username + ': ' + cmd.split('\n')[0]));
  })

Видите, он отобразит имя пользователя с точкой с запятой и сообщением.

Давай проверим. Закройте наши предыдущие клиентские терминалы.

Теперь, чтобы подключиться к серверу, мы должны добавить наше имя пользователя в node chat-client. ОК, откройте новый терминал и введите node chat-client nnamdi. Здесь nnamdi - имя пользователя.

Давайте откроем еще один: node chat-client peter

Теперь на nnamdi терминале введите Hello I'm nnamdi

См. На peter терминале он отображается как nnamdi: Hello I'm nnamdi.

Также на терминале peter введите Hello i'm peter

На nnamdi терминале он отображается как peter: Hello I'm peter

Заключение

Это очень просто: если вы знаете правильные методы в API, вы сможете воспроизвести большую часть функций популярного приложения. Есть и другие функции, которые нужно добавить, я как читатель призываю значительно расширить это, вы можете создать следующее большое приложение для чата для следующего миллиарда пользователей.

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

Спасибо !!!

Полный код

Учить больше