Как я создал общедоступную анонимную программу для общения в JavaScript

1656676214 kak ya sozdal obshhedostupnuyu anonimnuyu programmu dlya obshheniya v javascript

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

4XWkeFycRHbsFzR606QgrZl4t8o5NHp5UEyO
Фото Кристины Флаур на Unsplash

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

В этом учебнике я покажу вам, как создать приложение общедоступного анонимного чата на JavaScript (используя NodeJS и Express на сервере и VanillaJS на клиенте) и Pusher. Pusher позволяет создавать масштабируемые и надежные программы реального времени. Поскольку необходима доставка сообщений чата в реальном времени, это ключевой компонент программы чата. На рисунке ниже показано, что мы будем строить:

UzRs8hsRfZPpnqeAPkX6PSuscmYy7ExfoBnT
Конечный продукт

Начинаем

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

Чтобы создать новую программу Pusher, нажмите Your apps боковое меню, а затем нажмите значок Create a new app кнопку под ящиком. Откроется мастер настройки.

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

Закодируйте сервер

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

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

$npm инициал

С package.json файл добавлен, установлю Экспресс, body-parserи Толкатель пакеты NPM. Выполните следующую команду:

$ npm install –выполнить 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}!`)});

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

Замените строки-заполнители App ID, Secret и Key значением из информационной панели Pusher. Добавьте это заявление "start": "node server.js" в сценарий собственность нашей package.json файл. Это позволит нам запускать сервер при запуске начало npm.

Создание интерфейса

Переходя к интерфейсу, давайте добавим новую папку под названием общественность. Эта папка будет содержать файлы нашей страницы и JavaScript. Добавьте новый файл под названием style.css с приведенным ниже содержимым, содержащим наше определение стиля для страницы.

@import url("    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 с нижеприведенной разметкой.

<!DOCTYPE html><html><head>    <!-- Latest compiled and minified CSS -->    <link rel="stylesheet" href=" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->    <link rel="stylesheet" href=" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script        src="        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="        crossorigin="anonymous"><;/script>
    <!-- Latest compiled and minified JavaScript -->    <script src=" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;</script>
    <link rel="stylesheet" href="    <script src="    <script src="index.js"></script></head><body>    <div class="container">    <div class="row form-group">        <div class="col-xs-12 col-md-offset-2 col-md-8 col-lg-8 col-lg-offset-2">            <div class="panel panel-primary">                <div class="panel-heading">                    <span class="glyphicon glyphicon-comment"></span> Anonymous Chat                    <div class="btn-group pull-right">                        <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">                            <span class="glyphicon glyphicon-chevron-down"></span>                        </button>                        <ul class="dropdown-menu slidedown">                            <li><a href=" class="glyphicon glyphicon-refresh">                            </span>Refresh</a></li>                            <li><a href=" class="glyphicon glyphicon-ok-sign">                            </span>Available</a></li>                            <li><a href=" class="glyphicon glyphicon-remove">                            </span>Busy</a></li>                            <li><a href=" class="glyphicon glyphicon-time"></span>                                Away</a></li>                            <li class="divider"></li>                            <li><a href=" class="glyphicon glyphicon-off"></span>                                Sign Out</a></li>                        </ul>                    </div>                </div>                <div class="panel-body body-panel">                    <ul class="chat">
                    </ul>                </div>                <div class="panel-footer clearfix">                    <textarea id="message" class="form-control" rows="3"></textarea>                    <span class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-12" style="margin-top: 10px">                        <button class="btn btn-warning btn-lg btn-block" id="btn-chat">Send</button>                    </span>                </div>            </div>        </div>    </div></div>
<script id="new-message-other" type="text/template">    <li class="left clearfix">        <span class="chat-img pull-left">            <img src=" alt="User Avatar" class="img-circle" />        </span>        <div class="chat-body clearfix">            <p>                {{body}}            </p>        </div>    </li></script>
<script id="new-message" type="text/template">    <li id="{{id}}" class="right clearfix">        <div class="chat-body clearfix">            <p>                {{body}}            </p>        </div>    </li></script>
</body>&lt;/html>

Я использую шаблон из 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( " { message } );    });
    function onMessageAdded(data) {        let template = $("#new-message").html();        template = template.replace("{{body}}", data.message);
        $(".chat").append(template);    }});

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

Подписываемся на канал и событие под названием message-added. Канал общедоступн, поэтому его можно называть как угодно. Я решил добавить в свой префикс public- но это моя собственная договоренность о наименовании, поскольку для публичного канала нет правил. Разница между a public канал и a private или presence канал заключается в том, что публичный канал не требует аутентификации клиента, и на него может подписаться любой, кто знает название канала. Вы можете прочитать больше о каналах Pusher здесь.

Мы привязываемся к событию нажатия кнопки чата на странице, получаем сообщения с текстового поля на странице, а затем отправляем его на сервер с именем пользователя. После всех настроек мы можем запустить программу npm start. Вот краткий обзор того, как это работает на моем компьютере.

Ku2BCi85o9F4W6zDSp-rMyfpWngfvrCy3uLr

Свернуть

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

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

Добавить комментарий

Ваш адрес email не будет опубликован.