跳至頁尾內容
NODE 說明

sockjs NPM(開發者的使用方法)

SockJS和IronPDF在建立線上應用中扮演不同但互補的角色。 名為SockJS的JavaScript套件提供一個雙向的HTTP API,用於類似WebSockets的客戶端-伺服器通信。 它使得網頁瀏覽器和伺服器能夠即時和通過事件進行通信,使應用如聊天室、即時新聞和團隊合作工具成為可能。 然而,在Node.js環境中,IronPDF是一個強大的JavaScript程式庫,能夠以程式方式生成和修改PDF文件。

IronPDF允許動態建立和管理PDF文件,而SockJS客戶端通過跨域通信通道管理線上應用中的即時資料交換和協作功能。 通過將SockJS伺服器端整合到IronPDF中,開發人員可以輕鬆生成和服務基於動態資料或使用者互動的PDF文件,同時增強其應用程式的即時變更功能。 通過這種結合,開發人員可以設計支持多種使用場景的複雜線上應用,包括文件密集型應用和協作平台,利用即時通信和動態PDF建立。

SockJS NPM是什麼?

SockJS 是一個瀏覽器端的JavaScript程式庫,促進了網頁客戶端和伺服器之間的即時雙向通信。 它抽象了WebSocket並提供了一種回退機制到其他傳輸協議,如HTTP長輪詢和XHR流,確保在各種網頁瀏覽器和環境中的相容性。 它提供了一個簡明的JavaScript API來建立和管理連接,以及處理諸如連接打開、消息接收和關閉等事件。 此外,SockJS還包括一個命令行客戶端,用於測試和除錯目的,使其在開發和生產環境中皆適應。 總體而言,SockJS JavaScript物件簡化了網頁應用中即時特性的實現,支持可擴展且響應式的通信通道。

sockjs NPM(它是如何為開發人員工作的):圖1 - SockJS

SockJS的關鍵特性

跨瀏覽器相容性

SockJS確保在許多網頁瀏覽器和環境中的行為和功能一致。

回退機制

如果WebSocket連接不可用或失敗,SockJS可以透明地切換到其他傳輸協議,如HTTP長輪詢,XHR流,甚至是JSONP輪詢。

即時通信

它允許伺服器端應用(通常使用Node.js或其他伺服器技術)和客戶端JavaScript應用(運行在網頁瀏覽器中)以即時和事件驅動的方式進行通信。

使用簡單度

由於SockJS提供了一個簡潔易用的API等同於WebSocket,開發者可以輕鬆在專案中包含和利用它。

可擴展性

SockJS透過支持多種傳輸協議和回退技術促進了可擴展應用的開發,這些應用可以管理多數同時連接和廣泛的網路情況。

整合簡單度

它使即時功能的實現變得更簡單,通過提供一個簡潔的API,開發者可以將其整合到其網頁應用中,而不需要複雜的低級網路編程。

傳輸協議抽象:

WebSocket,HTTP長輪詢以及其他底層傳輸協議被SockJS抽象化。 由於其適應性,可靠的通信即使在WebSocket連接受限或不可用的情況下也得到保證。

建立和配置SockJS

通常您需要在客戶端(在您的網頁瀏覽器中)和伺服器端(使用如Node.js的瀏覽器或伺服器框架)設置SockJS,以構建並配置即時通信的網上應用。 以下是一個创建和配置SockJS的基本指南:

安裝SockJS

可以使用NPM安裝SockJS或直接通過CDN包括它:

npm install sockjs-client
npm install sockjs-client
SHELL

在您的HTML中包含SockJS

在您建立的HTML文件中包含SockJS JavaScript程式庫:

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

初始化SockJS連接

在您的JavaScript文件(如app.js或類似文件)中建立一個SockJS實例並連接到您的伺服器:

<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>
      // Initialize SockJS connection
      const sock = new SockJS("http://localhost:3000/socket");

      // Event handlers
      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 function to send 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>
      // Initialize SockJS connection
      const sock = new SockJS("http://localhost:3000/socket");

      // Event handlers
      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 function to send a message
      function sendMessage(message) {
        sock.send(message);
      }
    </script>
    Enter the Message:
  </body>
