Hogyan építettem egy nyilvános, névtelen csevegőalkalmazást JavaScript-ben

Mindannyian ismerjük az azonnali üzenetküldést és annak használatát, hogy valós időben csevegjünk az emberekkel. Néha azonban szükségünk lehet olyan alkalmazásra, amely lehetővé teszi számunkra, hogy névtelenül küldjünk üzeneteket a barátoknak, vagy névtelenül csevegjünk idegenekkel a közvetlen közelében. Ilyen alkalmazásra példa az Igazság, amely lehetővé teszi, hogy személyazonosságának felfedése nélkül beszélhessen a névjegyzékben szereplő emberekkel.

Ebben az oktatóanyagban bemutatom, hogyan lehet nyilvános névtelen csevegőalkalmazást létrehozni a JavaScript-ben (a NodeJS és az Express használatával a kiszolgálón, és a VanillaJS használatával az ügyfélen) és a Pusherben. A Pusher segítségével skálázható és megbízható valós idejű alkalmazásokat készíthetünk. Mivel a chat-üzenetek valós idejű kézbesítésére van szükségünk, ez a csevegőalkalmazás kulcsfontosságú eleme. Az alábbi kép azt ábrázolja, hogy mit fogunk építeni:

Elkezdeni

Induljunk úgy, hogy regisztrálunk egy ingyenes Pusher-fiókra (vagy bejelentkezünk, ha már van ilyen). Miután bejelentkezett, hozzon létre egy új Pusher alkalmazást az irányítópultról, és jegyezze fel az alkalmazás egyedi azonosítóját, kulcsát és titkát.

Új Pusher alkalmazás létrehozásához kattintson az Your appsoldalsó menüre, majd aCreate a new appgombot a fiók alatt. Ez előhívja a telepítő varázslót.

1. Írja be az alkalmazás nevét. Ebben az esetben „csevegésnek” hívom.
2. Válasszon ki egy fürtöt.
3. Válassza az „Alkalmazás létrehozása több környezethez” opciót, ha különböző példányokat szeretne fejleszteni, futtatni és gyártani.
4. Válassza a Vanilla JS- t frontendként, a NodeJS-t pedig backendként.
5. A folyamat befejezéséhez kattintson a Create my appgombra az alkalmazáspéldány beállításához.

Kódolja be a szervert

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.