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

Как построить статус доставки сообщения в JavaScript

Как построить систему доставки сообщений в реальном времени с топлером и JS

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

При строительстве приложений в реальном времени мы часто хотим знать фактическое время, когда происходит процесс или событие. Например, в приложении мгновенного обмена сообщениями мы хотим знать, если и когда наше сообщение было доставлено по предполагаемому клиенту. Мы видим это в WhatsApp, где сообщения отправляются в Realtime, и вы видите статус каждого сообщения, когда он поставляется и прочитан, с двойным серым тиком при доставке и двойной синий тик при чтении. Мы можем легко построить состояние доставки сообщения, используя Pusher и JavaScript.

Как?

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

Каналы обеспечивают способ фильтрации данных и контроля доступа к различным потокам информации, в то время как события являются основным методом упаковочных сообщений в системе толкателя, которая образует основу всей связи.

Для реализации состояния доставки сообщения с помощью толкателя мы должны подписаться на канал и слушать события на канале. Мы построим простое приложение в чате в JavaScript, которое отправит сообщения клиенту, и клиент будет вызвать событие при получении.

Настройка приложений

Чтобы использовать PUSHER API, мы должны зарегистрироваться и создать приложение Pusher с помощью приборной панели. Мы можем создать столько приложений, так как мы хотим, и каждый из них получит идентификатор приложения и секретный ключ, который мы будем использовать для инициализации экземпляра Pusher на Client или Server Side Code.

Создать новый аккаунт Pusher

  1. Зарегистрируйтесь в толкатель или войдите, если у вас уже есть аккаунт.

  2. После регистрации мы добираемся до приборной панели и показали экран для настройки нового приложения Pusher.

    1. Введите имя для приложения. В этом случае я назову это «чат».
    2. Выберите кластер
    3. Выберите опцию «Создать приложение для нескольких сред», если вы хотите иметь разные экземпляры для разработки, постановки и производства
    4. Выберите напротив Tech. Я выберу Ванильядс, так как я не буду использовать какие-либо рамки
    5. Выберите Nodejs как мой бэк-конец

  3. Нажмите Создать приложение Создать приложение Pusher.

Код

Мы будем использовать каналы в качестве средства для отправки сообщений и спусковых событий через канал. В толкахе 3 типа каналов:

  • Общественный канал которые могут быть подписаны тем, кто знает имя канала.
  • Частный канал который позволяет вашему серверу контролировать доступ к данным, которые вы вещаете.
  • Канал присутствия который является расширением частного канала, но заставляет абонентов канала для регистрации информации о пользователе при подписке. Это также позволяет пользователям знать, кто находится в сети.

Клиенты должны быть аутентифицированы для использования частных и присутствия каналов. Для приложения пример, мы построим клиента с помощью Vanilla JS и Server (для аутентификации) с использованием NODEJS. Потому что я не хочу, чтобы послание пройти через сервер, но от клиента к клиенту, и мне не нужно знать, если пользователь находится в сети или отдается, я буду использовать личный канал для этой демонстрации, но ту же методику будет применяться с использованием любого типа канала. Клиентские события могут быть вызваны только в частных или наличие каналов, и использовать любой из этих типов каналов, пользователь/клиент должен быть аутентифицирован, поэтому необходимость вновь заканчивается для аутентификации.

Кроме того, чтобы использовать клиентские события, они должны быть включены для приложения. Перейти к своей приборной панели толкателя и на Настройки приложения Вкладка, выберите «Включить клиентское событие» и обновить.

Спина

Поскольку мы строим нашу бэкэнд в узле с использованием Express, давайте инициализируем новое приложение узла и установите необходимые зависимости. Запустите следующую команду:

  • NPM init и выберите параметры по умолчанию
  • NPM I --Save Body-Parser Express Pusher Чтобы установить Express и пакет узла толчков

Добавить новый файл под названием server.js Что будет содержать логику для аутентификации клиента Pusher, а также рендеринг статических файлов, мы будем добавлять позже. Этот файл будет содержать контент ниже

var express = require('express');
var bodyParser = require('body-parser');

var Pusher = require('pusher');

var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

var pusher = new Pusher({ appId: APP_ID, key: APP_KEY, secret:  APP_SECRET, cluster: APP_Cluster });