</html>
HTML

應使用您伺服器端WebSocket端點的URL來代替"http://localhost:3000/socket"。

sockjs NPM(它是如何為開發人員工作的):圖2 - SockJS連接輸出

伺服器端設置

安裝SockJS-Node

要安裝SockJS-Node套件,請使用npm:

npm install sockjs
npm install sockjs
SHELL

配置SockJS伺服器

在您的Node.js伺服器中配置SockJS:

// Import necessary modules
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();

// Install SockJS handlers
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}`);
});
// Import necessary modules
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();

// Install SockJS handlers
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}`);
});
JAVASCRIPT

確保伺服器端程式碼定製以滿足您的應用要求並與您現有的伺服器框架或配置配合使用。

sockjs NPM(它是如何為開發人員工作的):圖3 - SockJS伺服器符合配置輸出

跨來源請求(CORS):如果您的伺服器和客戶端在不同的域名上,請確保伺服器有效處理CORS設置。

錯誤處理:根據您的應用程式規範實現錯誤處理和安全措施(如身份驗證和授權)。

部署:為安全連接設置HTTPS,並配置SockJS和您的伺服器以便適應部屬環境。

此配置提供使用SockJS在網頁客戶端和網頁伺服器之間建立即時通信的基本基礎。 根據您特定應用的要求和架構,可能需要進行調整。

快速入門

建立一個利用SockJS的即時通信功能並整合IronPDF進行動態PDF建立的網頁應用程式是開始使用SockJS和IronPDF的第一步。 以下是一個起點指南:

什麼是IronPDF?

一種強大的Node.js工具IronPDF是為了將HTML資料轉換為極高品質的PDF文件而設計的。 在不犧牲原始網路內容的情況下,加速將HTML、CSS和其他JavaScript文件轉換為正確格式的PDF的過程。 這是一個對於需要生成動態、可列印文件如報告、發票和證書的網頁應用非常有用的工具。

可自定義的頁面設置、頁眉、頁腳以及新增字型和圖片的功能僅是IronPDF的一部分功能。 它能夠處理複雜的佈局和樣式,以保證每個測試的 PDF 輸出滿足需求。 此外,IronPDF 處理 HTML 中的 JavaScript 執行,使能夠精確呈現動態和互動內容。

sockjs NPM(它是如何為開發人員工作的):圖4 - IronPDF

IronPDF的功能

1. 從HTML生成PDF

將JavaScript、HTML和CSS轉換為PDF。 支持媒體查詢和響應式設計這兩種當代 Web 標準。 適用於動態裝飾PDF報告、發票和文件與HTML和CSS。

2. PDF編輯

可以在現有的PDF中新增文字、圖片和其他內容。 從PDF文件中提取文字和圖片。 可以將多個PDF合併為一個文件。將PDF文件分為多個獨立的文件。 包括水印、註釋、頁眉和頁腳。

3. 性能和可靠性

在工業環境下,高效能和可靠性是理想的設計特徵。 輕鬆管理大文件集。

安裝IronPDF

安裝IronPDF套件以獲取在Node.js專案中使用PDF所需的工具。 執行以下命令:

 npm i @ironsoftware/ironpdf

結合SockJS與IronPDF

在您的Node.js伺服器上配置SockJS以處理PDF生成請求並管理客戶連接:

// server.js

// Import necessary modules
const http = require("http");
const sockjs = require("sockjs");
const IronPdf = require("@ironsoftware/ironpdf");

// Configure IronPDF with your license key
var config = IronPdf.IronPdfGlobalConfig;
config.setConfig({
  licenseKey: "",  // Add your IronPDF license key here
});

// Create a SockJS server
const sockjsServer = sockjs.createServer();

// Attach the SockJS 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}`);
});
// server.js

// Import necessary modules
const http = require("http");
const sockjs = require("sockjs");
const IronPdf = require("@ironsoftware/ironpdf");

