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

Всички сме запознати с незабавните съобщения и ги използваме за чат с хора в реално време. Понякога обаче може да се наложи приложение, което ни позволява да изпращаме съобщения анонимно на приятели или да разговаряме анонимно с непознати в непосредствена близост. Пример за такова приложение е Истината, която ви позволява да говорите с хора от списъка ви с контакти, без да разкривате самоличността си.

В този урок ще ви покажа как да създадете публично анонимно приложение за чат в JavaScript (използвайки NodeJS и Express на сървъра и VanillaJS на клиента) и Pusher. Pusher ни позволява да изграждаме мащабируеми и надеждни приложения в реално време. Тъй като се нуждаем от доставка на чат съобщения в реално време, това е ключов компонент на приложението за чат. Изображението по-долу изобразява какво ще изграждаме:

Приготвяме се да започнем

Нека започнем, като се регистрирате за безплатен акаунт в Pusher (или влезте, ако вече имате такъв). След като влезете в системата, създайте ново приложение Pusher от таблото за управление и направете бележка за вашия идентификатор на приложението, ключ и секрет, които са уникални за приложението.

За да създадете ново приложение Pusher, щракнете върху Your appsстраничното меню, след това върхуCreate a new appбутон под чекмеджето. Това извежда съветника за настройка.

  1. Въведете име за приложението. В този случай ще го нарека „чат“.
  2. Изберете клъстер.
  3. Изберете опцията „Създаване на приложение за множество среди“, ако искате да имате различни екземпляри за разработка, постановка и производство.
  4. Изберете Vanilla JS като интерфейс и NodeJS като бекенд.
  5. Завършете процеса, като щракнете върху Create my appбутона, за да настроите екземпляра на приложението си.

Кодирайте сървъра

We need a backend which will serve our static files and also accept messages from a client and then broadcast to other connected clients through Pusher. Our backend will be written in NodeJS, so we need to set it up.

We need a package.json file, and I’ll add it by running the command below. I’ll use the defaults provided by hitting enter for every prompt.

$ npm init

With the package.json file added, I’ll install Express, body-parser, and Pusher npm packages. Run the following command:

$ npm install –save pusher express body-parser

With these packages installed, let’s add a new file called server.js with the following content:

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}!`)});

With the code above, we have defined an end-point /message which will be used by one client to send a message to another through Pusher. The other routes are used to serve the static files which we will add later.

Replace the placeholder strings App ID, Secret, and Key with the values from your Pusher dashboard. Add this statement "start": "node server.js" in the script property of our package.json file. This will allow us to start the server when we run npm start.

Building the frontend

Moving on to the frontend, let’s add a new folder called public. This folder will contain our page and JavaScript files. Add a new file called style.css with the content below, which will hold our style definition for the page.

@import url("//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;}

Add another file called index.html with the markup below.

Original text