de Sudheesh Shetty

Cum să creați propria aplicație de chat în timp real

Cum sa creati propria aplicatie de chat in timp real

Aplicațiile de mesagerie cresc în popularitate. Ultimii ani au adus aplicații precum WhatsApp, Telegram, Signal și Line.

Oamenii par să prefere aplicațiile bazate pe chat, deoarece permit interacțiuni în timp real. De asemenea, adaugă o notă personală experienței.

De curând am participat la un atelier condus de Free Software Movement Karnataka în Bangalore unde am îndrumat un grup de studenți.

Citește mai multCum se face o promisiune dintr-o funcție de apel invers în JavaScript

În timpul interacțiunilor, am observat anumite lucruri:

  1. În ciuda încurajării elevilor să interacționeze cu mentorul, comunicarea a fost întotdeauna unilaterală.
  2. Elevii s-au simțit adesea prea timizi pentru a pune întrebări în timpul sesiunilor.
  3. Au fost mai confortabili punând întrebări și primind feedback în conversațiile individuale.

Așa că a trebuit să găsim o soluție pentru a sparge gheața dintre mentori și studenți. O aplicație de chat locală a fost utilă în această situație. Oamenilor le place să fie anonimi, ceea ce le conferă mai multă putere să se exprime și să întrebe oricând oriunde. Aceasta este aceeași mantră utilizată de majoritatea forumurilor populare de pe internet, cum ar fi Reddit și 4chan. Acestea sunt doar câteva exemple uriașe de aplicații semi-anonime.

Așa că am început să mă gândesc la această idee. Am venit cu câteva dintre cerințele și caracteristicile de bază.

  1. Utilizatorii se înregistrează dând un mâner, care este unic pentru fiecare utilizator (un nume fals). Numai mânerul va fi dezvăluit altor utilizatori. Deci, oamenii sunt liberi să aleagă orice mâner și, prin urmare, rămân anonimi.
  2. Un membru poate vedea alți membri care sunt online. Au opțiunea de a deveni public, care transmite mesajul tuturor membrilor online din chat.
  3. Pentru mesajele private, expeditorul ar trebui să trimită mai întâi o cerere celuilalt membru. Alți membri care acceptă cererea pot purta chat privat cu ei.

Tehnologie, Instrumente utilizate

  1. Stiva MEAN (Mongo, Express, Angular, Node).
  2. Socluri pentru a permite comunicarea individuală în timp real
  3. AJAX pentru înscriere și autentificare

Deci, cum puteți crea o aplicație simplă de chat?

În acest tutorial, vă voi ajuta să creați propria aplicație de chat. Mai târziu, vă puteți integra ca widget în orice proiect! Acest tutorial nu se va concentra pe dezvoltarea completă a unei aplicații de chat. Dar vă va ajuta să construiți unul.

Cerință prealabilă: Trebuie să cunoașteți câteva cunoștințe de bază despre MEAN Stack, întrucât le folosim pentru a construi una.

Citește mai multCum se generează un fișier de reducere GitHub din Microsoft Word utilizând TypeScript

Mai întâi, creați o structură de directoare de genul asta.

1611569886 705 Cum sa creati propria aplicatie de chat in timp real
Structura directorului proiectului

Instalare Node.js și MongoDB.

Vom folosi AngularJS 1 pentru acest tutorial. Descărcați biblioteca AngularJS din aici și copiați-l în folderul lib din directorul Client.

Dacă doriți să înfrumusețați aplicația, puteți descărca orice biblioteci CSS și le puteți copia și în lib.

Construirea serverului

Pasul 1 – Începeți proiectul:

Citește mai multAutentificare utilizând Google în ASP.NET Core 2.0

Accesați directorul Server și rulați această comandă:

npm init

Aceasta va începe un nou proiect. Furnizați toate detaliile necesare. pachet.json va fi creat și va arăta cam așa.

{
  "name": "chat",
  "version": "1.0.0",
  "description": "Chat application",
  "main": "server.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "Your name",
  "license": "ISC"
}

Pasul 2 – Instalați dependențele.

  • socket.io – este un javascript bibliotecă pentru aplicații web în timp real. Permite comunicarea bidirecțională în timp real între clienții web și servere.
  • expres – este un Node.js cadru de aplicații web. Acesta oferă setul de caracteristici pentru dezvoltarea aplicațiilor web și mobile. Se poate răspunde la cererea HTTP folosind diferite middlewares și, de asemenea, să redea pagini HTML.
npm install --save socket.io
npm install --save express

Aceasta va instala dependențele necesare și le va adăuga la pachet.json. Un câmp suplimentar va fi adăugat la pachet.json care va arăta astfel:

"dependencies": {
    "express": "^4.14.0",
    "socket.io": "^1.4.8"
  }

Pasul 3 – Crearea serverului

Creați un server care servește la portul 3000 și va trimite html la apelare.

Inițializați o nouă conexiune socket prin trecerea obiectului HTTP.

Eveniment conexiune va asculta soclurile primite.

Fiecare soclu emite Deconectat eveniment care va fi apelat de fiecare dată când un client se deconectează.

  • soclu.on așteaptă evenimentul. Ori de câte ori este declanșat acel eveniment, funcția de apel invers este apelată.
  • io.emit este folosit pentru a emite mesajul către toate prizele conectate la acesta.

Sintaxa este:

socket.on('event', function(msg){})
io.emit('event', 'message')

Creați un server cu nume server.js. Ar trebui:

  • tipăriți un mesaj pe consolă la un utilizator care se conectează
  • asculta mesaj de chat evenimente și difuzați mesajul primit la toate prizele conectate.
  • Ori de câte ori un utilizator deconectează, ar trebui să imprime mesajul pe consolă.

