Comment créer votre propre application de chat en temps réel

Les applications de messagerie gagnent en popularité. Les dernières années ont apporté des applications comme WhatsApp, Telegram, Signal et Line.

Les gens semblent préférer les applications basées sur le chat car elles permettent une interaction en temps réel. Ils ajoutent également une touche personnelle à l'expérience.

J'ai récemment assisté à un atelier organisé par le Free Software Movement Karnataka à Bangalore où j'ai encadré un groupe d'étudiants.

Au cours des interactions, j'ai observé certaines choses:

  1. Bien que les élèves aient encouragé à interagir avec le mentor, la communication était toujours unilatérale.
  2. Les étudiants se sentaient souvent trop timides pour poser des questions pendant les séances.
  3. Ils étaient plus à l'aise pour poser des questions et obtenir des commentaires lors de conversations en tête-à-tête.

Il fallait donc trouver une solution pour briser la glace entre les mentors et les étudiants. Une application de chat locale s'est avérée utile dans cette situation. Les gens aiment être anonymes, ce qui leur donne plus de pouvoir pour s'exprimer et demander à tout moment, n'importe où. C'est le même mantra utilisé par la plupart des forums populaires sur Internet, tels que Reddit et 4chan. Ce ne sont là que quelques exemples géants d'applications semi-anonymes.

Alors j'ai commencé à réfléchir à cette idée. J'ai proposé certaines des exigences et fonctionnalités de base.

  1. Les utilisateurs s'inscrivent en donnant un handle, qui est unique à chaque utilisateur (un nom factice). Seule la poignée sera révélée aux autres utilisateurs. Les utilisateurs sont donc libres de choisir n'importe quelle poignée et restent donc anonymes.
  2. Un membre peut voir les autres membres qui sont en ligne. Ils ont la possibilité de devenir public, ce qui diffuse le message à tous les membres en ligne du chat.
  3. Pour les messages privés, l'expéditeur doit d'abord envoyer une demande à l'autre membre. Les autres membres, après avoir accepté la demande, peuvent avoir une discussion privée avec eux.

Technologie, outils utilisés

  1. MEAN Stack (Mongo, Express, Angular, Node).
  2. Prises pour permettre une communication individuelle en temps réel
  3. AJAX pour l'inscription et la connexion

Alors, comment créer une application de chat simple?

Dans ce tutoriel, je vais vous aider à créer votre propre application de chat. Vous pouvez ensuite l'intégrer en tant que widget dans n'importe quel projet! Ce tutoriel ne se concentrera pas sur le développement complet d'une application de chat. Mais cela vous aidera à en construire un.

Pré-requis: Vous devez connaître certaines connaissances de base de MEAN Stack, car nous l'utilisons pour en créer une.

Tout d'abord, créez une structure de répertoires comme celle-ci.

Installez Node.js et MongoDB.

Nous utiliserons AngularJS 1 pour ce tutoriel. Téléchargez la bibliothèque AngularJS à partir d'ici et copiez-la dans le dossier lib du répertoire Client.

Si vous souhaitez embellir l'application, vous pouvez télécharger toutes les bibliothèques CSS et les copier également dans la bibliothèque.

Construire le serveur

Étape 1 - Démarrez le projet:

Accédez au répertoire du serveur et exécutez cette commande:

npm init

Cela lancera un nouveau projet. Fournissez tous les détails requis. Le package.json sera créé et ressemblera à quelque chose comme ceci.

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

Étape 2 - Installez les dépendances.

  • socket.io - est une bibliothèque javascript pour les applications Web en temps réel. Il permet une communication bidirectionnelle en temps réel entre les clients Web et les serveurs.
  • express - est un cadre d'application Web Node.js. Il fournit l'ensemble des fonctionnalités pour développer les applications Web et mobiles. On peut répondre à une requête HTTP en utilisant différents middlewares et également rendre des pages HTML.
npm install --save socket.io npm install --save express

Cela installera les dépendances requises et les ajoutera à package.json. Un champ supplémentaire sera ajouté à package.json qui ressemblera à ceci:

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

Étape 3 - Création du serveur

Créez un serveur qui sert au port 3000 et enverra le html lorsqu'il sera appelé.

Initialisez une nouvelle connexion socket en passant un objet HTTP.

La connexion d' événement écoutera les sockets entrants.

Chaque socket émet un événement de déconnexion qui sera appelé chaque fois qu'un client se déconnecte.

  • socket.on attend l'événement. Chaque fois que cet événement est déclenché, la fonction de rappel est appelée.
  • io.emit est utilisé pour émettre le message vers toutes les sockets qui lui sont connectées.

La syntaxe est:

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

Créez un serveur avec le nom server.js. Cela devrait:

  • imprimer un message sur la console lors de la connexion d'un utilisateur
  • écouter les événements des messages de discussion et diffuser le message reçu sur toutes les prises connectées.
  • Chaque fois qu'un utilisateur se déconnecte, il doit imprimer le message sur la console.

Le serveur ressemblera à ceci:

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

Construire le client

Créez le fichier index.html dans le répertoire client, style.css dans le répertoire css et app.js dans le répertoire js du client.

index.html:

Écrivons un HTML simple qui peut prendre notre message et l'afficher également.

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.