app.get('/',function(req,res){      
     res.sendFile('index.html', {root: __dirname });
});

app.use(express.static(__dirname + '/'));

app.post('/pusher/auth', function(req, res) {
  var socketId = req.body.socket_id;
  var channel = req.body.channel_name;
  var auth = pusher.authenticate(socketId, channel);
  res.send(auth);
});

var port = process.env.PORT || 5000;
app.listen(port, function () {
  console.log(`Example app listening on port ${port}!`)
});

Мы создали толкатель, проходя в объекте, который содержит детали нашего идентификатора приложения и секретного ключа, который можно найти в приборной панели Pusher, на Ключи приложений вкладка Линия var.authenticate (SocketiD, канал); Аутентифицирует клиент с помощью толкателя и возвращает код аутентификации в звонок. Чтобы этот файл запустить при запуске NPM, мы обновляем Package.json со следующим значением:

"scripts": {
    "start": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Внешний интерфейс

С задней частью на месте мы сейчас движемся к созданию передней части. Мы будем использовать шаблон от этого сайт с небольшим модификацией.

Добавьте новый файл с именем index.html и still.css С следующим содержанием в каждом файле:

Index.html.






    


    

    


    

    
    
    


    

    

        

            

                

                     Comments

still.css

@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
.chat
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.chat li
{
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #B3A9A9;
}

.chat li.left .chat-body
{
    margin-left: 60px;
}

.chat li.right .chat-body
{
    margin-right: 60px;
}


.chat li .chat-body p
{
    margin: 0;
    color: #777777;
}

.panel .slidedown .glyphicon, .chat .glyphicon
{
    margin-right: 5px;
}

.body-panel
{
    overflow-y: scroll;
    height: 250px;
}

::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

Добавлена страница, удерживает шаблон чата с 1 к 1. В линии 18 Мы добавили скрипт для загрузки библиотеки Pusher JavaScript и в 19 Мы загружаем пользовательский файл JavaScript, который мы будем использовать для обработки взаимодействий со страницы. Добавьте этот файл со следующим контентом:

index.js.

$(document).ready(function(){
    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('APP_KEY', {
        cluster: 'eu',
        encrypted: false
    });

    var channel = pusher.subscribe('private-channel');
    //channel name prefixed with 'private' because it'll be a private channel
});

Из кода выше мы сначала подключаемся к толкате, создавая объект толкателя с App_key и кластер. Эти значения получены из приборной панели толкателя. зашифрован Установлено значение FALSE, чтобы позволить ему отправить информацию о незашифрованном соединении.

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

Далее мы связываемся с событиями. Таким образом, мы можем получать сообщения от клиента через канал, на который мы подписались. Добавьте следующую строку в index.js.

channel.bind('client-message-added', onMessageAdded);
channel.bind('client-message-delivered', onMessageDelivered);

$('#btn-chat').click(function(){
    const id = generateId();
    const message = $("#message").val();
    $("#message").val("");

    let template = $("#new-message-me").html();
    template = template.replace("{{id}}", id);
    template = template.replace("{{body}}", message);
    template = template.replace("{{status}}", "");

    $(".chat").append(template);

    //send message
    channel.trigger("client-message-added", { id, message });
});
function generateId() {
    return Math.round(new Date().getTime() + (Math.random() * 100));
}

function onMessageAdded(data) {
    let template = $("#new-message-other").html();
    template = template.replace("{{body}}", data.message);

    $(".chat").append(template);

    //notify sender
    channel.trigger("client-message-delivered", { id: data.id });
}

function onMessageDelivered(data) {
    $("#" + data.id).find("small").html("Delivered");
}

Я запускаю события с клиента и не хочу, чтобы он прошел через задний конец или быть подтвержденным. Это только для этой демо. События клиента должен быть префиксирован клиент- Вот почему я сделал это с кодом выше. События с любым другим префиксом будут отклонены сервером Pusher, поскольку будут отправлены события на каналы, на которые клиент не подписан.

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

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

Запустите приложение и посмотрите, как это работает.

Заворачивать

С тем, что вы видели до сих пор, и зная, что каналы и события – это основы толкателя, я надеюсь, что я показал, как реализовать состояние доставки сообщения с помощью Pusher и JavaScript. Вы можете найти код на Гадость

Это было первоначально опубликовано на Толкатель

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