Il y a quelque temps, je travaillais sur une application mobile, dont la fonctionnalité comprenait un chat en ligne pratique. Et maintenant, j'ai décidé d'écrire un article avec de brèves instructions sur la façon de créer un chat en utilisant le serveur apollo et node.js sur le backend, ainsi que de réagir client natif et apollo du côté client.
L'article est divisé en deux parties pour une lecture facile. La première partie contient un guide pour créer un backend d'application, et la seconde contient un guide pour créer un frontend d'application.
Si vous êtes trop paresseux pour lire, vous pouvez immédiatement voir le code dans Github'e
ici et
ici .
Comme principales technologies d'implémentation, j'ai choisi le framework node.js
koa , la base de données
postgresql , ainsi que le serveur GraphQL -
apollo-server-koa .
Tout d'abord, un projet koa2 vide a été généré, pour cela j'ai utilisé un simple
générateur de
koa en exécutant la commande dans le terminal:
$ koa <project name>
Ensuite, les dépendances nécessaires ont été installées, je le fais avec du fil, mais vous pouvez utiliser npm.
$ yarn add apollo-server-koa knex objection pg
Toutes les bibliothèques nécessaires sont installées, vous pouvez maintenant écrire du code
Pour vous connecter à la base de données, vous devez décrire deux fichiers, le premier est db.js, qui exportera l'instance du client knex et permettra à nos modèles de travailler avec les données de la base de données, le second est knexfile.js, qui contient les paramètres de connexion à la base de données pour créer et migrations continues.
Le code db.js est décrit ci-dessous, notez que tous les paramètres sont issus des variables d'environnement: 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;
Le code knexfile.js est disponible
ici .
Vous pouvez maintenant décrire les migrations pour créer les deux tables dont nous avons besoin.
Les tables elles-mêmes seront aussi simples que possible et ne contiendront que l'ensemble minimal de champs requis. La commande pour les créer est ci-dessous:
$ knex migrate:make migration_name
Vous pouvez voir les fichiers de migration
ici .
Créez maintenant les modèles d'entité Message et Utilisateur
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' } } }; } }
La chose la plus intéressante est restée - la connexion et la configuration d'apollo-server-koa, la description des schémas graphql et des résolveurs.
Pour connecter apollo-server-koa, ajoutez simplement les lignes de code suivantes
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);
En plus de connecter apollo-server-koa, nous avons inclus la possibilité de travailler avec des abonnements pour informer les clients qu'un nouveau message est arrivé dans le chat.
Apollo-server-koa est connecté, l'étape suivante est une description du diagramme graphql avec les types nécessaires pour le chat
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 }
Le circuit est prêt, nous décrivons les résolveurs
Un exemple de résolveur pour envoyer un nouveau message: 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; }, };
Un point intéressant est qu'en plus d'enregistrer le message dans la base de données, la fonction publish () est appelée ici, qui informe tous les abonnés de l'événement MESSAGE_CREATED, en leur envoyant un nouvel objet de message (le lecteur attentif remarquera que l'expéditeur sera également informé de son nouveau message, et nous le traiterons plus loin). pour le client, dans un projet réel, il est logique de traiter cela du côté backend, afin de ne pas dupliquer la logique entre les différents clients).
Le code des résolveurs restants peut être trouvé
ici .
Le côté serveur du chat est prêt, comment puis-je vérifier que tout fonctionne?
Ouvrez l'
hôte dans votre navigateur et vous verrez une aire de jeux graphql dedans.
Dans la prochaine partie, nous allons créer une application mobile.