跳過到頁腳內容
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 提供了一個類似於 WebSocket 的簡單 API,開發人員可以輕鬆地在其項目中包含和利用它。

可擴展性

SockJS 通過支持多種傳輸協定和備援技術促成了可擴展的應用程式的開發,該應用程式可以管理大量並發連接和範圍廣泛的網路狀況。

整合簡易性

通過提供一個開發人員可以簡單地納入其網頁應用程式的簡單 API,使得現實時功能的實現變得更簡單,而不需要復雜的低階網路編程。

傳輸協定抽象

SocketJS 將 WebSocket,HTTP 長輪詢和其他底層傳輸協定抽象化。 因其彈性,即使在 WebSocket 連接受限制或不可用的情況下也能保證可靠的通信。

創建和配置 SockJS

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

安裝 SockJS

SockJS 可以使用 NPM 安裝或通過 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。 支持當代網絡標準的媒體查詢和響應式設計。 用於動態地裝飾帶有 HTML 和 CSS 的 PDF 報告、發票和文檔。

2. PDF 編輯

可以在現有的 PDF 中添加文本、圖像和其他內容。 從PDF文件中提取文本和圖像。 合併多個 PDF 成為一個文件。將 PDF 文件分割成多個單獨的文件。 包括水印、註解、頁眉和頁腳。

3. 性能和可靠性

高性能和可靠性是工業設計中期望的設計品質。 輕鬆處理大型文件集。

安裝 IronPDF

安裝 IronPDF 包以在 Node.js 項目中獲得用於處理 PDF 的工具。 運行以下命令:

npm install @ironsoftware/ironpdf
npm install @ironsoftware/ironpdf
SHELL

將 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。

<!-- 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>
        // 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>
<!-- 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>
        // 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 服務器(sockjsServer)並監聽 /socket 路徑上的連接。 它使用 IronPDF (IronPdf.PdfDocument) 來調用 generatePdf() 函數以處理傳入信息(PDF 生成請求)。 生成 PDF 後,使用 SockJS 連接將 base64 編碼的 PDF 資料發送回給客戶端。

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

用戶端:用戶端通過 SockJS 連接(sock)連接到服務器,監聽事件如 onopen, onmessageonclose。 使用者點擊“生成 PDF”按鈕時使用 sock.send(htmlContent) 將 HTML 內容(htmlContent)發送到服務器以生成 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來添加 OCR、條碼掃描、PDF 生成、Excel 互動和許多其他功能,從而增加您 Node.js 應用開發工具包的實用性。 Iron Software 的高度可配置系統和廣泛的社區支持插件庫使開發人員能夠更快速地構建特性和網頁應用程式。

在選擇購買之前,開發人員可以使用 IronPDF 的許多功能,通過公司的範例程式碼和免費的試用授權。 有關 IronPDF 永久授權的更多信息,請訪問許可信息頁面。 有關如何開始使用 IronPDF 的進一步說明,請訪問文件頁面。

Darrius Serrant
全棧軟件工程師 (WebOps)

Darrius Serrant 擁有邁阿密大學計算機科學學士學位,目前任職於 Iron Software 的全栈 WebOps 市場營銷工程師。從小就迷上編碼,他認為計算既神秘又可接近,是創意和解決問題的完美媒介。

在 Iron Software,Darrius 喜歡創造新事物,並簡化複雜概念以便於理解。作為我們的駐場開發者之一,他也自願教學生,分享他的專業知識給下一代。

對 Darrius 來說,工作令人滿意因為它被重視且有實際影響。