Πώς να δημιουργήσετε τη δική σας εφαρμογή συνομιλίας σε πραγματικό χρόνο

Οι εφαρμογές ανταλλαγής μηνυμάτων αυξάνονται σε δημοτικότητα. Τα τελευταία χρόνια έχουν φέρει εφαρμογές όπως WhatsApp, Telegram, Signal και Line.

Οι άνθρωποι φαίνεται να προτιμούν εφαρμογές που βασίζονται σε συνομιλίες επειδή επιτρέπουν την αλληλεπίδραση σε πραγματικό χρόνο. Προσθέτουν επίσης μια προσωπική πινελιά στην εμπειρία.

Πρόσφατα παρακολούθησα ένα εργαστήριο που διεξήγαγε το Κίνημα Ελεύθερου Λογισμικού Karnataka στο Μπανγκαλόρ, όπου έχω καθοδηγήσει μια ομάδα φοιτητών κολεγίου.

Κατά τη διάρκεια των αλληλεπιδράσεων, παρατήρησα ορισμένα πράγματα:

  1. Παρά την ενθάρρυνση των μαθητών να αλληλεπιδρούν με τον μέντορα, η επικοινωνία ήταν πάντα μονόπλευρη.
  2. Οι μαθητές συχνά ένιωθαν πολύ ντροπαλοί να κάνουν ερωτήσεις κατά τη διάρκεια των συνεδριών.
  3. Ήταν πιο άνετα να κάνουν ερωτήσεις και να λάβουν σχόλια σε συνομιλίες ένας προς έναν.

Επομένως, έπρεπε να βρούμε μια λύση για να σπάσουμε τον πάγο ανάμεσα σε μέντορες και μαθητές. Μια τοπική εφαρμογή συνομιλίας ήταν βολική σε αυτήν την περίπτωση. Οι άνθρωποι λατρεύουν να είναι ανώνυμοι, κάτι που τους δίνει περισσότερη δύναμη να εκφραστούν και να ρωτήσουν οποτεδήποτε οπουδήποτε. Αυτό είναι το ίδιο μάντρα που χρησιμοποιείται από τα περισσότερα δημοφιλή φόρουμ στο Διαδίκτυο, όπως το Reddit και το 4chan. Αυτά είναι μόνο μερικά τεράστια παραδείγματα ημι-ανώνυμων εφαρμογών.

Άρχισα λοιπόν να σκέφτομαι αυτήν την ιδέα. Βρήκα μερικές από τις βασικές απαιτήσεις και χαρακτηριστικά.

  1. Οι χρήστες εγγράφονται δίνοντας μια λαβή, η οποία είναι μοναδική για κάθε χρήστη (ένα ψεύτικο όνομα). Μόνο η λαβή θα αποκαλυφθεί σε άλλους χρήστες. Έτσι, οι άνθρωποι είναι ελεύθεροι να επιλέξουν οποιαδήποτε λαβή και ως εκ τούτου μένουν ανώνυμοι.
  2. Ένα μέλος μπορεί να δει άλλα μέλη που είναι συνδεδεμένα. Έχουν την επιλογή να δημοσιοποιηθούν, οι οποίοι μεταδίδουν το μήνυμα σε όλα τα μέλη του διαδικτύου στη συνομιλία.
  3. Για ιδιωτικά μηνύματα, ο αποστολέας πρέπει πρώτα να στείλει ένα αίτημα στο άλλο μέλος. Άλλα μέλη μετά την αποδοχή του αιτήματος μπορούν να συνομιλήσουν μαζί τους.

Τεχνολογία, εργαλεία που χρησιμοποιούνται

  1. MEAN Stack (Mongo, Express, Angular, Node).
  2. Υποδοχές που επιτρέπουν την επικοινωνία one-on-one σε πραγματικό χρόνο
  3. AJAX για εγγραφή και σύνδεση

Λοιπόν, πώς δημιουργείτε μια απλή εφαρμογή συνομιλίας;

Σε αυτό το σεμινάριο, θα σας βοηθήσω να δημιουργήσετε τη δική σας εφαρμογή συνομιλίας. Μπορείτε αργότερα να ενσωματώσετε ως widget σε οποιοδήποτε έργο! Αυτό το σεμινάριο δεν θα επικεντρωθεί στην πλήρη ανάπτυξη μιας εφαρμογής συνομιλίας. Αλλά θα σας βοηθήσει να δημιουργήσετε ένα.

Προαπαιτούμενο: Πρέπει να γνωρίζετε κάποιες βασικές γνώσεις του MEAN Stack, καθώς το χρησιμοποιούμε για να δημιουργήσουμε ένα.

