Vor einiger Zeit arbeitete ich an einer mobilen Anwendung, deren Funktionalität einen praktischen Online-Chat beinhaltete. Und jetzt habe ich beschlossen, einen Artikel mit kurzen Anweisungen zum Erstellen eines Chats mit Apollo Server und node.js im Backend zu schreiben und auf der Clientseite auf native und Apollo Client zu reagieren.
Der Artikel ist zum leichteren Lesen in zwei Teile unterteilt. Der erste Teil enthält eine Anleitung zum Erstellen eines Anwendungs-Backends, und der zweite Teil enthält eine Anleitung zum Erstellen eines Anwendungs-Frontends.
Wenn Sie zu faul zum Lesen sind, können Sie den Code in Github'e
hier und
hier sofort sehen.
Als Haupttechnologien für die Implementierung habe ich das
Koa- Framework node.js, die
Postgresql- Datenbank sowie den GraphQL-Server
Apollo-Server-Koa ausgewählt .
Zunächst wurde ein leeres Koa2-Projekt generiert, für das ich einen einfachen
Koa-Generator verwendet habe, indem ich den Befehl im Terminal ausgeführt habe:
$ koa <project name>
Dann wurden die notwendigen Abhängigkeiten installiert, ich mache es mit Garn, aber Sie können npm verwenden.
$ yarn add apollo-server-koa knex objection pg
Alle notwendigen Bibliotheken sind installiert, jetzt können Sie Code schreiben
Um eine Verbindung zur Datenbank herzustellen, müssen Sie zwei Dateien beschreiben. Die erste ist db.js, die die knex-Clientinstanz exportiert und es unseren Modellen ermöglicht, mit Daten aus der Datenbank zu arbeiten. Die zweite ist knexfile.js, die die Datenbankverbindungseinstellungen zum Erstellen und enthält rollierende Migrationen.
Der Code db.js wird unten beschrieben. Beachten Sie, dass alle Einstellungen von Umgebungsvariablen übernommen werden: const db = require('knex')({ client: 'pg', connection: { host : process.env.POSTGRES_HOST, port: process.env.POSTGRES_PORT, user : process.env.POSTGRES_USER, password : process.env.POSTGRES_PASSWORD, database : process.env.POSTGRES_DATABASE } }); module.exports = db;
Der Code knexfile.js ist
hier verfügbar.
Jetzt können Sie die Migrationen beschreiben, um die beiden benötigten Tabellen zu erstellen.
Die Tabellen selbst sind so einfach wie möglich und enthalten nur die minimal erforderlichen Felder. Der Befehl zum Erstellen ist unten:
$ knex migrate:make migration_name
Sie können die Migrationsdateien
hier anzeigen.
Erstellen Sie nun die Entitätsmodelle Nachricht und Benutzer
class Message extends Model { static get tableName() { return 'messages'; } $beforeInsert() { this.created_at = new Date().toISOString(); } static get relationMappings() { return { user: { relation: Model.BelongsToOneRelation, modelClass: User, join: { from: 'messages.user_id', to: 'users.id' } } }; } }
Das Interessanteste blieb - das Verbinden und Konfigurieren von Apollo-Server-Koa, eine Beschreibung des Graphql-Schemas und der Resolver.
Um apollo-server-koa zu verbinden, fügen Sie einfach die folgenden Codezeilen hinzu
app.js: const { ApolloServer } = require('apollo-server-koa'); const graphqlSchema = require('./graphqlSchema'); … const apolloServer = new ApolloServer(graphqlSchema); apolloServer.applyMiddleware({ app });
www: var { app, apolloServer } = require('../app'); ... apolloServer.installSubscriptionHandlers(server);
Zusätzlich zur Verbindung von apollo-server-koa haben wir die Möglichkeit integriert, mit Abonnements zu arbeiten, um Kunden zu benachrichtigen, dass eine neue Nachricht im Chat eingegangen ist.
Apollo-Server-Koa ist verbunden, der nächste Schritt ist eine Beschreibung des Graphql-Diagramms mit den für den Chat erforderlichen Typen
input UserInput { username: String! } input MessageInput { text: String! user_id: ID! } type User { id: ID username: String } type Message { id: ID text: String created_at: String user: User } type Query { getLast100Messages: [Message] } type Mutation { findOrCreateUser(user: UserInput!): User createMessage(message: MessageInput!): Message } type Subscription { messageCreated: Message }
Die Schaltung ist fertig, wir beschreiben die Resolver
Ein Beispiel für einen Resolver zum Senden einer neuen Nachricht: const Message = require('../../models/message'); const { pubsub, MESSAGE_CREATED } = require('../../utils'); module.exports = { createMessage: async (obj, { message }, context, info) => { const createdMessage = await Message .query() .insert(message); const resultMessage = await Message .query() .eager('user') .findById(createdMessage.id); pubsub.publish(MESSAGE_CREATED, { messageCreated: resultMessage }); return resultMessage; }, };
Ein interessanter Punkt ist, dass hier zusätzlich zum Speichern der Nachricht in der Datenbank die Funktion Publish () aufgerufen wird, die alle Abonnenten über das Ereignis MESSAGE_CREATED benachrichtigt und ihnen ein neues Nachrichtenobjekt sendet (der aufmerksame Leser wird feststellen, dass der Absender auch über seine neue Nachricht benachrichtigt wird, und wir werden dies weiter verarbeiten Für den Client ist es in einem realen Projekt sinnvoll, dies auf der Backend-Seite zu verarbeiten, um die Logik nicht zwischen verschiedenen Clients zu duplizieren.
Den Code der verbleibenden Resolver finden Sie
hier .
Die Serverseite des Chats ist bereit. Wie kann ich überprüfen, ob alles funktioniert?
Öffnen Sie den
Host in Ihrem Browser und Sie sehen darin den graphql-Spielplatz.
Im nächsten Teil werden wir eine mobile Anwendung erstellen.