de Peter Mbanugo

Cum am construit o aplicație de chat publică și anonimă în JavaScript

Cum am construit o aplicatie de chat publica si anonima
Fotografie de Kristina Făină pe Unsplash

Suntem cu toții familiarizați cu mesageria instantanee și o folosim pentru a conversa cu oamenii în timp real. Uneori, totuși, am putea dori o aplicație care să ne permită să trimitem mesaje anonim prietenilor sau să discutăm anonim cu străini din imediata apropiere. Un exemplu de astfel de aplicație este Adevăr, care vă permite să discutați cu persoanele din lista dvs. de contacte fără a vă dezvălui identitatea.

În acest tutorial, vă voi arăta cum să creați o aplicație publică de chat anonimă în JavaScript (folosind NodeJS și Express pe server și VanillaJS pe client) și Pusher. Pusher ne permite să construim aplicații scalabile și fiabile în timp real. Deoarece avem nevoie de livrarea în timp real a mesajelor de chat, aceasta este o componentă cheie a aplicației de chat. Imaginea de mai jos descrie ce vom construi:

Cum am construit o aplicatie de chat publica si anonima
Produsul final

Noțiuni de bază

Să începem înscrierea pentru un cont Pusher gratuit (sau autentificarea dacă aveți deja unul). După ce v-ați conectat, creați o nouă aplicație Pusher din bord și notați ID-ul aplicației, cheia și secretul, care sunt unice pentru o aplicație.

Pentru a crea o nouă aplicație Pusher, faceți clic pe Your apps meniul lateral, apoi faceți clic pe Create a new app butonul de sub sertar. Aceasta afișează expertul de configurare.

  1. Introduceți un nume pentru aplicație. În acest caz, îl voi numi „chat”.
  2. Selectați un cluster.
  3. Selectați opțiunea „Creați aplicație pentru mai multe medii” dacă doriți să aveți instanțe diferite pentru dezvoltare, etapizare și producție.
  4. Selectați Vanilie JS ca frontend și NodeJS ca backend.
  5. Finalizați procesul făcând clic pe Create my app pentru a configura instanța aplicației.
Cum am construit o aplicatie de chat publica si anonima
Crearea aplicației Push

Codificați serverul

Avem nevoie de un backend care să ne servească fișierele statice și, de asemenea, să accepte mesaje de la un client și apoi să fie difuzat către alți clienți conectați prin Pusher. Backend-ul nostru va fi scris în NodeJS, deci trebuie să-l configurăm.

Avem nevoie de package.json fișier și îl voi adăuga executând comanda de mai jos. Voi folosi valorile implicite furnizate apăsând Enter pentru fiecare solicitare.

$ npm init

Cu package.json fișier adăugat, îl voi instala Expres, body-parser, și Pusher pachete npm. Rulați următoarea comandă:

$ npm install –salvați parher-ul pusher express body

