Kuinka rakentaa oma reaaliaikainen chat-sovellus

Viestisovellusten suosio on kasvussa. Viime vuodet ovat tuoneet sovelluksia, kuten WhatsApp, Telegram, Signal ja Line.

Ihmiset näyttävät suosivan chat-pohjaisia ​​sovelluksia, koska ne mahdollistavat reaaliaikaisen vuorovaikutuksen. Ne lisäävät myös henkilökohtaisen kosketuksen kokemukseen.

Kävin äskettäin työpajassa, jonka johti Karnataka Free Software Movement Bangaloressa ja jossa mentoroin joukkoa korkeakouluopiskelijoita.

Vuorovaikutusten aikana havaitsin tiettyjä asioita:

  1. Huolimatta siitä, että rohkaisimme opiskelijoita olemaan vuorovaikutuksessa mentorin kanssa, viestintä oli aina yksipuolista.
  2. Opiskelijat tunsivat usein olevansa liian ujo kysymysten esittämistä varten.
  3. Heillä oli mukavampaa esittää kysymyksiä ja saada palautetta henkilökohtaisissa keskusteluissa.

Joten meidän oli löydettävä ratkaisu jään murtamiseen mentoreiden ja opiskelijoiden välillä. Paikallinen chat-sovellus oli kätevä tässä tilanteessa. Ihmiset rakastavat olla nimettömiä, mikä antaa heille enemmän voimaa ilmaista itseään ja kysyä milloin tahansa missä tahansa. Tämä on sama mantra, jota käytetään useimmissa Internetin suosituissa foorumeissa, kuten Reddit ja 4chan. Nämä ovat vain muutamia jättimäisiä esimerkkejä puoliksi anonyymeistä sovelluksista.

Joten aloin ajatella tätä ajatusta. Keksin joitain perusvaatimuksia ja ominaisuuksia.

  1. Käyttäjät rekisteröivät antamalla kädensijan, joka on yksilöllinen kaikille käyttäjille (nuken nimi). Vain kahva paljastetaan muille käyttäjille. Joten ihmiset voivat vapaasti valita minkä tahansa kahvan, joten he pysyvät nimettöminä.
  2. Jäsen voi nähdä muut verkossa olevat jäsenet. Heillä on mahdollisuus tulla julkiseksi, joka lähettää viestin kaikille chatin online-jäsenille.
  3. Yksityisviestien lähettäjän tulee ensin lähettää pyyntö toiselle jäsenelle. Muut jäsenet hyväksyessään pyynnön voivat keskustella heidän kanssaan.

Teknologia, käytetyt työkalut

  1. MEAN-pino (Mongo, Express, Kulma, Solmu).
  2. Liitännät mahdollistavat henkilökohtaisen viestinnän reaaliajassa
  3. AJAX rekisteröintiä ja kirjautumista varten

Joten miten luot yksinkertaisen chat-sovelluksen?

Tässä opetusohjelmassa autan sinua luomaan oman chat-sovelluksesi. Voit myöhemmin integroida widgetinä mihin tahansa projektiin! Tämä opetusohjelma ei keskity chat-sovelluksen täydelliseen kehittämiseen. Mutta se auttaa sinua rakentamaan sellaisen.

Edellytys: Sinun on tiedettävä joitain perustietoja MEAN Stackista, koska käytämme sitä sen rakentamiseen.

Luo ensin hakemistorakenne jotain tällaista.

Asenna Node.js ja MongoDB.

Käytämme AngularJS 1: tä tässä opetusohjelmassa. Lataa täältä AngularJS-kirjasto ja kopioi se asiakashakemiston lib-kansioon.

Jos haluat kaunistaa sovellusta, voit ladata kaikki CSS-kirjastot ja kopioida ne myös lib: ään.

Palvelimen rakentaminen

Vaihe 1 - Käynnistä projekti:

Siirry palvelimen hakemistoon ja suorita tämä komento:

npm init

Tämä aloittaa uuden projektin. Anna kaikki tarvittavat tiedot. Package.json luodaan ja näyttää jotain tällaista.

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

Vaihe 2 - Asenna riippuvuudet.

  • socket.io - on javascript- kirjasto reaaliaikaisille verkkosovelluksille. Se mahdollistaa reaaliaikaisen, kaksisuuntaisen viestinnän web-asiakkaiden ja palvelinten välillä.
  • express - on Node.js- verkkosovelluskehys. Se tarjoaa joukon ominaisuuksia web- ja mobiilisovellusten kehittämiseksi. Voidaan vastata HTTP-pyyntöön käyttämällä erilaisia ​​väliohjelmia ja myös renderoida HTML-sivuja.
npm install --save socket.io npm install --save express

Tämä asentaa vaaditut riippuvuudet ja lisää ne pakettiin.json. Pakettiin.json lisätään ylimääräinen kenttä, joka näyttää tältä:

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

Vaihe 3 - Palvelimen luominen

Luo palvelin, joka palvelee portissa 3000 ja lähettää html: n, kun sitä kutsutaan.

Alusta uusi pistorasiayhteys siirtämällä HTTP-objekti.

Tapahtuma yhteys on kuunneltavissa saapuvan pistorasiat.

Jokainen liitäntä lähettää katkaisutapahtuman, joka kutsutaan aina, kun asiakas katkaisee yhteyden.

  • socket.on odottaa tapahtumaa. Aina kun tapahtuma laukaistaan, soitetaan takaisinsoittotoiminto.
  • io.emit-sovellusta käytetään lähettämään viesti kaikkiin siihen liitettyihin pistorasioihin.

Syntaksi on:

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

Luo palvelin nimellä server.js. Sen pitäisi:

  • tulosta viesti konsolille, kun käyttäjä muodostaa yhteyden
  • kuuntele chat-viestitapahtumia ja lähetä vastaanotettu viesti kaikkiin liitettyihin pistorasioihin.
  • Aina kun käyttäjä katkaisee yhteyden, hänen tulee tulostaa viesti konsolille.

Palvelin näyttää tältä:

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

Asiakkaan rakentaminen

Luo index.html asiakashakemistossa, style.css css-hakemistossa ja app.js js-hakemistossa asiakkaassa.

index.html:

Kirjoitetaan yksinkertainen HTML, joka voi viedä viestimme ja myös näyttää sen.

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:

    Katsokaa sitä ja anna sille tähti oikeassa yläkulmassa, jos pidät siitä. Voisin parantaa tätä sovellusta monin tavoin. Jos sinulla on ehdotuksia, lähetä ne minulle osoitteeseen [email protected]

    Voit seurata minua napsauttamalla vihreää sydäntä, jos pidit tästä hyödyllisenä, jotta useammat ihmiset näkevät tämän. Voit myös seurata minua GitHubissa ja Twitterissä.