In diesem Artikel zeigen wir Ihnen, wie Sie mithilfe der folgenden Technologien eine Echtzeit-Chat-Anwendung erstellen:

• Redis
• Node.js + Express.js
• Socket.IO
• Heroku

Redis

Redis ist ein Open-Source-Speicher (BSD-lizenziert), In-Memory-Datenstrukturspeicher, der als Datenbank, Cache und Nachrichtenbroker verwendet wird. Es unterstützt Datenstrukturen wie Strings, Hashes, Listen, Mengen, sortierte Mengen mit Bereichsabfragen, Bitmaps, Hyperloglogs und Geoindizes mit Radiusabfragen.

In diesem Anwendungs-Tutorial stellen wir mithilfe von ScaleGrid-Hosting für Redis™* eine Verbindung zu einem der Cluster her.

Node.js

Eine Plattform, die auf der JavaScript-Laufzeitumgebung von Chrome zum einfachen Erstellen schneller und skalierbarer Netzwerkanwendungen basiert. Node.js verwendet ein ereignisgesteuertes, nicht blockierendes E/A-Modell, das es leicht und effizient macht und sich somit perfekt für datenintensive Echtzeitanwendungen eignet, die auf verteilten Geräten ausgeführt werden.

Express.js

Ein Node.js-Framework. Node.js ist eine Plattform, die es ermöglicht, JavaScript außerhalb der Webbrowser zum Erstellen von Web- und Netzwerkanwendungen zu verwenden. Das bedeutet, dass Sie den serverseitigen und serverseitigen Code für eine Anwendung wie die meisten anderen Websprachen erstellen können, jedoch mit JavaScript.

Socket.IO

Eine JavaScript-Bibliothek für Echtzeit-Webanwendungen, die eine bidirektionale Kommunikation in Echtzeit zwischen Web-Clients und -Servern ermöglicht. Socket.IO besteht aus zwei Komponenten:einer clientseitigen Bibliothek, die im Browser ausgeführt wird, und einer serverseitigen Bibliothek für Node.js. Beide Komponenten haben nahezu identische APIs.

Heroku

Eine Cloud-Plattform, mit der Unternehmen Apps erstellen, bereitstellen, überwachen und skalieren können. Die Heroku-Plattform ist der schnellste Weg von der Idee zur URL und umgeht all diese Probleme mit der Infrastruktur.

In diesem Artikel wird davon ausgegangen, dass Redis, Node.js und Heroku Toolbelt bereits auf Ihrem Computer installiert sind.

Einrichtung

Erstellen Sie einen Ordner und geben Sie ihm einen Namen. Sie können es überall auf Ihrem Computer erstellen, da Node.js keinen speziellen Server wie Apache/nginx benötigt.

Schritt 1

Initialisieren Sie eine package.json-Datei, indem Sie npm init ausführen .

{ "name":"node-socket-redis-chat-scalegrid", "version":"0.0.1", "description":"Eine Echtzeit-Chat-Anwendung mit Redis, Node.js und Socket.IO" , "dependencies":{ "body-parser":"^1.15.2", "express":"^4.10.2", "redis":"^2.6.3", "socket.io":"^1.7 .1" }, "main":"index.js", "scripts":{ "start":"node index.js" }, "engines":{ "node":"4.1.1" }} 
Schritt 2
 
Installieren Sie die folgenden Abhängigkeiten:
 
 
expressjs
 
socketio
 
redis
 
 
…und einige andere nützliche Methoden:
 
 
Body-Parser
 
 
durch Ausführen des folgenden Befehls:
 
npm install --save expressjs socket.io redis body-parser
 
Schritt 3
 
Erstellen Sie einen öffentlichen Ordner zum Speichern unserer CSS- und JS-Dateien:
 
/public/css/main.css/public/js/main.js
 
Schritt 4:
 