Cu aceste pachete instalate, să adăugăm un nou fișier numit server.js cu următorul conținut:

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}!`)});

Cu codul de mai sus, am definit un punct final /message care va fi folosit de un client pentru a trimite un mesaj altui prin Pusher. Celelalte rute sunt folosite pentru a servi fișierele statice pe care le vom adăuga ulterior.

Înlocuiți șirurile de substituent ID aplicație, secret și cheie cu valorile din tabloul de bord Pusher. Adăugați această declarație "start": "node server.js" în scenariu proprietatea noastră package.json fişier. Acest lucru ne va permite să pornim serverul atunci când rulăm npm start.

Construirea frontendului

Trecând la frontend, să adăugăm un nou folder numit public. Acest dosar va conține pagina noastră și fișierele JavaScript. Adăugați un fișier nou numit stil.css cu conținutul de mai jos, care va păstra definiția stilului nostru pentru pagină.

@import url("https://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;}

Adăugați un alt fișier numit index.html cu marcajul de mai jos.

<!DOCTYPE html><html><head>    <!-- Latest compiled and minified CSS -->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script        src="https://code.jquery.com/jquery-2.2.4.min.js"        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="        crossorigin="anonymous"><;/script>
    <!-- Latest compiled and minified JavaScript -->    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;</script>
    <link rel="stylesheet" href="https://www.freecodecamp.org/news/how-i-built-a-public-anonymous-chat-app-in-javascript-34f082b9b98/style.css">    <script src="https://js.pusher.com/4.0/pusher.min.js"></script>    <script src="index.js"></script></head><body>    <div class="container">    <div class="row form-group">        <div class="col-xs-12 col-md-offset-2 col-md-8 col-lg-8 col-lg-offset-2">            <div class="panel panel-primary">                <div class="panel-heading">                    <span class="glyphicon glyphicon-comment"></span> Anonymous Chat                    <div class="btn-group pull-right">                        <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">                            <span class="glyphicon glyphicon-chevron-down"></span>                        </button>                        <ul class="dropdown-menu slidedown">                            <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-refresh">                            </span>Refresh</a></li>                            <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-ok-sign">                            </span>Available</a></li>                            <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-remove">                            </span>Busy</a></li>                            <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-time"></span>                                Away</a></li>                            <li class="divider"></li>                            <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-off"></span>                                Sign Out</a></li>                        </ul>                    </div>                </div>                <div class="panel-body body-panel">                    <ul class="chat">
                    </ul>                </div>                <div class="panel-footer clearfix">                    <textarea id="message" class="form-control" rows="3"></textarea>                    <span class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-12" style="margin-top: 10px">                        <button class="btn btn-warning btn-lg btn-block" id="btn-chat">Send</button>                    </span>                </div>            </div>        </div>    </div></div>
<script id="new-message-other" type="text/template">    <li class="left clearfix">        <span class="chat-img pull-left">            <img src="https://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />        </span>        <div class="chat-body clearfix">            <p>                {{body}}            </p>        </div>    </li></script>
<script id="new-message" type="text/template">    <li id="{{id}}" class="right clearfix">        <div class="chat-body clearfix">            <p>                {{body}}            </p>        </div>    </li></script>
</body>&lt;/html>

Folosesc un șablon de la bootsnipp care a fost ușor modificată pentru a afișa doar numele și mesajul.

Adăugați un fișier nou numit index.js cu conținutul de mai jos. Nu uitați să adăugați detaliile aplicației Pusher:

$(document).ready(function(){        var pusher = new Pusher('APP_KEY', {        cluster: 'APP_CLUSTER',        encrypted: false    });
    let channel = pusher.subscribe('public-chat');    channel.bind('message-added', onMessageAdded);
    $('#btn-chat').click(function(){        const message = $("#message").val();        $("#message").val("");
        //send message        $.post( "http://localhost:5000/message", { message } );    });
    function onMessageAdded(data) {        let template = $("#new-message").html();        template = template.replace("{{body}}", data.message);
        $(".chat").append(template);    }});

Cu codul din acest fișier, primim mesajul care urmează să fie trimis și apoi apelăm serverul cu mesajul. După aceea, ne conectăm la Pusher creând un nou obiect Pusher cu cheia aplicației și Clusterul pe care le-ați setat mai devreme.

Ne abonăm la un canal și la un eveniment numit message-added. Canalul este un canal public, deci poate fi numit în orice fel doriți. Am ales să o prefixez cu a mea public- dar aceasta este doar propria mea convenție de numire personală, deoarece nu există reguli pentru un canal public. Diferența dintre a public canal și a private sau presence canalul este că un canal public nu necesită autentificarea unui client și poate fi abonat de oricine știe numele canalului. Puteți citi mai multe despre canalele Pusher Aici.

Ne conectăm la evenimentul de clic al butonului de chat de pe pagină, preluăm mesajul din caseta de text de pe pagină, apoi îl trimitem la server cu numele de utilizator. Cu tot ce avem configurat, putem porni aplicația rulând npm start. Iată o privire asupra modului în care funcționează pe computerul meu.

1611927246 565 Cum am construit o aplicatie de chat publica si anonima

Învelire

Aceasta este o aplicație pentru a arăta cum puteți utiliza Pusher pentru a trimite mesaje în timp real. Am creat o aplicație publică de chat anonimă care permite vizitatorilor site-ului dvs. web să-și trimită mesaje anonime în timp real. Puteți găsi codul aici GitHub

Acest lucru a fost publicat inițial pe Pusher