Hogyan készítsünk saját valós idejű csevegőalkalmazást

Programozás

Az üzenetküldő alkalmazások népszerűsége növekszik. Az elmúlt évek olyan alkalmazásokat hoztak, mint a WhatsApp, a Telegram, a Signal és a Line.

Úgy tűnik, hogy az emberek inkább a csevegésen alapuló alkalmazásokat részesítik előnyben, mert lehetővé teszik a valós idejű interakciókat. Ezenkívül személyes élményt nyújtanak az élményben.

Nemrégiben részt vettem a Karnataka Szabad Szoftver Mozgalom által vezetett workshopon Bangalore-ban, ahol egyetemi hallgatók csoportját mentoráltam.

Az interakciók során bizonyos dolgokat figyeltem meg:

  1. Annak ellenére, hogy a hallgatókat bátorították a mentorral való kapcsolatra, a kommunikáció mindig egyoldalú volt.
  2. A hallgatók gyakran túl félénknek érezték magukat ahhoz, hogy kérdéseket tegyenek fel a foglalkozások során.
  3. Kényelmesebb volt kérdéseket feltenni és visszajelzést kapni egy-egy beszélgetés során.

Tehát megoldást kellett találnunk a jég megtörésére a mentorok és a hallgatók között. Ebben a helyzetben jól jött egy helyi csevegőalkalmazás. Az emberek szeretnek névtelenek lenni, ami nagyobb hatalmat ad számukra, hogy kifejezzék magukat és bármikor, bárhol kérdezhessenek. Ugyanezt a mantrát használja az internet legnépszerűbb fórumai, például a Reddit és a 4chan. Ez csak néhány félig névtelen alkalmazás óriási példája.

Szóval elkezdtem ezen az ötleten gondolkodni. Rájöttem néhány alapvető követelményre és szolgáltatásra.

  1. A felhasználók egy olyan fogantyúval regisztrálnak, amely minden felhasználónak egyedi (dummy név). Csak a fogantyú lesz felfedve a többi felhasználó számára. Tehát az emberek szabadon választhatnak bármilyen fogantyút, így névtelenek maradnak.
  2. A tag láthatja a többi online tagot. Lehetőségük van nyilvános részvételre, amely az üzenetet a chat minden online tagjának közvetíti.
  3. Privát üzenetek esetén a feladónak először kérést kell küldenie a másik tagnak. A kérelem elfogadásakor a többi tag privát beszélgetést folytathat velük.

Technológia, Használt eszközök

  1. Jelentés verem (mongó, expressz, szögletes, csomópont).
  2. Csatlakozók, amelyek lehetővé teszik a személyes kommunikációt valós időben
  3. AJAX a regisztrációhoz és a bejelentkezéshez

Tehát hogyan hozhat létre egy egyszerű csevegőalkalmazást?

Ebben az oktatóanyagban segíteni fogok saját csevegőalkalmazás létrehozásában. Később widgetként integrálódhat bármilyen projektbe! Ez az oktatóanyag nem egy chat alkalmazás teljes fejlesztésére koncentrál. De ez segít Önnek felépíteni.

Előfeltétel: Ismernie kell a MEAN Stack alapvető ismereteit, mivel ezeket felhasználjuk annak felépítéséhez.

Először hozzon létre valami könyvtárstruktúrát, hasonlót.

Telepítse a Node.js-t és a MongoDB-t.

Az oktatóanyaghoz az AngularJS 1-et fogjuk használni. Töltse le innen az AngularJS könyvtárat, és másolja át az ügyfél könyvtár lib könyvtárába.

Ha szeretné szépíteni az alkalmazást, letölthet bármilyen CSS könyvtárat, és átmásolhatja azokat a lib-be is.

A szerver felépítése

1. lépés - Indítsa el a projektet:

Lépjen a Kiszolgáló könyvtárba, és futtassa a következő parancsot:

npm init

Ezzel új projekt indul. Adja meg az összes szükséges részletet. A package.json jön létre, és a következőképpen néz ki.

{ "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. lépés - Telepítse a függőségeket.

  • socket.io - egy javascript könyvtár valós idejű webes alkalmazásokhoz. Valós idejű, kétirányú kommunikációt tesz lehetővé a webes kliensek és szerverek között.
  • expressz - egy Node.js webalkalmazás-keret. Ez biztosítja a web- és mobilalkalmazások fejlesztésének lehetőségeit. A HTTP kérésre különböző köztes eszközök segítségével válaszolhatunk, és HTML oldalakat is megjeleníthetünk.
npm install --save socket.io npm install --save express

Ez telepíti a szükséges függőségeket, és felveszi azokat a package.json fájlba. Egy extra mező kerül a package.json fájlba, amely így fog kinézni:

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

3. lépés - A szerver létrehozása

Hozzon létre egy kiszolgálót, amely a 3000-es porton szolgál, és híváskor elküldi a html-t.

Inicializáljon új socket kapcsolatot a HTTP objektum átadásával.

Esemény kapcsolat lesz hallgatni a bejövő foglalat.

Mindegyik aljzat bocsát disconnect esemény, amely fogják hívni, ha egy ügyfél bontja.

  • socket.on várja az eseményt. Amikor ez az esemény elindul, a visszahívási funkció hívásra kerül.
  • Az io.emit az üzenet küldésére szolgál az összes csatlakozóaljzathoz.

A szintaxis a következő:

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

Hozzon létre egy szervert a server.js névvel. Kellene:

  • üzenetet nyomtat a konzolra, amikor a felhasználó csatlakozik
  • hallgassa meg a csevegőüzeneteket, és sugározza a kapott üzenetet az összes csatlakozóaljzathoz.
  • Amikor a felhasználó megszakad, ki kell nyomtatnia az üzenetet a konzolra.

A szerver így fog kinézni:

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

Az ügyfél felépítése

Hozza létre az index.html fájlt az ügyfélkönyvtárban, a style.css fájlt a css könyvtárban és az app.js fájlt a js könyvtárban.

index.html:

Írjunk egy egyszerű HTML-t, amely képes megfogadni az üzenetünket és megjeleníteni is.

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.