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

Как построить публичное анонимное приложение для чата в JavaScript

Мы все знакомы с мгновенными сообщениями и используем его, чтобы общаться с людьми в режиме реального времени. Иногда, однако, мы могли бы захотеть приложение, которое позволяет нам отправлять сообщения анонимно друзьям или общаться …

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

Мы все знакомы с мгновенными сообщениями и используем его, чтобы общаться с людьми в режиме реального времени. Иногда, однако, мы могли бы захотеть приложение, которое позволяет нам отправлять сообщения анонимно для друзей или общаться анонимно с незнакомцами в непосредственной близости. Пример такого приложения – Правда , который позволяет вам поговорить с людьми в вашем списке контактов, не раскрывая свою личность.

В этом руководстве я покажу вам, как построить публичное анонимное приложение для чата в JavaScript (используя Nodejs и Express на сервере и Vanillajs на клиенте) и толкатель. Pusher позволяет нам создавать масштабируемые и надежные приложения в реальном времени, и поскольку нам нужна доставка чата в реальном времени, это ключевой компонент приложения чата. Изображение ниже изображает то, что мы будем строить:

Начиная

Давайте отключимся Подписание для бесплатной учетной записи Pusher (или входить в систему, если у вас уже есть). Как только вы вошли в систему, создайте новое приложение для толкателя из Приборная панель И сделать записку вашего идентификатора приложения, ключом и секрете, которые уникальны для приложения.

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

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

Кодовой сервер

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

Нам нужен Package.json Файл, и я добавлю его, запустив команду ниже. Я буду использовать значения по умолчанию, предоставляемые, ударяя Enter для каждой подсказки.

$ npm init.

С Package.json Добавлен файл, я установлю Экспресс , Тело-парсер и Толкатель пакеты NPM. Запустите следующую команду

$ npm установить –save pusher express body-parser

С этими пакетами давайте добавим новый файл под названием server.js со следующим контентом

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.post('/message', function(req, res) {
  var message = req.body.message;
  pusher.trigger( 'public-chat', 'message-added', { message });
  res.sendStatus(200);
});

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

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

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

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

Замените идентификатор приложения на строки заполнителей, секрет и ключ от значений с помощью приборной панели PUSHER.

Добавьте это утверждение «Пуск»: «NODE SERVER.JS» В Сценарий Собственность нашего Package.json файл. Это позволит нам запускать сервер, когда мы запускаем Начнем NPM

Строительство Frontend

Переход к фабрике, давайте добавим новую папку под названием публичный Отказ Эта папка будет содержать нашу страницу и файлы JavaScript. Добавить новый файл под названием 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;
}

Добавьте другой файл под названием index.html с разметкой ниже.





    
    

    
    

    

    
    

    
    
    


    







Я использую шаблон от Bootsnipp который был немного изменен для отображения только имени и сообщения.

Добавить новый файл под названием index.js с контентом ниже. Не забудьте добавить детали приложения PUSHER:

$(document).ready(function(){    
    var pusher = new Pusher('APP_SECRET', {
        cluster: 'APP_CLUSTER',
        encrypted: false
    });

    let channel = pusher.subscribe('public-chat');
    channel.bind('message-added', onMessageAdded);

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

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

        //send message
        $.post( "http://localhost:5000/message", { message } );
    });

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

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

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

Мы подписываем на канал и событие имени Добавлена сообщение Отказ Канал представляет собой общественный канал, поэтому он может быть назван любым способом, которым вам нравится. Я решил префикс моего с публично- Но это только моя собственная конвенция, поскольку нет правил для общественного канала. Разница между общественным каналом (который не требует аутентифицированного клиента), а два других – это то, что они префиксированы частные- и Присутствие- Отказ

Мы связываем со событием клики кнопки чата на странице, мы извлекаем сообщение из TextBox на странице, а затем отправьте его на сервер с именем пользователя. Со всеми у нас установлены, мы можем запустить начать приложение, запустив NPM начать Отказ Вот мнение того, как он работает на моем компьютере.

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

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

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