Conosciamo tutti la messaggistica istantanea e la usiamo per chattare con le persone in tempo reale. A volte, tuttavia, potremmo desiderare un'app che ci consenta di inviare messaggi in modo anonimo agli amici o di chattare in modo anonimo con estranei nelle immediate vicinanze. Un esempio di tale app è Truth, che ti consente di parlare con le persone nel tuo elenco di contatti senza rivelare la tua identità.

In questo tutorial, ti mostrerò come creare un'app di chat anonima pubblica in JavaScript (utilizzando NodeJS ed Express sul server e VanillaJS sul client) e Pusher. Pusher ci consente di creare applicazioni in tempo reale scalabili e affidabili. Poiché abbiamo bisogno della consegna in tempo reale dei messaggi di chat, questo è un componente chiave dell'app di chat. L'immagine sotto mostra ciò che costruiremo:

Iniziare

Cominciamo registrandoti per un account Pusher gratuito (o effettuando l'accesso se ne hai già uno). Dopo aver effettuato l'accesso, crea una nuova app Pusher dalla dashboard e prendi nota dell'ID app, della chiave e del segreto, che sono univoci per un'app.

Per creare una nuova app Pusher, fai clic sul Your appsmenu laterale, quindi fai clic suCreate a new apppulsante sotto il cassetto. Questo fa apparire la procedura guidata di configurazione.

1. Immettere un nome per l'applicazione. In questo caso, la chiamerò "chat".
2. Seleziona un cluster.
3. Seleziona l'opzione "Crea app per più ambienti" se desideri avere istanze diverse per sviluppo, gestione temporanea e produzione.
4. Seleziona Vanilla JS come frontend e NodeJS come backend.
5. Completa il processo facendo clic sul Create my apppulsante per configurare l'istanza dell'app.

Code-up del server

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.