sockjs NPM (Comment ça marche pour les développeurs)

Introduction

SockJS et IronPDF jouent des rôles différents mais complémentaires dans la création d'applications en ligne. Un package JavaScript appelé SockJS offre une API HTTP bidirectionnelle pour la communication client-serveur qui ressemble à WebSockets. Il permet aux navigateurs web et aux serveurs de communiquer en temps réel et par le biais d'événements, ce qui rend possible l'utilisation d'applications telles que les salons de discussion, les nouvelles en direct et les outils de travail en équipe. Toutefois, dans le cadre de Node.js, IronPDF est une puissante bibliothèque JavaScript qui permet de produire et de modifier des documents PDF de manière programmatique.

Alors qu'IronPDF permet de créer et de gérer des documents PDF de manière dynamique, le client SockJS gère les fonctions d'échange de données en temps réel et de collaboration dans les applications en ligne par le biais d'un canal de communication interdomaine. En intégrant le pendant serveur de SockJS à IronPDF, les développeurs peuvent facilement générer et servir des documents PDF en fonction de données dynamiques ou d'interactions avec l'utilisateur, tout en améliorant leurs apps grâce à des changements en temps réel. Grâce à cette combinaison, les développeurs peuvent concevoir des applications en ligne sophistiquées qui prennent en charge une variété de cas d'utilisation, y compris des applications à forte intensité documentaire et des plateformes collaboratives, en utilisant à la fois la communication en temps réel et la création dynamique de PDF.

Qu'est-ce que SockJS NPM ?

SockJS est une bibliothèque JavaScript côté navigateur qui facilite la communication en temps réel bidirectionnelle entre les clients web et les serveurs. Il fait abstraction de WebSocket et offre un mécanisme de repli vers des protocoles de transport alternatifs tels que HTTP long-polling et XHR streaming, garantissant ainsi la compatibilité avec divers navigateurs et environnements web. Il fournit une API JavaScript simple pour établir et gérer des connexions et gérer des événements tels que l'ouverture d'une connexion, la réception d'un message et la fermeture d'une connexion. En outre, SockJS comprend un client en ligne de commande à des fins de test et de débogage, ce qui le rend polyvalent pour les environnements de développement et de production. Globalement, l'objet JavaScript SockJS simplifie la mise en œuvre de fonctions en temps réel dans les applications web, en prenant en charge des canaux de communication évolutifs et réactifs.

Principales caractéristiques de SockJS

Compatibilité multiplateforme

SockJS garantit un comportement et une fonctionnalité cohérents sur de nombreux navigateurs et environnements web.

Mécanisme de repli

Si les connexions WebSocket sont indisponibles ou échouent, SockJS peut passer de manière transparente à d'autres protocoles de transport, tels que HTTP long-polling, XHR streaming, ou même JSONP polling.

Communication en temps réel

Il permet aux applications côté serveur (généralement utilisant Node.js ou d'autres technologies côté serveur) et aux applications JavaScript côté client (s'exécutant dans les navigateurs web) de communiquer en temps réel et de manière événementielle.

Facilité d'utilisation

Comme SockJS offre une API directe équivalente à WebSocket, les développeurs peuvent facilement l'inclure et l'utiliser dans leurs projets.

Évolutivité

SockJS facilite le développement d'applications évolutives capables de gérer de nombreuses connexions simultanées et un large éventail de situations réseau en prenant en charge plusieurs protocoles de transport et techniques de repli.

Facilité d'intégration

Il facilite la mise en œuvre des fonctionnalités en temps réel en fournissant une API simple que les développeurs peuvent incorporer dans leurs applications web sans nécessiter de programmation réseau complexe de bas niveau.

Abstraction du protocole de transport :

WebSocket, HTTP long-polling et d'autres protocoles de transport sous-jacents sont abstraits par SockJS. Grâce à son adaptabilité, une communication fiable est garantie même dans les situations où les connexions WebSocket sont restreintes ou indisponibles.

Créer et configurer SockJS

Vous devez généralement configurer SockJS à la fois côté client (dans votre navigateur web) et côté serveur (en utilisant même un navigateur ou un framework serveur comme Node.js) pour le construire et le configurer pour la communication en temps réel dans une application en ligne. Ce qui suit est un mode d'emploi de base pour la création et la configuration de SockJS :

