Hvordan jeg byggede en offentlig, anonym chat-app i JavaScript

Vi er alle fortrolige med instant messaging og bruger det til at chatte med folk i realtid. Nogle gange vil vi dog muligvis have en app, der giver os mulighed for at sende beskeder anonymt til venner eller chatte anonymt med fremmede i umiddelbar nærhed. Et eksempel på en sådan app er Sandhed, som giver dig mulighed for at tale med folk på din kontaktliste uden at afsløre din identitet.

I denne vejledning viser jeg dig, hvordan du opbygger en offentlig anonym chat-app i JavaScript (ved hjælp af NodeJS og Express på serveren og VanillaJS på klienten) og Pusher. Pusher giver os mulighed for at opbygge skalerbare og pålidelige realtidsapplikationer. Da vi har brug for levering i realtid af chatbeskeder, er dette en nøglekomponent i chatappen. Billedet nedenfor viser, hvad vi skal bygge:

Kom godt i gang

Lad os starte med at tilmelde dig en gratis Pusher-konto (eller logge ind, hvis du allerede har en). Når du er logget ind, skal du oprette en ny Pusher-app fra instrumentbrættet og notere dit app-id, nøgle og hemmelighed, som er unikke for en app.

For at oprette en ny Pusher-app skal du klikke på Your appssidemenuen og derefter klikke påCreate a new appknappen under skuffen. Dette bringer installationsguiden op.

  1. Indtast et navn til applikationen. I dette tilfælde kalder jeg det "chat".
  2. Vælg en klynge.
  3. Vælg indstillingen "Opret app til flere miljøer", hvis du vil have forskellige forekomster til udvikling, iscenesættelse og produktion.
  4. Vælg Vanilla JS som frontend og NodeJS som backend.
  5. Afslut processen ved at klikke på Create my appknappen for at konfigurere din appinstans.

Kod op serveren

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.