Kuidas luua oma reaalajas vestlusrakendus

Sõnumirakenduste populaarsus kasvab. Viimased aastad on toonud rakendusi nagu WhatsApp, Telegram, Signal ja Line.

Inimesed näivad eelistavat vestluspõhiseid rakendusi, kuna need võimaldavad suhelda reaalajas. Samuti lisavad need kogemusele isikupärase puudutuse.

Käisin hiljuti Bangalore vabatarkvara liikumise Karnataka poolt läbi viidud töötoas, kus juhendasin rühma üliõpilasi.

Suhtlemise ajal jälgisin teatud asju:

  1. Vaatamata õpilaste julgustamisele mentoriga suhtlema, oli suhtlus alati ühepoolne.
  2. Õpilased tundsid end sessioonide ajal sageli liiga häbelikud, et küsimusi esitada.
  3. Neil oli mugavam ükshaaval vesteldes küsimusi esitada ja tagasisidet saada.

Seega pidime leidma lahenduse, kuidas mentorid ja üliõpilased jääd murda. Selles olukorras oli mugav kohalik vestlusrakendus. Inimesed armastavad olla anonüümsed, mis annab neile rohkem jõudu ennast väljendada ja igal ajal ja igal ajal küsida. See on sama mantra, mida kasutavad enamik Interneti populaarseid foorumeid, näiteks Reddit ja 4chan. Need on vaid mõned hiidnäited poolanonüümsetest rakendustest.

Niisiis hakkasin selle idee peale mõtlema. Mõtlesin välja mõned põhinõuded ja funktsioonid.

  1. Kasutajad registreeruvad, andes igale kasutajale ainulaadse käepideme (näiv nimi). Ainult käepide avaldatakse teistele kasutajatele. Nii saavad inimesed vabalt valida mis tahes käepideme ja jäävad seetõttu anonüümseks.
  2. Liige näeb teisi võrgus olevaid liikmeid. Neil on võimalus avalikuks saada, mis edastab sõnumi kõigile vestluses olevatele veebiliikmetele.
  3. Privaatsõnumite puhul peaks saatja esmalt saatma taotluse teisele liikmele. Teised liikmed saavad taotluse aktsepteerimisel nendega vestelda.

Tehnoloogia, kasutatud tööriistad

  1. TÄHENDA virna (mongo, ekspress, nurgeline, sõlm).
  2. Pistikupesad reaalajas üks-ühele suhtlemise võimaldamiseks
  3. AJAX registreerumiseks ja sisselogimiseks

Niisiis, kuidas luua lihtne vestlusrakendus?

Selles õpetuses aitan teil luua oma vestlusrakenduse. Hiljem saate vidina abil integreerida mis tahes projekti! See õpetus ei keskendu vestlusrakenduse täielikule väljatöötamisele. Kuid see aitab teil seda üles ehitada.

Eeltingimus: peate teadma mõningaid põhiteadmisi MEAN Stacki kohta, kuna me kasutame neid selle loomiseks.

Kõigepealt looge kataloogistruktuur umbes selline.

Installige Node.js ja MongoDB.

Selle õpetuse jaoks kasutame AngularJS 1-d. Laadige siit alla AngularJS-i teek ja kopeerige see kliendi kataloogi lib-kausta.

Kui soovite rakendust kaunistada, saate alla laadida kõik CSS-i teegid ja need ka lib-i kopeerida.

Serveri loomine

1. samm - alustage projekti:

Minge serveri kataloogi ja käivitage see käsk:

npm init

See alustab uut projekti. Esitage kõik vajalikud üksikasjad. Package.json luuakse ja vaatame midagi sellist.

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

2. samm - installige sõltuvused.

  • socket.io - on javascripti teek reaalajas veebirakenduste jaoks. See võimaldab reaalajas kahesuunalist suhtlust veebiklientide ja serverite vahel.
  • express - on Node.js veebirakenduste raamistik. See pakub veebi- ja mobiilirakenduste arendamiseks vajalikke funktsioone. HTTP-päringule saab vastata erinevate vaheseadmete abil ja renderdada ka HTML-lehti.
npm install --save socket.io npm install --save express

See installib vajalikud sõltuvused ja lisab need faili package.json. Paketile package.json lisatakse täiendav väli, mis näeb välja selline:

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

3. samm - serveri loomine

Looge server, mis teenindab porti 3000 ja saadab kutsumisel html.

Alustage uus sokliühendus, edastades HTTP-objekti.

Sündmuse ühendus kuulab sissetulevaid pistikupesasid.

Iga pesa väljastab ühenduse katkestamise sündmuse, mida kutsutakse alati, kui klient katkestab ühenduse.

  • pesa.on ootab sündmust. Kui see sündmus käivitatakse, kutsutakse tagasihelistamisfunktsiooni.
  • io.emit kasutatakse teate edastamiseks kõigisse sellega ühendatud pistikupesadesse.

Süntaks on:

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

Looge server nimega server.js. See peaks:

  • printige konsoolile sõnum pärast ühenduse loomist
  • kuulake vestlussõnumite sündmusi ja edastage vastuvõetud sõnumit kõikidesse pistikupesadesse.
  • Kui kasutaja katkestab ühenduse, peaks ta printima sõnumi konsooli.

Server näeb välja umbes selline:

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

Kliendi ülesehitamine

Looge index.html kliendikataloogis, style.css kataloogis css ja rakendus.js kliendi js kataloogis.

index.html:

Kirjutagem lihtne HTML, mis suudaks meie sõnumi võtta ja seda ka kuvada.

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:

    Vaadake seda ja andke talle paremas ülaosas tärn, kui see teile meeldib. Selle rakenduse täiustamiseks on palju võimalusi. Kui teil on ettepanekuid, saatke need mulle aadressil [email protected]

    Kui leiate, et see on kasulik, et seda näeksid rohkem inimesed, võite mind siin jälgida ja klõpsata rohelisel südamel Samuti saate mind jälgida GitHubis ja twitteris.