Πώς δημιούργησα μια δημόσια, ανώνυμη εφαρμογή συνομιλίας σε JavaScript

Είμαστε όλοι εξοικειωμένοι με τα άμεσα μηνύματα και το χρησιμοποιούμε για συνομιλία με άτομα σε πραγματικό χρόνο. Μερικές φορές, ωστόσο, μπορεί να θέλουμε μια εφαρμογή που μας επιτρέπει να στέλνουμε μηνύματα ανώνυμα σε φίλους ή να συνομιλούμε ανώνυμα με ξένους σε κοντινή απόσταση. Ένα παράδειγμα μιας τέτοιας εφαρμογής είναι η Αλήθεια, η οποία σας επιτρέπει να μιλάτε με άτομα στη λίστα επαφών σας χωρίς να αποκαλύπτετε την ταυτότητά σας.

Σε αυτό το σεμινάριο, θα σας δείξω πώς να δημιουργήσετε μια δημόσια ανώνυμη εφαρμογή συνομιλίας σε JavaScript (χρησιμοποιώντας NodeJS και Express στον διακομιστή και VanillaJS στον πελάτη) και Pusher. Το Pusher μας επιτρέπει να δημιουργήσουμε επεκτάσιμες και αξιόπιστες εφαρμογές σε πραγματικό χρόνο. Δεδομένου ότι χρειαζόμαστε την παράδοση μηνυμάτων συνομιλίας σε πραγματικό χρόνο, αυτό είναι ένα βασικό στοιχείο της εφαρμογής συνομιλίας. Η παρακάτω εικόνα απεικονίζει τι θα οικοδομήσουμε:

Ξεκινώντας

Ας ξεκινήσουμε κάνοντας εγγραφή για δωρεάν λογαριασμό Pusher (ή συνδεθείτε εάν έχετε ήδη έναν). Μόλις συνδεθείτε, δημιουργήστε μια νέα εφαρμογή Pusher από τον πίνακα ελέγχου και σημειώστε το αναγνωριστικό εφαρμογής, το κλειδί και το μυστικό σας, τα οποία είναι μοναδικά για μια εφαρμογή.

Για να δημιουργήσετε μια νέα εφαρμογή Pusher, κάντε κλικ στο Your appsπλευρικό μενού και, στη συνέχεια, κάντε κλικ στοCreate a new appκουμπί κάτω από το συρτάρι. Αυτό εμφανίζει τον οδηγό εγκατάστασης.

  1. Εισαγάγετε ένα όνομα για την εφαρμογή. Σε αυτήν την περίπτωση, θα το ονομάσω «συνομιλία».
  2. Επιλέξτε ένα σύμπλεγμα.
  3. Ορίστε την επιλογή "Δημιουργία εφαρμογής για πολλά περιβάλλοντα" εάν θέλετε να έχετε διαφορετικές παρουσίες για ανάπτυξη, στάδια και παραγωγή.
  4. Επιλέξτε Vanilla JS ως frontend και NodeJS ως backend.
  5. Ολοκληρώστε τη διαδικασία κάνοντας κλικ στο Create my appκουμπί για να ρυθμίσετε την παρουσία της εφαρμογής σας.

Κωδικοποιήστε τον διακομιστή

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.