Installer SockJS

SockJS peut être installé à l'aide de NPM ou inclus directement via un CDN :

npm install sockjs-client

npm install sockjs-client

Inclure SockJS dans votre HTML

Incluez la bibliothèque JavaScript SockJS dans le fichier HTML que vous créez :

<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>

js

Initialiser la connexion SockJS

Créez une instance de SockJS dans votre fichier JavaScript (app.js ou quelque chose de similaire) et connectez-vous à votre serveur :

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>SockJS + IronPDF Example</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script>
      const sock = new SockJS("http://localhost:3000/socket");
      sock.onopen = function () {
        console.log("Connection opened");
      };
      sock.onmessage = function (e) {
        console.log("Message received:", e.data);
      };
      sock.onclose = function () {
        console.log("Connection closed");
      };
      // Example of sending a message
      function sendMessage(message) {
        sock.send(message);
      }
    </script>
    Enter the Message : 
  </body>
</html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>SockJS + IronPDF Example</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script>
      const sock = new SockJS("http://localhost:3000/socket");
      sock.onopen = function () {
        console.log("Connection opened");
      };
      sock.onmessage = function (e) {
        console.log("Message received:", e.data);
      };
      sock.onclose = function () {
        console.log("Connection closed");
      };
      // Example of sending a message
      function sendMessage(message) {
        sock.send(message);
      }
    </script>
    Enter the Message : 
  </body>
</html>

L'URL de votre point de terminaison WebSocket côté serveur doit être utilisée à la place de "http://localhost:3000/socket".

Configuration côté serveur

Installer SockJS-Node

Pour installer le paquet SockJS-Node, utilisez npm :

npm install sockjs

npm install sockjs

Configurer SockJS Serve

Dans votre serveur Node.js, configurez SockJS :

const http = require('http');
const sockjs = require('sockjs');
// Create a SockJS server
const sockjsServer = sockjs.createServer();
// Attach the server to an HTTP server instance
const server = http.createServer();
sockjsServer.installHandlers(server, { prefix: '/socket' });
// Define SockJS event handlers
sockjsServer.on('connection', function(conn) {
    console.log('Client connected');
    conn.on('data', function(message) {
        console.log('Received message:', message);
        // Handle incoming messages from client
    });
    conn.on('close', function() {
        console.log('Client disconnected');
    });
});
// Start the server
const PORT = 3000;
server.listen(PORT, function() {
    console.log(`Server listening on port ${PORT}`);
});

js

Assurez-vous que le code côté serveur est adapté aux exigences de votre application et qu'il fonctionne avec le cadre ou la configuration du serveur dont vous disposez déjà.

Requêtes cross-origin (CORS) : Prenez soin du serveur de test qui gère efficacement les paramètres CORS si votre serveur et client sont sur des domaines distincts.

Gestion des erreurs : Conformément aux spécifications de votre application, mettez en œuvre la gestion des erreurs et les mesures de sécurité dans les limites du navigateur (telles que l'authentification et l'autorisation).

Déploiement : Configurez HTTPS pour des connexions sécurisées et configurez SockJS ainsi que votre serveur pour les environnements de déploiement.

Cette configuration offre une base fondamentale pour établir une communication en temps réel entre un client web et un serveur web, en utilisant SockJS. Des ajustements peuvent être nécessaires en fonction des exigences et de l'architecture de votre application particulière.

Pour commencer

La mise en place d'une application web qui utilise les capacités de communication en temps réel de SockJS et intègre IronPDF pour la création dynamique de PDF est la première étape pour commencer à utiliser SockJS et IronPDF. Voici un guide de départ :

Qu'est-ce qu'IronPDF ?

Un puissant outil Node.js appelé IronPDF est conçu pour transformer les données HTML en fichiers PDF d'une qualité exceptionnellement élevée. Sans sacrifier le contenu web original, il accélère le processus de conversion des fichiers HTML, CSS et autres fichiers JavaScript en PDF correctement formatés. Pour les applications web qui doivent générer des documents dynamiques et imprimables tels que des rapports, des factures et des certifications, c'est un outil très utile.