// Configure IronPDF with your license key
var config = IronPdf.IronPdfGlobalConfig;
config.setConfig({
  licenseKey: "",  // Add your IronPDF license key here
});

// Create a SockJS server
const sockjsServer = sockjs.createServer();

// Attach the SockJS 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}`);
});
JAVASCRIPT

客戶端設置

在客戶端配置SockJS以與伺服器交互並提交請求生成PDF。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SockJS + IronPDF Example</title>
</head>
<body>
    <button onclick="generatePdf()">Generate PDF</button>

    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script>
        // Initialize SockJS connection
        const sock = new SockJS('http://localhost:3000/socket');

        // Event handlers
        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 to generate PDF
        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 to display or download PDF data
        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>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SockJS + IronPDF Example</title>
</head>
<body>
    <button onclick="generatePdf()">Generate PDF</button>

    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script>
        // Initialize SockJS connection
        const sock = new SockJS('http://localhost:3000/socket');

        // Event handlers
        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 to generate PDF
        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 to display or download PDF data
        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>
HTML

伺服器端:Node.js服務配置一個SockJS伺服器(/socket路徑上監聽連接。 它使用IronPDF(generatePdf()函式,以處理傳入的消息(PDF生成請求)。 在生成PDF後,它使用SockJS連接將base64編碼的PDF資料發回客戶端。

sockjs NPM(它是如何為開發人員工作的):圖5 - SockJS客戶端源碼輸出

客戶端:客戶端通過一個SockJS連接(onclose。 使用者使用htmlContent)發送到伺服器進行PDF生成,當他們點擊"生成PDF"按鈕時。 在獲取到來自伺服器的PDF資料後,它會顯示或下載PDF(sock.onmessage)。

sockjs NPM(它是如何為開發人員工作的):圖6 - 客戶端輸出

下方是從程式碼生成的輸出。

sockjs NPM(它是如何為開發人員工作的):圖7 - PDF輸出

結論

當SockJS用於即時通信且IronPDF用於動態PDF生成時,網頁應用開發中會創造出強大的協同效應。 使用SockJS後,客戶與伺服器之間的雙向通信變得簡單,實現如互動式協作和即時更新等功能。 然而,IronPDF給予程式設計師能夠程式化地建立和修改PDF文件的能力。 它甚至可以即時將HTML文字轉換為PDF。

這些技術的整合使得複雜的網頁應用能夠即時生成PDF文件,以回應使用者輸入或即時資料更新。 需要即時文件生成、組內編輯或互動式報告功能的應用程式會發現這種整合特別有幫助。 通過運用SockJS進行即時更新和IronPDF進行動態PDF建立,開發人員可以優化使用者體驗、優化工作流程,並提供能夠滿足任何嚴肅SockJS使用者的業務需求的彈性解決方案。

我們可以通過利用IronPDF增加您的Node.js應用開發工具箱的使用多樣性,從而增加光學字元識別、條形碼掃描、PDF生成、Excel交互和諸多其他功能。 Iron Software高度可配置的系統和社區支持的廣泛插件庫使得開發人員能夠更快速地構建功能和網頁應用。

開發人員可以在選擇購買之前,使用IronPDF的許多功能與公司的程式碼樣例和免費的試用授權。 有關IronPDF永久授權的更多資訊,請存取授權頁面。 如需進一步指導如何開始使用IronPDF,請存取文件頁面。

Darrius Serrant
全端軟體工程師(WebOps)

Darrius Serrant擁有邁阿密大學的電腦科學學士學位,並在Iron Software擔任全端WebOps行銷工程師。從小就對程式設計有興趣,他認為計算既神秘又易於理解,成為創意和問題解決的完美媒介。

在Iron Software,Darrius喜歡創造新事物並簡化複雜的概念,使其更易於理解。作為我們的常駐開發人員之一,他還志願教學,將他的專業知識傳授給下一代。

對Darrius來說,他的工作是有意義的,因為它有價值且對社會有真正的影響。

Iron 支援團隊

我們線上24小時,每週5天。
聊天
電子郵件
給我打電話