Kaip sukurti savo pokalbių realiuoju laiku programą

Pranešimų programėlės populiarėja. Per pastaruosius kelerius metus atsirado tokių programų kaip „WhatsApp“, „Telegram“, „Signal“ ir „Line“.

Panašu, kad žmonės teikia pirmenybę pokalbių programoms, nes jos leidžia bendrauti realiuoju laiku. Jie taip pat suteikia asmeninio potyrio.

Neseniai lankiausi Bangalore vykusiame „Laisvos programinės įrangos judėjimo„ Karnataka ““ seminare, kuriame kuravau kolegijos studentų grupę.

Bendraudamas stebėjau tam tikrus dalykus:

  1. Nepaisant to, kad studentai buvo skatinami bendrauti su mentoriumi, bendravimas visada buvo vienpusis.
  2. Studentai dažnai jautėsi per droviai, kad galėtų užduoti klausimus sesijų metu.
  3. Jiems buvo patogiau užduoti klausimus ir gauti atsiliepimų pokalbiuose vienas su kitu.

Taigi turėjome rasti sprendimą, kaip nulaužti ledą tarp mentorių ir studentų. Šioje situacijoje buvo naudinga vietinė pokalbių programa. Žmonės mėgsta būti anonimais, o tai suteikia daugiau galių išreikšti save ir klausti bet kada ir bet kur. Tai ta pati mantra, kurią naudoja dauguma populiariausių interneto forumų, tokių kaip „Reddit“ ir „4chan“. Tai tik keli milžiniški pusiau anoniminių programų pavyzdžiai.

Taigi pradėjau galvoti apie šią idėją. Aš sugalvojau keletą pagrindinių reikalavimų ir savybių.

  1. Vartotojai registruojasi suteikdami rankeną, kuri yra unikali kiekvienam vartotojui (manekeno vardas). Tik rankena bus atskleista kitiems vartotojams. Taigi žmonės gali laisvai pasirinkti bet kokią rankeną, todėl jie lieka anonimi.
  2. Narys gali matyti kitus prisijungę narius. Jie turi galimybę išeiti į viešumą, kuri perduoda pranešimą visiems pokalbio nariams.
  3. Asmeniniams pranešimams siuntėjas pirmiausia turėtų išsiųsti užklausą kitam nariui. Kiti nariai, priėmę užklausą, gali su jais privačiai kalbėtis.

Technologijos, naudojamos priemonės

  1. „MEAN Stack“ („Mongo“, „Express“, „Angular“, „Node“).
  2. Lizdai, leidžiantys bendrauti realiu laiku
  3. AJAX registracijai ir prisijungimui

Taigi, kaip sukurti paprastą pokalbių programą?

Šioje pamokoje aš padėsiu jums sukurti savo pokalbių programą. Vėliau galite integruoti kaip valdiklį į bet kurį projektą! Ši mokymo programa nebus sutelkta į visišką pokalbių programos kūrimą. Bet tai padės jums sukurti.

Būtina sąlyga: Jūs turite žinoti keletą pagrindinių žinių apie „MEAN Stack“, nes mes jas naudojame kurdami.

Pirmiausia sukurkite katalogo struktūrą panašiai.

Įdiekite „Node.js“ ir „MongoDB“.

Šioje pamokoje naudosime „AngularJS 1“. Iš čia atsisiųskite „AngularJS“ biblioteką ir nukopijuokite ją į „lib“ aplanką „Client“ kataloge.

Jei norite pagražinti programą, galite atsisiųsti visas CSS bibliotekas ir nukopijuoti jas į lib.

Serverio kūrimas

1 žingsnis - pradėkite projektą:

Eikite į serverio katalogą ir vykdykite šią komandą:

npm init

Tai pradės naują projektą. Pateikite visą reikiamą informaciją. „ Pack.json“ bus sukurtas ir atrodys maždaug taip.

{ "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 žingsnis - įdiekite priklausomybes.

  • socket.io - tai „ JavaScript“ biblioteka, skirta realiojo laiko programoms. Tai leidžia realiu laiku, dvikryptį ryšį tarp interneto klientų ir serverių.
  • express - yra „ Node.js“ žiniatinklio programų sistema. Tai suteikia interneto ir mobiliųjų programų kūrimo funkcijų rinkinį. Galima atsakyti į HTTP užklausą naudojant skirtingas tarpines programas, taip pat pateikti HTML puslapius.
npm install --save socket.io npm install --save express

Tai įdiegs reikalingas priklausomybes ir pridės jas į „ package.json“. Papildomas laukas bus pridėtas prie package.json, kuris atrodys taip:

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

3 žingsnis - sukurkite serverį

Sukurkite serverį, kuris aptarnauja 3000 prievadą ir išsiųs html, kai bus iškviestas.

Inicijuokite naują „socket“ ryšį perduodami HTTP objektą.

Įvykio ryšys klausys gaunamų lizdų.

Kiekvienas lizdas skleidžia atjungimo įvykį, kuris bus iškviestas, kai klientas atsijungs.

  • 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:

    Prašau pažvelgti į jį ir suteikti jam žvaigždę viršuje dešinėje, jei jums tai patinka. Yra daug būdų, kaip galėčiau patobulinti šią programą. Jei turite pasiūlymų, siųskite juos man adresu [email protected]

    Čia galite sekti mane spustelėdami žalią širdelę, jei jums tai naudinga, kad daugiau žmonių tai pamatytų. Taip pat galite sekti mane „GitHub“ ir „Twitter“.