Sådan opbygges din egen chat-app i realtid

Beskedapps stiger i popularitet. De sidste par år har bragt apps som WhatsApp, Telegram, Signal og Line.

Folk synes at foretrække chatbaserede applikationer, fordi de giver mulighed for interaktion i realtid. De tilføjer også et personligt præg til oplevelsen.

Jeg deltog for nylig i en workshop gennemført af Free Software Movement Karnataka i Bangalore, hvor jeg vejledte en gruppe universitetsstuderende.

Under interaktionerne observerede jeg visse ting:

  1. På trods af at de opmuntrede de studerende til at interagere med mentoren, var kommunikationen altid ensidig.
  2. Studerende følte sig ofte for genert til at stille spørgsmål under sessionerne.
  3. De var mere komfortable med at stille spørgsmål og få feedback i en-til-en samtaler.

Så vi var nødt til at finde en løsning til at bryde isen mellem mentorer og studerende. En lokal chatapplikation kom praktisk i denne situation. Folk elsker at være anonyme, hvilket giver dem mere magt til at udtrykke sig og spørge når som helst hvor som helst. Dette er det samme mantra, der bruges af de fleste af de populære fora på internettet, såsom Reddit og 4chan. Dette er blot nogle få kæmpe eksempler på semi-anonyme apps.

Så jeg begyndte at tænke på denne idé. Jeg kom på nogle af de grundlæggende krav og funktioner.

  1. Brugere registrerer sig ved at give et håndtag, som er unikt for enhver bruger (et dummy-navn). Kun håndtaget afsløres for andre brugere. Så folk kan frit vælge ethvert håndtag, og derfor forbliver de anonyme.
  2. Et medlem kan se andre medlemmer, der er online. De har en mulighed for at blive offentlig, som sender meddelelsen til alle online-medlemmer i chatten.
  3. Ved private beskeder skal afsenderen først sende en anmodning til det andet medlem. Andre medlemmer, når de accepterer anmodningen, kan have en privat chat med dem.

Teknologi, anvendte værktøjer

  1. MEAN Stack (Mongo, Express, Angular, Node).
  2. Stik, der muliggør en-til-en-kommunikation i realtid
  3. AJAX til tilmelding og login

Så hvordan opretter du en simpel chatapplikation?

I denne vejledning vil jeg hjælpe dig med at oprette din egen chatapplikation. Du kan senere integrere som en widget i ethvert projekt! Denne tutorial koncentrerer sig ikke om den komplette udvikling af en chatapplikation. Men det hjælper dig med at opbygge en.

Forudsætning: Du skal kende noget grundlæggende kendskab til MEAN Stack, da vi bruger det til at opbygge en.

Opret først en mappestruktur noget som dette.

Installer Node.js og MongoDB.

Vi bruger AngularJS 1 til denne vejledning. Download AngularJS-biblioteket herfra og kopier det til lib-mappen i klientmappen.

Hvis du kan lide at forskønne applikationen, kan du downloade alle CSS-biblioteker og kopiere dem også til lib.

Opbygning af serveren

Trin 1 - Start projektet:

Gå til serverkataloget, og kør denne kommando:

npm init

Dette starter et nyt projekt. Angiv alle de nødvendige oplysninger. Den package.json vil blive oprettet og vil se noget som dette.

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

Trin 2 - Installer afhængighederne.

  • socket.io - er et javascript- bibliotek til realtids-webapplikationer. Det muliggør realtids, tovejskommunikation mellem webklienter og servere.
  • express - er en Node.js webapplikationsramme. Det giver et sæt funktioner til udvikling af web- og mobilapplikationer. Man kan svare på HTTP-anmodning ved hjælp af forskellige middlewares og også gengive HTML-sider.
npm install --save socket.io npm install --save express

Dette installerer krævede afhængigheder og føjer dem til package.json. Et ekstra felt tilføjes til package.json, som ser sådan ud:

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

Trin 3 - Oprettelse af serveren

Opret en server, der fungerer ved port 3000 og sender html, når den kaldes.

Initialiser en ny sokkelforbindelse ved at sende HTTP-objekt.

Begivenhed forbindelse vil være at lytte efter indkommende stikkontakter.

Hver stikkontakt udsender frakoblingshændelse , som kaldes, når en klient afbryder forbindelsen.

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

    Se på det, og giv det en stjerne øverst til højre, hvis du kan lide det. Der er mange måder, jeg kan forbedre denne applikation på. Hvis du har nogle forslag, send dem til mig på [email protected]

    Du kan følge mig her ved at klikke på det grønne hjerte, hvis du fandt dette nyttigt, så flere mennesker kan se dette. Du kan også følge mig på GitHub og twitter.