Wie ich eine öffentliche, anonyme Chat-App in JavaScript erstellt habe

Wir sind alle mit Instant Messaging vertraut und verwenden es, um in Echtzeit mit Menschen zu chatten. Manchmal möchten wir jedoch möglicherweise eine App, mit der wir Nachrichten anonym an Freunde senden oder anonym mit Fremden in unmittelbarer Nähe chatten können. Ein Beispiel für eine solche App ist Truth, mit der Sie mit Personen auf Ihrer Kontaktliste sprechen können, ohne Ihre Identität preiszugeben.

In diesem Tutorial zeige ich Ihnen, wie Sie eine öffentliche anonyme Chat-App in JavaScript (mit NodeJS und Express auf dem Server und VanillaJS auf dem Client) und Pusher erstellen. Mit Pusher können wir skalierbare und zuverlässige Echtzeitanwendungen erstellen. Da wir die Zustellung von Chat-Nachrichten in Echtzeit benötigen, ist dies eine Schlüsselkomponente der Chat-App. Das Bild unten zeigt, was wir bauen werden:

Loslegen

Beginnen wir mit der Anmeldung für ein kostenloses Pusher-Konto (oder der Anmeldung, falls Sie bereits eines haben). Sobald Sie angemeldet sind, erstellen Sie eine neue Pusher-App über das Dashboard und notieren Sie sich Ihre App-ID, Ihren Schlüssel und Ihr Geheimnis, die für eine App eindeutig sind.

Um eine neue Pusher-App zu erstellen, klicken Sie auf das Your appsSeitenmenü und dann aufCreate a new appKnopf unter der Schublade. Dadurch wird der Setup-Assistent aufgerufen.

  1. Geben Sie einen Namen für die Anwendung ein. In diesem Fall nenne ich es "Chat".
  2. Wählen Sie einen Cluster aus.
  3. Wählen Sie die Option "App für mehrere Umgebungen erstellen", wenn Sie unterschiedliche Instanzen für Entwicklung, Staging und Produktion haben möchten.
  4. Wählen Sie Vanilla JS als Frontend und NodeJS als Backend.
  5. Schließen Sie den Vorgang ab, indem Sie auf die Create my appSchaltfläche klicken , um Ihre App-Instanz einzurichten.

Codieren Sie den 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.

Original text