Kako izraditi vlastitu aplikaciju za chat u stvarnom vremenu

Aplikacije za razmjenu poruka rastu u popularnosti. Posljednjih nekoliko godina donijeli su aplikacije poput WhatsApp, Telegram, Signal i Line.

Čini se da ljudi više vole aplikacije temeljene na chatu jer omogućuju interakciju u stvarnom vremenu. Oni također dodaju osobni pečat iskustvu.

Nedavno sam prisustvovao radionici koju je vodio Pokret za slobodni softver Karnataka u Bangaloreu, gdje sam bio mentor grupi studenata.

Tijekom interakcija promatrao sam određene stvari:

  1. Unatoč poticanju učenika na interakciju s mentorom, komunikacija je uvijek bila jednostrana.
  2. Studenti su se često osjećali previše sramežljivo postavljati pitanja tijekom sesija.
  3. Bilo im je ugodnije postavljati pitanja i dobivati ​​povratne informacije u razgovorima jedan na jedan.

Zato smo morali pronaći rješenje za probijanje leda između mentora i učenika. Lokalna aplikacija za chat dobro je došla u ovoj situaciji. Ljudi vole biti anonimni, što im daje više snage da se izraze i pitaju bilo kad i bilo gdje. To je ista mantra koju koristi većina popularnih foruma na Internetu, poput Reddita i 4chan. Ovo je samo nekoliko divovskih primjera poluanonimnih aplikacija.

Tako sam počeo razmišljati o ovoj ideji. Došao sam do nekih osnovnih zahtjeva i značajki.

  1. Korisnici se registriraju davanjem upravljača, koji je jedinstven za svakog korisnika (lažno ime). Samo će ručica biti otkrivena ostalim korisnicima. Dakle, ljudi mogu slobodno odabrati bilo koji rukohvat i stoga ostaju anonimni.
  2. Član može vidjeti ostale članove koji su na mreži. Imaju mogućnost da postanu javni, što emitira poruku svim mrežnim članovima u chatu.
  3. Za privatne poruke pošiljatelj bi prvo trebao poslati zahtjev drugom članu. Ostali članovi nakon prihvaćanja zahtjeva mogu s njima privatno razgovarati.

Tehnologija, Korišteni alati

  1. MEAN Stog (Mongo, Express, Kutni, Čvor).
  2. Utičnice za omogućavanje komunikacije jedan na jedan u stvarnom vremenu
  3. AJAX za prijavu i prijavu

Pa kako stvoriti jednostavnu aplikaciju za chat?

U ovom uputstvu pomoći ću vam stvoriti vlastiti program za chat. Kasnije se možete integrirati kao dodatak u bilo koji projekt! Ovaj se vodič neće koncentrirati na cjeloviti razvoj aplikacije za chat. Ali to će vam pomoći da ga napravite.

Preduvjet: Morate znati neko osnovno znanje o MEAN Stacku, jer ga koristimo za njegovu izgradnju.

Prvo stvorite strukturu direktorija otprilike ovako.

Instalirajte Node.js i MongoDB.

Za ovaj ćemo vodič koristiti AngularJS 1. Preuzmite AngularJS knjižnicu odavde i kopirajte je u mapu lib u direktoriju Client.

Ako želite uljepšati aplikaciju, možete preuzeti bilo koju CSS biblioteku i kopirati je u lib.

Izgradnja poslužitelja

Korak 1 - Pokrenite projekt:

Idite u direktorij poslužitelja i pokrenite ovu naredbu:

npm init

Ovo će započeti novi projekt. Navedite sve potrebne detalje. Package.json će biti stvoren i da će izgledati nešto poput ovoga.

{ "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" }

Korak 2 - Instalirajte ovisnosti.

  • socket.io - je javascript biblioteka za web aplikacije u stvarnom vremenu. Omogućuje dvosmjernu komunikaciju u stvarnom vremenu između web klijenata i poslužitelja.
  • express - je okvir web aplikacije Node.js. Pruža skup značajki za razvoj weba i mobilnih aplikacija. Na HTTP zahtjev može se odgovoriti pomoću različitih posredničkih programa, a također se mogu prikazati i HTML stranice.
npm install --save socket.io npm install --save express

Ovo će instalirati potrebne ovisnosti i dodati ih u package.json. Dodatno polje bit će dodano paketu.json koji će izgledati ovako:

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

Korak 3 - Stvaranje poslužitelja

Stvorite poslužitelj koji poslužuje na portu 3000 i koji će poslati html kada ga pozovete.

Inicijalizirajte novu soketnu vezu prosljeđivanjem HTTP objekta.

Veza događaja će slušati dolazne utičnice.

Svaka utičnica emitira događaj odspajanja koji će se pozivati ​​kad god se klijent prekine.

  • socket.on waits for the event. Whenever that event is triggered the callback function is called.
  • io.emit is used to emit the message to all sockets connected to it.

The syntax is:

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

Create a server with name server.js. It should:

  • print a message to the console upon a user connecting
  • listen for chat message events and broadcast the received message to all sockets connected.
  • Whenever a user disconnects, it should print the message to the console.

The server will look something like this:

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'); });

Building the Client

Create the index.html in the client directory, style.css in the css directory and app.js in js directory in the client.

index.html:

Let us write a simple HTML which can take our message and also display it.

Include socket.io-client and angular.js in your HTML script.

socket.io serves the client for us. It defaults to connect to the host that serves the page. Final HTML looks something like this:

   Socket.IO chat         
    
    Send

    css/style.css:

    Give it some styling so that it looks like a chatbox. You can make use of any libraries.

    * { 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:

    Create an angular.js app and initialize a socket connection.

    • socket.on listens for a particular event. It calls a callback function whenever that event is called.
    • socket.emit is used to emit the message to the particular event.

    Basic syntax of both are:

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

    So whenever the message is typed and the button is clicked, call the function to send the message.

    Whenever the socket receives a message, display it.

    The JavaScript will look something like this:

    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); }); }]);

    Running the application

    Go to server directory where our server is present. Run the server using the following command:

    node server.js

    The server starts running on port 3000. Go to the browser and type the following url:

    //localhost:3000

    How to improve the same application

    You can design a database to save user details and messages. It would be good if the design was scalable so that you could add more features later.

    You need to install Mongoose or a MongoDB module to make use of a Mongo database:

    npm install --save mongoose

    or:

    npm install --save mongodb

    Here’s the documentation to use mongoose and the mongodb module.

    Here’s what my schema design looks like:

    { “_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 }

    Here, the status of each member can be:

    • Friend: Stating that the member is a friend.
    • Pending: If the member has not yet accepted.
    • Blocked: If the member has blocked the other member.

    Suppose the member has rejected a chat request. The sender can then send a chat request again. A user can also save the messages by creating an extra collection. Each document will have the message, sender, receiver, and time.

    So design your database according to your specific needs and how you want to handle messages.

    2. Create REST APIs to serve the client. For example, an endpoint that sends a home page, from which users can make other requests.

    Few of my API endpoints are:

    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. Think of some cool additional features and implement them.

    I have created a chat application of my own:

    sudheeshshetty/Chat

    Contribute to Chat development by creating an account on GitHub.github.com

    Here’s a quick glance at my chat application:

    Please do look at it, and give it a star at the top right if you like it. There are many ways I could improve this application. If you have any suggestions, send them to me at [email protected]

    You can follow me here on click the green heart if you found this helpful so that more people will see this. You can also follow me on GitHub and twitter.