Erstellen Sie einen Views-Ordner zum Speichern unserer Haupt-HTML-Datei:
 
/views/index.html
 
Schritt 5:
 
Erstellen Sie eine creds.json Datei, die die Anmeldeinformationen für die Verbindung mit unserem Redis™-Cluster enthält. Es sollte folgendes Format haben:
 
{ "user":"", "password":"", "host":"", "port":6379}
 
Schritt 6:
 
Erstellen Sie die index.js Datei, die unseren Node.js-Code hostet und als Ausgangspunkt für Heroku dient.
 
Schritt 7:
 
Fügen Sie eine .gitignore hinzu Datei, sodass der Ordner node_modules nicht in Heroku eingecheckt wird:
 
node_modules
 
Nach Abschluss des 7. Schritts sollten Sie die folgende Struktur haben:
 
.├── creds.json├── index.js├── package.json├── public│   ├── css│   │   └── main.css│   └── js│   ──. js└── Ansichten └── index.html
 
Schritt 8
 
Jetzt, wo alles eingerichtet ist, können wir mit dem Schreiben unseres Backend-Codes beginnen. Zunächst müssen wir alle unsere Module einbinden. Öffnen Sie also die Datei index.js und fügen Sie Folgendes ein:
 
var express =require('express');var bodyParser =require('body-parser');var app =express();var http =require('http').Server(app);var io =require('socket.io')(http);var fs =require('fs');var creds ='';var redis =require('redis');var client ='';var port =process.env .PORT || 8080;// Express-Middleware zum Bereitstellen statischer // Dateien und Analysieren der Anfrage bodyapp.use(express.static('public'));app.use(bodyParser.urlencoded({ extended:true}));// Starten Sie die Serverhttp.listen(port, function() { console.log('Server Started. Listening on *:' + port);});// Personen in Chatroomvar speichern chatters =[];// Nachrichten in Chatroomvar speichern chat_messages =[ ];
 
Bevor wir mit dem Schreiben von Code beginnen können, benötigen wir einen Cluster, auf dem Redis ausgeführt wird. Glücklicherweise bietet ScaleGrid for Redis™ eine leistungsstarke, vollständig verwaltete Hosting-Lösung mit einem Klick.
 
Wenn Sie noch kein Mitglied sind, können Sie sich hier für eine kostenlose 30-Tage-Testversion anmelden.
 
Melden Sie sich andernfalls bei Ihrem Dashboard an und erstellen Sie einen neuen Redis™-Cluster im Redis™-Abschnitt:
 

 
 
Sobald die Clustererstellung abgeschlossen ist, notieren Sie sich die obigen Informationen und fügen Sie sie den relevanten Feldern von creds.json hinzu Datei.
 
Jetzt, da wir unsere Anmeldeinformationen eingerichtet haben, können wir unseren Redis-Client in Node erstellen, der sich mit unserem Cluster verbindet und mit dem Speichern von Schlüssel-Wert-Paaren beginnt.
 
Fügen Sie den folgenden Code zur Datei index.js hinzu:
 
// Anmeldedaten von JSONfs.readFile lesen('creds.json', 'utf-8', function(err, data) { if(err) throw err; creds =JSON.parse(data); client =redis .createClient('redis://' + creds.user + ':' + creds.password + '@' + creds.host + ':' + creds.port); // Redis Client Ready client.once('ready ', function() { // Redis DB leeren // client.flushdb(); // Chatter initialisieren client.get('chat_users', function(err, answer) { if (reply) { chatters =JSON.parse(reply ); } }); // Nachrichten initialisieren client.get('chat_app_messages', function(err, answer) { if (reply) { chat_messages =JSON.parse(reply); } }); });});
 
Der obige Code macht zwei Dinge:
 
 
Liest die Anmeldeinformationen aus creds.json und erstellt einen Redis-Client, der zum Ausführen von Schlüsselwertoperationen verwendet wird
 
