Construire une application de chat en JavaScript en 10 lignes de code
Published: 2024-01-26 18:43:27

[PubNub Chat](https://www.pubnub.com/solutions/chat/)offre un réseau robuste en temps réel et des API pour envoyer et recevoir des données dans n'importe quelle application. Profitez de nos services pour construire rapidement un chat avec une sécurité, une évolutivité et une fiabilité de niveau entreprise. PubNub élimine le temps nécessaire à la mise en place et à la gestion de votre infrastructure afin que vous puissiez vous concentrer sur la résolution des problèmes de vos clients.

Suivez ce tutoriel pour apprendre à créer une application de chat en direct avec seulement dix lignes de code en utilisant le[PubNub JavaScript SDK](https://www.pubnub.com/docs/sdks/javascript/).

**Essayez la démo du chat**
---------------------------

Deux méthodes sont à votre disposition pour essayer cette démo :

1.  Notre[démo interactive 10-chats](https://www.pubnub.com/demos/10-line-chat/)vous guidera pas à pas dans cette mini-application de chat. Cette démo est le même code que vous pouvez copier ci-dessous avec un guide interactif.
    
2.  Clonez le dépôt [dépôt GitHub](https://github.com/PubNubDevelopers/JavaScript-Simple-Chat) pour voir comment l'application fonctionne en coulisses et créer vos propres fonctionnalités.
    

Ouvrez la démo dans deux onglets pour chatter entre les fenêtres !

![Chat in 10 lines of JavaScript](/cdn/3prze68gbwl1/1BrNYTZ7F0JKsuywM46pTz/01b9c8c3eeaa484e37b7729f2e40edaa/10-chat-screenshot.png)

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

Pour démarrer votre application de chat en temps réel, vous devez obtenir les clés API nécessaires pour vous connecter à la plateforme PubNub : les clés de publication et de souscription. Vous pouvez obtenir votre propre jeu de clés API gratuites en suivant les étapes suivantes :

1.  Connectez-vous au[Portail d'administration](https://admin.pubnub.com/).
    
2.  Cliquez sur l'onglet Apps sur le côté gauche.
    
3.  Cliquez sur le bouton "Créer une nouvelle application" pour créer une nouvelle application. Donnez un nom à l'application et cliquez sur le bouton "Créer".
    
4.  Cliquez sur l'application que vous venez de créer. Vous accéderez à la page des trousseaux de clés de cette application. Notez que chaque application créée génère automatiquement un nouveau jeu de clés pour vous, mais vous allez créer un nouveau jeu de clés pour activer des fonctionnalités spécifiques.
    
5.  Cliquez sur le bouton "Créer un nouveau jeu de clés" en haut à droite du portail.
    
6.  Une fenêtre contextuelle s'affiche. Donnez un nom à l'ensemble de clés et cliquez sur le bouton "Créer".
    
7.  Cliquez sur l'ensemble de clés nouvellement créé.
    
8.  Copiez les clés de publication et d'abonnement en cliquant sur les icônes de copie situées à côté de chaque champ de clé.
    

Une fois que vous avez obtenu les clés API, créez le fichier **index.html** et enregistrez-le. Dans **index.html**, intégrez le SDK PubNub dans votre projet en utilisant un réseau de diffusion de contenu.

```js
https://cdn.pubnub.com/sdk/javascript/pubnub.7.5.0.js
https://cdn.pubnub.com/sdk/javascript/pubnub.7.5.0.min.js
```

Configurez ensuite PubNub en ajoutant le code suivant au fichier de votre application.

```js
// Open 2 tabs to chat between windows
        
// Get your PubNub keys from admin.pubnub.com
var pubnub = new PubNub(
  {publishKey: 'PUBNUB_PUBLISH_KEY', subscribeKey: 'PUBNUB_SUBSCRIBE_KEY', 
   userId: 'user1'});
var channel = '10chat';

// Add a listener to a channel and subscribe to it
pubnub.addListener({
  message: function (m) {
    box.innerHTML += newRow(m.message, 
     m.publisher);
  }
});
pubnub.subscribe({channels: [channel]}); 
// Publish new message when enter is pressed. 
input.addEventListener('keypress', function (e) {
  (e.keyCode || e.charCode) === 13 && 
   pubnub.publish({ 
    channel: channel, message: input.value, 
     x: (input.value = '')
  });
});
```

Veillez à remplacer `PUBNUB_PUBLISH_KEY` et `PUBNUB_SUBSCRIBE_KEY` par les clés de publication et d'abonnement que vous avez obtenues sur le portail d'administration de PubNub.

Vous pouvez compléter votre application de chat en ajoutant les champs de saisie des messages, les boutons d'envoi de chat et les feuilles de style CSS personnalisées pour styliser ces éléments. Consultez la page [Simple Chat GitHub](https://github.com/PubNubDevelopers/JavaScript-Simple-Chat) pour plus d'informations et le code source complet.

Quels sont les outils qui peuvent m'aider à construire un chat ?
----------------------------------------------------------------

[PubNub propose de nombreux SDK](https://www.pubnub.com/docs/sdks)dont un [Chat SDK](https://www.pubnub.com/docs/chat/chat-sdk/overview) spécialement conçu pour le cas d'utilisation du chat en offrant des méthodes faciles à utiliser qui vous permettent de faire exactement ce que vous voulez.

Ces SDKs facilitent l'ajout du chat à vos applications. Vous pouvez vous concentrer sur la création de la meilleure expérience utilisateur côté client pendant que PubNub s'occupe du côté serveur de l'application.

Créez des salles de chat privées 1:1, des chats de groupe ou même des méga chats pour des événements à grande échelle. Voici quelques exemples :

-   [Événements virtuels](https://www.pubnub.com/solutions/sports-media/): Streaming chat lors d'événements en direct
    
-   [Télémédecine](https://www.pubnub.com/solutions/digital-health/): Chat privé entre médecins et patients
    
-   [Jeux](https://www.pubnub.com/solutions/gaming/): Chat en direct pour les joueurs de jeux en ligne
    
-   [Support](https://www.pubnub.com/solutions/communications/): Chat entre les agents et les clients
    
-   [Places de marché](https://www.pubnub.com/solutions/ecommerce/): Chat entre acheteurs et vendeurs
    
-   [Collaboration](https://www.pubnub.com/solutions/multiuser-collaboration/): Chat pour la communication d'équipe sur le lieu de travail
    

Fonctionnalités avancées du chat
--------------------------------

Une fois que vous avez envoyé et reçu des messages, vous pouvez utiliser PubNub Chat pour ajouter des fonctionnalités à votre chat comme celles-ci :

-   [Indicateurs de frappe](https://www.pubnub.com/docs/chat/sdks/messages/typing): Indique si les utilisateurs sont en train de taper des messages dans un canal.
    
-   [Reçus de lecture](https://www.pubnub.com/docs/chat/sdks/messages/message-receipts): Permet aux utilisateurs de suivre la livraison des messages dans un canal.
    
-   [Envoi et réception de fichiers](https://www.pubnub.com/docs/chat/sdks/messages/files): Télécharger et partager des fichiers avec d'autres utilisateurs dans l'application.
    
-   [Persistance des messages](https://www.pubnub.com/docs/chat/sdks/messages/message-history): Stocker et récupérer les messages au fur et à mesure qu'ils sont envoyés sur le réseau.
    
-   [Indicateurs de présence en ligne/hors ligne](https://www.pubnub.com/docs/chat/sdks/users/presence): Suivez l'état en ligne et hors ligne des utilisateurs et des appareils en temps réel et stockez des informations d'état personnalisées.
    
-   [Compte des messages non lus](https://www.pubnub.com/docs/chat/sdks/messages/unread-counts): Obtenez le nombre de messages dans les canaux qui ont été publiés après un horodatage spécifique.
    

Que puis-je faire d'autre avec PubNub ?
---------------------------------------

PubNub maintient 15+ points de présence globaux synchronisés qui peuvent délivrer des messages à n'importe quel appareil en moins de 100 millisecondes. PubNub dispose de fonctionnalités telles que[les fonctions](https://www.pubnub.com/products/functions/)et [Notifications Push Mobile](https://www.pubnub.com/docs/chat/sdks/push-notifications)que vous pouvez utiliser dans votre produit.

En utilisant les SDK PubNub, les développeurs peuvent rapidement créer des fonctions de chat et d'autres fonctions en temps réel sans avoir à consacrer beaucoup de temps à l'apprentissage, à la création et à la gestion des mécanismes d'envoi de messages de chat ou d'autres données en temps réel. Toute la mise à l'échelle et l'infrastructure sont gérées pour vous. Avec PubNub, vous pouvez vous concentrer sur la partie frontale de votre jeu sans vous soucier de l'infrastructure.

Consultez d'autres ressources sur le chat pour vous aider à démarrer dès aujourd'hui :

-   [Guides pratiques](https://www.pubnub.com/how-to/?sortBy=Most%20recent&categories=Chat) pour mettre en œuvre des cas d'utilisation spécifiques pour votre application de chat.
    
-   [Développez](https://www.pubnub.com/tutorials/javascript-sdk-chat-app/) une application de chat in-app en utilisant le PubNub JavaScript SDK.
    
-   [Apprenez](https://www.pubnub.com/tutorials/chat-sdk/) comment configurer et utiliser le SDK Chat de PubNub pour construire une application de chat flexible.
    

Vous avez des questions ou des inquiétudes ? N'hésitez pas à contacter notre équipe à [devrel@pubnub.com.](devrel@pubnub.com)

Comment PubNub peut-il vous aider ?
===================================

Cet article a été publié à l'origine sur [PubNub.com](https://www.pubnub.com/blog/realtime-live-chat-application-javascript-pubnub-10-lines-of-code/)

Notre plateforme aide les développeurs à construire, fournir et gérer l'interactivité en temps réel pour les applications web, les applications mobiles et les appareils IoT.

La base de notre plateforme est le réseau de messagerie en temps réel le plus grand et le plus évolutif de l'industrie. Avec plus de 15 points de présence dans le monde, 800 millions d'utilisateurs actifs mensuels et une fiabilité de 99,999 %, vous n'aurez jamais à vous soucier des pannes, des limites de concurrence ou des problèmes de latence causés par les pics de trafic.

Découvrez PubNub
----------------

Découvrez le [Live Tour](https://www.pubnub.com/tour/introduction/) pour comprendre les concepts essentiels de chaque application alimentée par PubNub en moins de 5 minutes.

S'installer
-----------

Créez un [compte PubNub](https://admin.pubnub.com/signup/) pour un accès immédiat et gratuit aux clés PubNub.

Commencer
---------

La [documentation PubNub](https://www.pubnub.com/docs) vous permettra de démarrer, quel que soit votre cas d'utilisation ou votre [SDK](https://www.pubnub.com/docs).