Αρχικά, δημιουργήστε μια δομή καταλόγου κάπως έτσι.

Εγκαταστήστε το Node.js και το MongoDB.

Θα χρησιμοποιήσουμε το AngularJS 1 για αυτό το σεμινάριο. Κατεβάστε τη βιβλιοθήκη AngularJS από εδώ και αντιγράψτε τη στο φάκελο lib στον κατάλογο Client.

Εάν θέλετε να ομορφιάσετε την εφαρμογή, μπορείτε να κατεβάσετε οποιεσδήποτε βιβλιοθήκες CSS και να τις αντιγράψετε και σε lib.

Δημιουργία του διακομιστή

Βήμα 1 - Ξεκινήστε το έργο:

Μεταβείτε στον κατάλογο διακομιστή και εκτελέστε αυτήν την εντολή:

npm init

Αυτό θα ξεκινήσει ένα νέο έργο. Δώστε όλες τις απαιτούμενες λεπτομέρειες. Το package.json θα δημιουργηθεί και θα μοιάζει με αυτό.

{ "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 - Εγκαταστήστε τις εξαρτήσεις.

  • socket.io - είναι μια βιβλιοθήκη javascript για εφαρμογές ιστού σε πραγματικό χρόνο. Επιτρέπει σε πραγματικό χρόνο, αμφίδρομη επικοινωνία μεταξύ πελατών και διακομιστών Ιστού.
  • express - είναι ένα πλαίσιο εφαρμογής διαδικτύου Node.js. Παρέχει το σύνολο χαρακτηριστικών για την ανάπτυξη διαδικτυακών και κινητών εφαρμογών. Κάποιος μπορεί να ανταποκριθεί σε αίτημα HTTP χρησιμοποιώντας διαφορετικά μεσαία προγράμματα και επίσης να αποδώσει σελίδες HTML
npm install --save socket.io npm install --save express

Αυτό θα εγκαταστήσει τις απαιτούμενες εξαρτήσεις και θα τις προσθέσει στο package.json. Ένα επιπλέον πεδίο θα προστεθεί στο package.json που θα μοιάζει με αυτό:

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

Βήμα 3 - Δημιουργία του διακομιστή

Δημιουργήστε έναν διακομιστή που εξυπηρετεί στη θύρα 3000 και θα στείλει το html όταν καλείται.

Αρχικοποιήστε μια νέα σύνδεση πρίζας περνώντας αντικείμενο HTTP

Η σύνδεση συμβάντος θα ακούει τις εισερχόμενες πρίζες.

Κάθε υποδοχή εκπέμπει ένα συμβάν αποσύνδεσης που θα καλείται κάθε φορά που αποσυνδέεται ένας πελάτης.

  • Το socket.on περιμένει την εκδήλωση. Κάθε φορά που ενεργοποιείται το συμβάν, καλείται η λειτουργία επιστροφής κλήσης.
  • Το io.emit χρησιμοποιείται για την εκπομπή του μηνύματος σε όλες τις πρίζες που είναι συνδεδεμένες σε αυτό.

Η σύνταξη είναι:

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

Δημιουργήστε έναν διακομιστή με όνομα server.js. Θα έπρεπε:

  • εκτυπώστε ένα μήνυμα στην κονσόλα κατά τη σύνδεση ενός χρήστη
  • Ακούστε για συμβάντα μηνυμάτων συνομιλίας και μεταδώστε το ληφθέν μήνυμα σε όλες τις συνδεδεμένες πρίζες.
  • Κάθε φορά που ένας χρήστης αποσυνδέεται, θα πρέπει να εκτυπώνει το μήνυμα στην κονσόλα.

Ο διακομιστής θα μοιάζει με αυτό:

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

Δημιουργία του πελάτη

Δημιουργήστε το index.html στον κατάλογο πελάτη, το style.css στον κατάλογο css και το app.js στον κατάλογο js στον πελάτη.

index.html:

Ας γράψουμε ένα απλό HTML που μπορεί να λάβει το μήνυμά μας και επίσης να το εμφανίσει.

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:

    Παρακαλώ κοιτάξτε το και δώστε ένα αστέρι πάνω δεξιά, αν σας αρέσει. Υπάρχουν πολλοί τρόποι για να βελτιώσω αυτήν την εφαρμογή. Εάν έχετε οποιεσδήποτε προτάσεις, στείλτε τις σε εμένα στη διεύθυνση [email protected]

    Μπορείτε να με ακολουθήσετε εδώ, κάνοντας κλικ στην πράσινη καρδιά, αν το βρείτε αυτό χρήσιμο, ώστε να το δουν περισσότερα άτομα. Μπορείτε επίσης να με ακολουθήσετε στο GitHub και στο twitter.