Sobald der Client bereit ist, füllen wir die chatters und die chat_messages damit alle neuen Mitglieder, die beitreten, den Chat-Verlauf sehen können.
 
 
Wir werden jetzt ein paar APIs schreiben, um die Chat-Anwendung zu handhaben. Wir benötigen die folgenden APIs:
 
 
Raum beitreten [POST]
 
Raum verlassen [POST]
 
Nachricht senden [POST]
 
Nachrichten abrufen [GET]
 
Mitglieder erhalten [GET]
 
 
Beginnen wir mit der Join Room API. Dies wird aufgerufen, wenn ein neuer Benutzer die Anwendung zum ersten Mal startet und versucht, dem Chatroom beizutreten:
 
// API - Join Chatapp.post('/join', function(req, res) { var username =req.body.username; if (chatters.indexOf(username) ===-1) { chatters. push(username); client.set('chat_users', JSON.stringify(chatters)); res.send({ 'chatters':chatters, 'status':'OK' }); } else { res.send({ 'status':'FAILED' }); }});
 
Hier haben wir die API zum Verlassen des Chatrooms:
 
// API - Leave Chatapp.post('/leave', function(req, res) { var username =req.body.username; chatters.splice(chatters.indexOf(username), 1); client.set ('chat_users', JSON.stringify(chatters)); res.send({ 'status':'OK' });});
 
Senden und Speichern der Nachricht:
 
// API - Nachricht senden + speichernapp.post('/send_message', function(req, res) { var username =req.body.username; var message =req.body.message; chat_messages.push({ ' sender':username, 'message':message }); client.set('chat_app_messages', JSON.stringify(chat_messages)); res.send({ 'status':'OK' });});
 
Alle Nachrichten im Raum abrufen:
 
// API - Nachrichten abrufenapp.get('/get_messages', function(req, res) { res.send(chat_messages);});
 
Alle Mitglieder abrufen:
 
// API – Chatters abrufenapp.get('/get_chatters', function(req, res) { res.send(chatters);});
 
Sobald wir alle APIs eingerichtet haben, müssen wir Socket.IO-Code schreiben, um Ereignisse auszugeben, wenn bestimmte Eigenschaften wie die folgenden aktualisiert werden:
 
 
Zimmeranzahl
 
Nachrichten
 
 
// Socket Connection// UI Stuffio.on('connection', function(socket) { // 'Send'-Ereignis zum Aktualisieren der Nachrichtenliste in UI auslösen socket.on('message', function(data) { io .emit('send', data); }); // Feuere 'count_chatters' ab, um die Chatter-Anzahl in der Benutzeroberfläche zu aktualisieren socket.on('update_chatter_count', function(data) { io.emit('count_chatters', data); } );});
 
Diese Ereignisse werden dann am Front-End von der Socket.IO-Bibliothek abgeholt, die wiederum die Benutzeroberfläche aktualisiert.
 
Schritt 9
 
Nun müssen wir unsere Benutzeroberfläche erstellen, die es Benutzern ermöglicht, sich anzumelden und zu chatten.
 
Öffnen Sie die index.html Datei und fügen Sie den folgenden Code hinzu:
 
       
 
Node.js + Socket.io + Redis Chat | ScaleGrid
 
 Benutzername:   

 


 
 

 

    
 
    
 
Schritt 10
 
Damit unser HTML funktioniert, müssen wir einige JavaScript-AJAX-Ereignisse hinzufügen, die die verschiedenen Vorgänge wie das Betreten eines Raums, das Verlassen, das Senden einer Nachricht usw. handhaben.
 
Der folgende Code ruft die Anzahl der Chatter ab, damit wir die Benutzeroberfläche über die Gesamtzahl der Personen im Raum aktualisieren können:
 
