Comment j'ai créé une application de chat publique et anonyme en JavaScript

Nous connaissons tous la messagerie instantanée et nous l'utilisons pour discuter avec les gens en temps réel. Parfois, cependant, nous pouvons souhaiter une application qui nous permet d'envoyer des messages de manière anonyme à des amis ou de discuter de manière anonyme avec des inconnus à proximité. Un exemple d'une telle application est Truth, qui vous permet de parler avec les personnes de votre liste de contacts sans divulguer votre identité.

Dans ce didacticiel, je vais vous montrer comment créer une application de chat anonyme publique en JavaScript (en utilisant NodeJS et Express sur le serveur et VanillaJS sur le client) et Pusher. Pusher nous permet de créer des applications temps réel évolutives et fiables. Comme nous avons besoin de la livraison en temps réel des messages de chat, il s'agit d'un composant clé de l'application de chat. L'image ci-dessous illustre ce que nous allons construire:

Commencer

Commençons par vous inscrire pour un compte Pusher gratuit (ou vous connecter si vous en avez déjà un). Une fois que vous êtes connecté, créez une nouvelle application Pusher à partir du tableau de bord et notez votre ID d'application, votre clé et votre secret, qui sont uniques à une application.

Pour créer une nouvelle application Pusher, cliquez sur le Your appsmenu latéral, puis sur l'icôneCreate a new appbouton sous le tiroir. Cela fait apparaître l'assistant de configuration.

  1. Saisissez un nom pour l'application. Dans ce cas, je l'appellerai «chat».
  2. Sélectionnez un cluster.
  3. Sélectionnez l'option «Créer une application pour plusieurs environnements» si vous souhaitez disposer de différentes instances pour le développement, la mise en scène et la production.
  4. Sélectionnez Vanilla JS comme frontend et NodeJS comme backend.
  5. Terminez le processus en cliquant sur le Create my appbouton pour configurer votre instance d'application.

Codez le serveur

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