Paramètres de page personnalisables, en-têtes, pieds de page, et la possibilité d'ajouter des polices et des images ne sont qu'un aperçu des capacités d'IronPDF. Il peut gérer des dispositions et des styles complexes pour garantir que chaque sortie PDF de test satisfait aux exigences. De plus, IronPDF gère l'exécution de JavaScript à l'intérieur du HTML, permettant un rendu précis du contenu dynamique et interactif.

Caractéristiques d'IronPDF

1. Génération de PDF à partir de HTML

Convertissez JavaScript, HTML et CSS en PDF. Prend en charge les requêtes média et la conception réactive, deux normes web contemporaines. utile pour décorer dynamiquement des rapports, des factures et des documents PDF avec du HTML et du CSS.

2. Edition PDF

Des textes, des photos et d'autres contenus peuvent être ajoutés à des PDF préexistants. Extraire du texte et des images de fichiers PDF. Combinez plusieurs PDF en un seul fichier. Diviser des fichiers PDF en plusieurs documents distincts. Inclure des filigranes, des annotations, des en-têtes et des pieds de page.

3. Performance et fiabilité

Les performances élevées et la fiabilité sont des qualités recherchées dans les environnements industriels. Gestion aisée de grands ensembles de documents.

Installer IronPDF

Installez le package IronPDF pour obtenir les outils dont vous avez besoin pour travailler avec des PDF dans des projets Node.js. Dans la ligne de commande, ajoutez la ligne de code suivante.

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

Combiner SockJS avec IronPDF

Configurez SockJS sur votre serveur Node.js pour traiter les demandes de génération de PDF et gérer les connexions des clients :

// server.js
const http = require("http");
const sockjs = require("sockjs");
const IronPdf = require("@ironsoftware/ironpdf");
var config = IronPdf.IronPdfGlobalConfig;
config.setConfig({
  licenseKey:
    "",
});
// Create a SockJS server
const sockjsServer = sockjs.createServer();
// Attach the server to an HTTP server instance
const server = http.createServer();
sockjsServer.installHandlers(server, { prefix: "/socket" });
// Handle SockJS connections and messages
sockjsServer.on("connection", function (conn) {
  console.log("Client connected");
  // Handle incoming messages (PDF generation requests)
  conn.on("data", async function(message) {
    console.log("Received message:", message);
    // Generate PDF using IronPDF
    let pdfdata = await generatePdf(message);
    // Send generated PDF data back to client
    conn.write(pdfdata);
  });
  conn.on("close", function () {
    console.log("Client disconnected");
  });
});
// Function to generate PDF using IronPDF
const generatePdf = async (htmlContent) => {
  const pdfDocument = IronPdf.PdfDocument;
  let result = (await pdfDocument.fromHtml(htmlContent));
  const pdfBuffer = await result.saveAsBuffer();
  return pdfBuffer;
};
// Start the HTTP server
const PORT = 3000;
server.listen(PORT, function () {
  console.log(`Server listening on port ${PORT}`);
});

js

Configuration côté client

Configurez SockJS du côté client pour interagir avec le serveur et soumettre des requêtes pour générer des PDF.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SockJS + IronPDF Example</title>
</head>
<body>
    <button onclick="generatePdf()">Generate PDF</button>
      <!--// add SockJS browser JavaScript library -->
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script>
        const sock = new SockJS('http://localhost:3000/socket');
        sock.onopen = function() {
            console.log('Connection opened');
        };
        sock.onmessage = function(e) {
            console.log('PDF received');
            // Example: Display or download PDF received from server
            displayPdf(e.data);
        };
        sock.onclose = function() {
            console.log('Connection closed');
        };
        function generatePdf() {
            // Example: HTML content to generate PDF
            const htmlContent = '<html><body><h1>Hello, IronPDF!</h1></body></html>';
            // Send HTML content to server for PDF generation
            sock.send(htmlContent);
        }
        function displayPdf(pdfData) {
            // Example: Display or download PDF data received from server
            const pdfBlob = new Blob([atob(pdfData)], { type: 'application/pdf' });
            const pdfUrl = URL.createObjectURL(pdfBlob);
            window.open(pdfUrl, '_blank');
        }
    </script>