$.get('/get_chatters', function(response) { $('.chat-info').text("Derzeit befinden sich " + response.length + " Personen im Chatroom"); chatter_count =response.length; //Chatterzahl aktualisieren});
 
Mit diesem Code können Benutzer dem Chatroom beitreten. Denken Sie daran, dass Nutzernamen eindeutig sind und nicht dupliziert werden können:
 
$('#join-chat').click(function() { var username =$.trim($('#username').val()); $.ajax({ url:'/join' , type:'POST', data:{ username:username }, success:function(response) { if (response.status =='OK') { //Benutzername existiert noch nicht socket.emit('update_chatter_count', { 'action':'increase' }); $('.chat').show(); $('#leave-chat').data('username', username); $('#send-message' ).data('Benutzername', Benutzername); $.get('/get_messages', function(response) { if (response.length> 0) { var message_count =response.length; var html =''; for (var x =0; x 
" + Antwort[x]['Nachricht'] + "
"; } $('.messages').html(html); } }); $('.join-chat').hide(); //Verstecke den Container für den Beitritt zum Chatroom. } else if (response.status =='FAILED') { //Benutzername existiert bereits alert("Sorry, aber der Benutzername existiert bereits, bitte wählen Sie einen anderen"); $('#Benutzername').val('').focus(); } } });});
 
Hier ist der Code, mit dem Benutzer den Chatraum verlassen können:
 
$('#leave-chat').click(function() { var username =$(this).data('username'); $.ajax({ url:'/leave', type:'POST ', dataType:'json', data:{ username:username }, success:function(response) { if (response.status =='OK') { socket.emit('message', { 'username':username, 'message':username + " has left the chat room.." }); socket.emit('update_chatter_count', { 'action':'decrease' }); $('.chat').hide(); $ ('.join-chat').show(); $('#username').val(''); alert('Sie haben den Chatraum erfolgreich verlassen'); } } });}); 
Hier ist der Code, der jedes Mal ausgeführt wird, wenn jemand eine Nachricht sendet:
 
$('#send-message').click(function() { var username =$(this).data('username'); var message =$.trim($('#message').val ()); $.ajax({ url:'/send_message', type:'POST', dataType:'json', data:{ 'username':username, 'message':message }, success:function(response) { if (response.status =='OK') { socket.emit('message', { 'username':username, 'message':message }); $('#message').val(''); } } });});
 
Das Folgende ist der Socket.IO-Code, der auf Ereignisse vom Back-End wartet und die Benutzeroberfläche aktualisiert. Zum Beispiel neue Nachrichten zum Nachrichtenbereich hinzufügen, Chatter-Zähler aktualisieren usw.:
 
socket.on('send', function(data) { var username =data.username; var message =data.message; var html ="
 " + Benutzername + "
" + Nachricht + "

"; $('.messages').append(html);});socket. on('count_chatters', function(data) { if (data.action =='increase') { chatter_count++; } else { chatter_count--; } $('.chat-info').text("Es gibt derzeit " + chatter_count + " Personen im Chatroom");});
 
Und du bist fertig! Starten Sie den Server mit npm start und öffnen Sie mehrere Browserfenster, um mehrere Benutzer zu simulieren.
 
Eine Demo der Anwendung ist hier verfügbar: https://node-socket-redis-chat.herokuapp.com/
 
Informationen zum Bereitstellen dieser Anwendung auf Heroku finden Sie in deren Dokumenten: https://devcenter.heroku.com/categories/deployment
 
Der gesamte Quellcode ist auch auf GitHub verfügbar, damit Sie forken und daran arbeiten können: https://github.com/Scalegrid/code-samples/tree/sg-redis- node-socket-chat/redis-node-socket-chat
 
Wie immer, wenn Sie etwas Großartiges bauen, twittern Sie uns darüber @scalegridio.
 
Wenn Sie Hilfe bei der Verwaltung und dem Hosting für Redis™ benötigen, lassen Sie uns die Dinge mit unseren professionellen Dienstleistungen vereinfachen.