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

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

Peter Mbanugo Как я построил публику, анонимное приложение в чате в JavaScriptPhoto от Mysticina Mool на Unsplashwe все знакомы с мгновенными сообщениями и используя его, чтобы пообщаться с людьми в реальном времени. Иногда, хотя мы можем захотеть приложение, которое позволяет нам отправлять сообщения анонимно друзьям или

Автор оригинала: FreeCodeCamp Community Member.

Питер Мбануго

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

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

Начиная

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

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

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

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

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

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

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

С этими пакетами давайте добавим новый файл под названием 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}!`)});

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

Замените идентификатор приложения для приложения Plate Holders Platers и ключ со значениями от вашей панели Dashboard. Добавьте это утверждение «Пуск»: «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 с разметкой ниже.


        
        
    
                
    
        
            
                
                     Anonymous Chat                    
                                                                    
                
                
                    
                                        
     
    Я использую шаблон от Bootsnipp который был немного изменен для отображения только имени и сообщения.
     
    Добавить новый файл под названием index.js с контентом ниже. Не забудьте добавить детали приложения PUSHER:
     
    $(document).ready(function(){        var pusher = new Pusher('APP_KEY', {        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("");
     
            //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);    }});
     
    С помощью кода в этом файле мы получаем сообщение, которое будет отправлено, а затем вызовите сервер с сообщением. После этого мы подключаемся к точке, создав новый объект толкателя с ключом приложения и кластером, который вы устанавливаете ранее.
     
    Мы подписываем на канал и событие имени Добавлена сообщение Отказ Канал представляет собой общественный канал, поэтому он может быть назван любым способом, которым вам нравится. Я решил префикс моего с публично- Но это только мое собственное личное соглашение об именах, так как нет правил для общественного канала. Разница между публичный Канал и A Частный или Присутствие Канал заключается в том, что общедоступный канал не требует аутентификации клиента и может быть подписан на любой, кто знает имя канала. Вы можете узнать больше о каналах Pusher здесь Отказ
     
    Мы привязываемся к событию Click кнопки чата на странице, извлеките сообщение из TextBox на странице, а затем отправьте его на сервер с именем пользователя. Со всеми у нас установлено, мы можем запустить приложение, запустив NPM начать Отказ Вот мнение того, как он работает на моем компьютере.
     
    Заворачивать
     
    Это приложение для того, чтобы показать, как вы можете использовать Pusher для отправки сообщений в режиме реального времени. Мы построили публичное анонимное приложение для чата, которое позволяет посещать вашему сайту отправлять анонимные сообщения друг другу в режиме реального времени. Вы можете найти код здесь на Гадость
     
    Это было первоначально опубликовано на Толкатель
    


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