Проект фон введения
В последнее время в проекте, который я написал, существует социальный модуль, и необходимо реализовать функцию: когда пользователь любит, комментируется, прокомментируется и т. Д., Поступает сообщение, которое сервер должен передать пользователю в режиме реального времени. Окончательный адрес проекта: https://github.com/noiron/socket-message-push. Здесь мы представим идеи реализации и некоторые коды.
В процессе проекта есть несколько объектов:
Процесс обработки событий выглядит следующим образом:
Учтите, что на Supp Server сообщений должен записать информацию о текущем онлайн -пользователе, чтобы сообщества можно было подтолкнуть к конкретным пользователям. Поэтому, когда пользователь входит в систему, он или она должны отправить свою собственную информацию пользователя на сервер node.js. Чтобы достичь этого двунаправленного обмена сообщениями в реальном времени, очевидно, что WebSocket реализован. Поскольку мы используем Node.js на сервере Push Message, у нас есть очень удобная опция: socket.io.
Введение в Socket.io
Socket.io-это библиотека двусторонней связи в реальном времени, реализованной в JavaScript. Это будет легко использовать его для реализации наших функций.
Socket.io содержит две части:
Вы можете взглянуть на следующий пример кода Socket.io, который дает основное использование Socket.io для выпуска и прослушивания событий:
io.on ('connection', function (socket) {socket.emit ('request', / * /); // излучать событие для сокета io.emit ('broadcast', / * * /); // излучать событие для всех подключенных сокетов socket.on ('reply', function () { / * /}); / /слушать событие});Есть еще одна вещь, которую следует отметить о Socket.io: Socke.io не совсем реализация WebSocket.
Примечание: Socket.io не является реализацией WebSocket. Хотя Socket.io действительно использует WebSocket в качестве транспорта, когда это возможно, он добавляет некоторые метаданные в каждый пакет: тип пакета, пространство имен и идентификатор ACK, когда необходимо подтверждение сообщения.
Далее нам нужно использовать Express.js для создания программы на стороне сервера и ввести socket.io.
Node.js Server Construction
Используйте Express.js для создания базового сервера
Мы использовали express.js для создания нажатия Node.js -сервера сообщения и сначала используем краткий пример для просмотра его функций:
// server.jsconst Expression = require ('express'); const app = express (); const path = require ('path'); const http = require ('http'). server (app); const port = 4001; app.use (express.static (path.join (__ dirname, 'public')); + '/public/index.html'); }); app.get('si', function (req, res) {res.sendfile (__ dirname + '/public/index.html'););); {console.log (`прослушивание на порту: $ {port}`);});Сохраните вышеуказанный код как Server.js, создайте новую публичную папку и поместите в него файл index.html. Запустите следующую команду:
node server.js
Теперь вы можете просмотреть эффект на Localhost: 4001.
Представление сокета.io
Теперь, когда есть базовый экспресс -сервер, к нему необходимо добавить Socket.io.
const io = require ('socket.io') (http); io.on ('connection', function (socket) {console.log ('пользователь подключен'); socket.broadcast.emit ('new_user', {});}IO здесь слушает событие подключения. После того, как клиент установит соединение с сервером, здесь будет вызвана функция обратного вызова (код в клиенте будет введен в следующем разделе).
Сокет параметров функции представляет соединение, установленное между текущим клиентом и сервером. Вы можете распечатать установленное соединение сокета в клиентской программе, как показано на рисунке ниже:
Атрибут ID может использоваться для идентификации этого соединения, чтобы сервер мог отправлять сообщения конкретному пользователю.
socket.broadcast.emit ('new_user', {});Эта строка кода означает, что сокет будет транслировать сообщение с именем New_user для всех клиентов, которые в настоящее время имеют подключения с сервером (за исключением себя).
Процесс обработки бэкэнд -push -сообщений
Обработка пользовательской информации
Для удобства только один массив используется для сохранения пользовательской информации, которая может быть помещена в базу данных по мере необходимости в реальной работе.
Global.users = []; // Записывает токенид, сокетид зарегистрированного пользователя
Когда пользователь входит в систему, клиент отправит событие user_login на сервер. После того, как сервер получает его, он сделает следующее:
socket.on ('user_login', function (info) {const {tokenId, userId, socketId} = info; addSocketId (пользователи, {tokenId, socketId, userId});});addSocketId () добавит пользовательскую информацию в массив пользователей. Разные пользователи могут отличить их через токенид. У каждого пользователя есть массив сокетов, который сохраняет несколько сокетов, которые могут существовать. Конкретный код этой функции можно найти в файле src/utils.js.
Аналогичным образом, существует также функция deletesocketId (), используемая для удаления пользовательской информации, и код можно увидеть в том же файле.
После получения токенида пользователя вам необходимо найти соответствующий сокетд, а затем раздать сообщение конкретному пользователю.
// Отправлять сообщения только в это соединение с id = socketId io.sockets.to (socketId) .emit ('checte_message', {entityType, data});Идея сервера примерно такая. Далее, давайте представим, как обработать его соответственно в клиенте.
Клиент
Инициализация сокета.io
Во -первых, введите файл на стороне клиента Socket.io в файле HTML, например, через CDN:
<script src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"> </script>
Другие способы представления:
<script src = "/socket.io/socket.io.js"></script> consst io = require ('socket.io-client'); // или с импортом синтаксиса io из 'socket.io-client';После введения Socket.io получается функция IO, и она используется для установления соединения с сервером Push.
// Предположим, что адрес после развертывания сервера узла: https://www.example.com/ws// Тогда: ws_host = 'https: //www.example.com'const msgsocket = io (`$ {ws_host}`, {secure: true:'/wssocket.io};Если слушать локально:
const msgsocket = io ('http: // localhost: 4001');Если вы напишете это как io ('https://www.example.com/ws') здесь возникнет ошибка, и/WS должен быть записан на путь.
Чтобы иметь возможность использовать эту переменную в других файлах, MSGSocket может использоваться в качестве глобальной переменной:
window.msgsocket = msgsocket;
Пользователи устанавливают соединение
// Когда пользователь входит в систему, отправьте информацию пользователя на сервер. Сервер создаст картирование сокета с пользователем после получения сообщения. msgsocket.emit ('user_login', {userid, socketid: msgsocket.id, tokenid});Обработка после получения толкованного сообщения
// После установки соединения WebSocket прослушайте событие под названием CETER_MESSAGE msgsocket.on ('CETER_MESSAGE', msg => {store.dispatch ({type: 'new_socket_msg', power -нагрузка: msg});});Когда сервер WebSocket нажимает к клиенту сообщение, клиенту необходимо прослушать событие CETE_MESSAGE, а полученные параметры содержат соответствующую ожидающую информацию.
Поскольку Redux используется для обработки данных, здесь отправляется действие new_socket_msg, и предоставляется последующий поток обработки рутинной рутинного рода.
Использование проекта
Адрес проекта на GitHub: https://github.com/noiron/socket-message-push
npm run dev
Вы можете проверить его в среде разработки, и теперь у вас есть сервер PUSH Message, работающий на порту 4001.
Но здесь нет бэкэнд -сервера для отправки нам сообщений, поэтому мы будем использовать почтальон для моделирования отправки сообщений.
Чтобы продемонстрировать функции программы, файл index.html помещается в папку клиента проекта. Обратите внимание, что этот файл не может быть использован в реальных проектах, он просто используется для отображения эффекта толчка сообщения.
После включения сервера откройте клиент/index.html и введите токенид, как вам нравится в соответствии с подсказками.
Теперь используйте почтальон, чтобы опубликовать следующее сообщение в Localhost: 4001/API:
{// Массив токенов указывает, какой пользователь вы хотите выдвинуть сообщение «Токены»: [«1», «2»], «Данные»: «Вы не должны проходить !!!»}На этом этапе, если все пойдет хорошо, вы сможете увидеть полученное сообщение в консоли клиента.
Вы можете открыть несколько страниц клиентов, ввести разные токениды, а затем проверить, отправляется ли сообщение правильному пользователю.
Суммировать
Выше приведено то, что редактор представил вам использовать Socket.io, чтобы реализовать функцию толчка сообщения в реальном времени. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!