Serverul va arăta cam așa:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendfile('index.html');
});

io.on('connection', function(socket){
  console.log('user connected');
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

Construirea clientului

Creați index.html în directorul client, style.css în directorul css și app.js în directorul js din client.

index.html:

Permiteți-ne să scriem un HTML simplu care poate prelua mesajul nostru și îl poate afișa.

Include socket.io-client și angular.js în scriptul dvs. HTML.

<script src="https://www.freecodecamp.org/path/to/angular.js"></script>
<script src="/socket.io/socket.io.js"></script>

socket.io servește clientul pentru noi. Implicit se conectează la gazda care servește pagina. HTML-ul final arată cam așa:

<!doctype html>
<html ng-app="myApp">
  <head>
    <title>Socket.IO chat</title>
    <link rel="stylesheet" href="https://www.freecodecamp.org/css/style.css">
    <script src="/lib/angular/angular.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js">
    </script>
    <script src="/js/app.js"></script>
  </head>
  <body ng-controller="mainController">
    <ul id="messages"></ul>
    <div>
      <input id="m" ng-model="message" autocomplete="off" />
      <button ng-click="send()">Send</button>
    </div>
  </body>
</html>

css / style.css:

Dă-i un stil, astfel încât să arate ca o casetă de chat. Puteți folosi orice biblioteci.

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
div { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
div input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
div button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }

js / app.js:

Creați o aplicație angular.js și inițializați o conexiune socket.

  • soclu.on ascultă un anumit eveniment. Apelează o funcție de apel invers ori de câte ori este apelat acel eveniment.
  • soclu.emit este folosit pentru a emite mesajul la evenimentul particular.

Sintaxa de bază a ambelor sunt:

socket.on(‘event name’, function(msg){});
socket.emit('event name', message);

Deci, de fiecare dată când mesajul este tastat și se face clic pe buton, apelați funcția pentru a trimite mesajul.

Ori de câte ori soclul primește un mesaj, afișați-l.

JavaScript va arăta cam așa:

var app=angular.module('myApp',[]);

app.controller('mainController',['$scope',function($scope){
 var socket = io.connect();
 $scope.send = function(){
  socket.emit('chat message', $scope.message);
  $scope.message="";
 }
 socket.on('chat message', function(msg){
  var li=document.createElement("li");
  li.appendChild(document.createTextNode(msg));
  document.getElementById("messages").appendChild(li);
 });
}]);

Rularea aplicației

Accesați directorul serverului unde este prezent serverul nostru. Rulați serverul utilizând următoarea comandă:

node server.js

Serverul începe să ruleze pe portul 3000. Accesați browserul și tastați următoarea adresă URL:

http://localhost:3000

Cum se îmbunătățește aceeași aplicație

Puteți proiecta o bază de date pentru a salva detaliile și mesajele utilizatorului. Ar fi bine dacă designul ar fi scalabil, astfel încât să puteți adăuga mai multe caracteristici ulterior.

Trebuie să instalați Mongoose sau un modul MongoDB pentru a utiliza o bază de date Mongo:

npm install --save mongoose

sau:

npm install --save mongodb

Iată documentația de utilizat mangustă si mongodb modul.

Iată cum arată designul schemei mele:

{
 “_id” : ObjectId(“5809171b71e640556be904ef”),
 “name” : “Sudheesh Shetty”,
 “handle” : “sudheesh”,
 “password” : “556624370”,
 “phone” : “8888888888”,
 “email” : “[email protected]”,
 “friends” : [
    {
      “name” : “abc”,
      “status” : “Friend”
    },
    {
      “name” : “xyz”,
      “status” : “Friend”
    }
 ],
 “__v” : 0
}

Aici, statutul fiecărui membru poate fi:

  • Prieten: afirmă că membrul este prieten.
  • În așteptare: dacă membrul nu a acceptat încă.
  • Blocat: dacă membrul l-a blocat pe celălalt membru.

Să presupunem că membrul a respins o solicitare de chat. Expeditorul poate trimite din nou o cerere de chat. De asemenea, un utilizator poate salva mesajele prin crearea unei colecții suplimentare. Fiecare document va avea mesajul, expeditorul, receptorul și ora.

Deci, proiectați-vă baza de date în funcție de nevoile dvs. specifice și de modul în care doriți să gestionați mesajele.

2. Creați API-uri REST pentru a servi clientul. De exemplu, un punct final care trimite o pagină de pornire, din care utilizatorii pot face alte solicitări.

Câteva dintre obiectivele mele API sunt:

app.post(‘/register’,function(req,res){})

app.post(‘/login’,function(req,res){})

app.post(‘/friend_request’,function(req,res){})

app.post(‘/friend_request/confirmed’,function(req,res){})

3. Gândiți-vă la câteva caracteristici suplimentare interesante și implementați-le.

Am creat o aplicație de chat proprie:

sudheeshshetty / Chat
Contribuiți la dezvoltarea chat-ului prin crearea unui cont pe GitHub.github.com

Iată o privire rapidă asupra aplicației mele de chat:

Cum sa creati propria aplicatie de chat in timp real
Ecran de autentificare
1611569887 571 Cum sa creati propria aplicatie de chat in timp real
Cum arată după autentificare.

Vă rugăm să o priviți și să îi dați o stea în partea dreaptă sus, dacă vă place. Există multe modalități prin care aș putea îmbunătăți această aplicație. Dacă aveți sugestii, trimiteți-le la [email protected].

Puteți să mă urmăriți aici, făcând clic pe inima verde, dacă vi se pare util acest lucru, astfel încât mai mulți oameni să vadă acest lucru. Poti de asemenea urmează-mă pe GitHub și stare de nervozitate.