</body>
</html>

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SockJS + IronPDF Example</title>
</head>
<body>
    <button onclick="generatePdf()">Generate PDF</button>
      <!--// add SockJS browser JavaScript library -->
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script>
        const sock = new SockJS('http://localhost:3000/socket');
        sock.onopen = function() {
            console.log('Connection opened');
        };
        sock.onmessage = function(e) {
            console.log('PDF received');
            // Example: Display or download PDF received from server
            displayPdf(e.data);
        };
        sock.onclose = function() {
            console.log('Connection closed');
        };
        function generatePdf() {
            // Example: HTML content to generate PDF
            const htmlContent = '<html><body><h1>Hello, IronPDF!</h1></body></html>';
            // Send HTML content to server for PDF generation
            sock.send(htmlContent);
        }
        function displayPdf(pdfData) {
            // Example: Display or download PDF data received from server
            const pdfBlob = new Blob([atob(pdfData)], { type: 'application/pdf' });
            const pdfUrl = URL.createObjectURL(pdfBlob);
            window.open(pdfUrl, '_blank');
        }
    </script>
</body>
</html>

Côté serveur : Un serveur SockJS (sockjsServer) est configuré par le serveur Node.js, qui surveille ensuite les connexions sur le port /socket. Il utilise IronPDF (IronPdf.PdfDocument) pour invoquer la fonction generatePdf() afin de gérer les messages entrants (demandes de génération de PDF). Après avoir généré le PDF, il utilise la connexion SockJS pour renvoyer les données PDF codées en base64 au client.

Côté client : Le client se connecte au serveur via une connexion SockJS (sock) et surveille les événements tels que onopen, onmessage et onclose. L'utilisateur utilise sock.send(htmlContent) pour envoyer le contenu HTML (htmlContent) au serveur pour la génération PDF lorsqu'il clique sur le bouton "Générer PDF". Il affiche ou télécharge le PDF pour les deux clients, après avoir obtenu les données PDF du serveur (sock.onmessage).

Vous trouverez ci-dessous le résultat généré à partir du code.

Conclusion

Une forte synergie est créée dans le développement d'applications web lorsque SockJS est utilisé pour la communication en temps réel et IronPDF pour la production dynamique de PDF. Avec SockJS, la communication bidirectionnelle entre les clients et les serveurs est facilitée, ce qui permet des fonctionnalités telles que la collaboration interactive et les mises à jour en temps réel. Cependant, IronPDF donne aux programmeurs la possibilité de créer et de modifier des documents PDF de manière programmatique. Le logiciel peut même convertir dynamiquement du texte HTML en PDF.

L'intégration de ces technologies permet de créer des applications web complexes qui peuvent créer des documents PDF instantanément en réponse à la saisie de l'utilisateur ou à des mises à jour de données en temps réel. Les applications nécessitant des fonctionnalités de génération de documents en temps réel, d'édition de groupes ou de rapports interactifs trouveront cette intégration particulièrement utile. Grâce à l'utilisation de SockJS pour les mises à jour instantanées et d'IronPDF pour la création dynamique de PDF, les développeurs peuvent optimiser l'expérience de l'utilisateur, optimiser les flux de travail et fournir des solutions résilientes qui répondent à un éventail d'exigences commerciales pour tout utilisateur sérieux de SockJS.

Nous pouvons augmenter l'utilité de votre kit de développement d'applications Node.js en utilisant IronPDF pour ajouter la reconnaissance optique de caractères (OCR), la numérisation de codes-barres, la production de PDF, l'interaction avec Excel, et de nombreuses autres fonctionnalités. Les systèmes hautement configurables d'Iron Software et sa vaste bibliothèque de plugins soutenus par la communauté permettent aux développeurs de créer des fonctionnalités et des applications web plus rapidement.

Les développeurs peuvent utiliser les nombreuses fonctionnalités d'IronPDF avec une licence d'essai gratuite et un éventail d'exemples de code fournis par l'entreprise avant de choisir d'acheter. Pour plus d'informations sur la licence perpétuelle d'IronPDF, visitez la page de la licence. Pour plus d'instructions sur la façon de commencer à utiliser IronPDF, visitez la page de documentation.