Kako sam izradio javnu, anonimnu aplikaciju za chat u JavaScriptu

Svima su nam poznate trenutne poruke i njihovo korištenje za čavrljanje s ljudima u stvarnom vremenu. Ponekad bismo ipak mogli zatražiti aplikaciju koja nam omogućuje anonimno slanje poruka prijateljima ili anonimno čavrljanje s nepoznatim osobama u neposrednoj blizini. Primjer takve aplikacije je Istina koja vam omogućuje razgovor s ljudima na vašem popisu kontakata bez otkrivanja vašeg identiteta.

U ovom uputstvu pokazat ću vam kako izraditi javnu anonimnu aplikaciju za chat u JavaScriptu (koristeći NodeJS i Express na poslužitelju i VanillaJS na klijentu) i Pusheru. Pusher nam omogućuje izgradnju skalabilnih i pouzdanih aplikacija u stvarnom vremenu. Budući da nam je potrebna isporuka chat poruka u stvarnom vremenu, ovo je ključna komponenta aplikacije za chat. Slika ispod prikazuje što ćemo graditi:

Početak rada

Krenimo tako da se prijavimo za besplatni račun Pusher (ili se prijavimo ako ga već imate). Nakon što se prijavite, na nadzornoj ploči izradite novu aplikaciju Pusher i zabilježite svoj ID aplikacije, ključ i tajnu koji su jedinstveni za aplikaciju.

Da biste stvorili novu aplikaciju Pusher, kliknite Your appsbočni izbornik, a zatim klikniteCreate a new appgumb ispod ladice. Ovo otvara čarobnjaka za postavljanje.

  1. Unesite naziv aplikacije. U ovom slučaju to ću nazvati "chat".
  2. Odaberite grupu.
  3. Odaberite opciju "Stvori aplikaciju za više okruženja" ako želite imati različite instance za razvoj, postavljanje i produkciju.
  4. Odaberite Vanilla JS kao sučelje i NodeJS kao pozadinu.
  5. Dovršite postupak klikom na Create my appgumb za postavljanje instance aplikacije.

Code-up poslužitelja

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.