節點幫助

sockjs NPM（對開發者的運作方式）

發佈 2024年10月24日

介紹

SockJS 和 IronPDF 在構建在線應用程式中扮演著不同但互補的角色。一個名為SockJS的JavaScript套件提供了雙向超文本傳輸協定用於客戶端與伺服器通信的 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，使實時功能的實現更容易，開發人員可以將其集成到其網頁應用程序中，而無需進行複雜的底層網絡編程。

傳輸協議抽象化：

WebSocket、HTTP 長輪詢及其他底層傳輸協議由 SockJS 進行抽象處理。由於其適應性，甚至在 WebSocket 連線受限或不可用的情況下，也能保證可靠的通信。

創建和配置 SockJS

您通常需要在客戶端設置 SockJS。(在您的網頁瀏覽器中)以及伺服器端(甚至使用像 Node.js 这样的瀏覽器或伺服器框架)建構並配置它以供線上應用程式中的即時通訊使用。以下是創建和配置 SockJS 的基本指南：

安裝 SockJS

SockJS 可以使用 NPM 安裝或直接通過 CDN 包含：

npm install sockjs-client

npm install sockjs-client

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install sockjs-client

VB C#

在您的 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>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>

VB C#

初始化 SockJS 連接

在您的 JavaScript 文件中創建一個 SockJS 實例(app.js或類似的內容)然後連接到您的伺服器：

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

'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <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");
"https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script> (Of script) const sock = New SockJS("http://localhost:3000/socket")
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private <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
"UTF-8" /> (Of title) SockJS + IronPDF Example</title> </head> (Of body) <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script> (Of script) const sock
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private <html lang="en"> <head> <meta charset="UTF-8" /> <title> SockJS + IronPDF Example</title> </head> <body> <script src
"en"> (Of head) <meta charset="UTF-8" /> (Of title) SockJS + IronPDF Example</title> </head> (Of body) <script src
Private Private Private Private <html lang="en"> (Of head) <meta charset
	  sock.onopen = [function]()
	  If True Then
		console.log("Connection opened")
	  End If
	  sock.onmessage = [function](e)
	  If True Then
		console.log("Message received:", e.data)
	  End If
	  sock.onclose = [function]()
	  If True Then
		console.log("Connection closed")
	  End If
	  ' Example of sending a message
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	  @function sendMessage(message)
'	  {
'		sock.send(message);
'	  }
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'	</script> Enter the Message : </body> </html>

VB C#

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

sockjs NPM（開發者如何運作）：圖2 - SockJS 連接輸出

伺服器端設置

安裝 SockJS-Node

要安裝 SockJS-Node 套件，請使用 npm：

npm install sockjs

npm install sockjs

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install sockjs

VB C#

配置SockJS服務

在您的 Node.js 伺服器中，配置 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}`);
});

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}`);
});

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); }); 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}`); })

VB C#

確保伺服器端代碼根據您的應用程式需求進行自訂，並與您已有的伺服器框架或配置協作運行。

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install @ironsoftware/ironpdf

VB C#

將 SockJS 與 IronPDF 結合

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

// 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}`);
});

// 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}`);
});

' server.js
const http = require("http")
const sockjs = require("sockjs")
const IronPdf = require("@ironsoftware/ironpdf")
Dim 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"); conn.on("data", async [function](message) { console.log("Received message:", message); let pdfdata = Await generatePdf(message); conn.write(pdfdata); }); conn.on("close", [function]() { console.log("Client disconnected"); }); })
' Function to generate PDF using IronPDF
const generatePdf = Async Function(htmlContent)
  const pdfDocument = IronPdf.PdfDocument
  Dim result As let = (Await pdfDocument.fromHtml(htmlContent))
  const pdfBuffer = Await result.saveAsBuffer()
  Return pdfBuffer
End Function
' Start the HTTP server
const PORT = 3000
server.listen(PORT, [function]() { console.log(`Server listening on port ${PORT}`); })

VB C#

客戶端設置

在客戶端配置 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>
        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>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<!-- 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> <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script> <script> const sock = New SockJS('http: sock.onopen = @function() { console.log('Connection opened'); }; sock.onmessage = @function(e) { console.log('PDF received'); displayPdf(e.data); }; sock.onclose = @function() { console.log('Connection closed'); }; @function generatePdf() { const htmlContent = '<html><body><h1> Hello, IronPDF!</h1></body></html>'; sock.send(htmlContent); } @function displayPdf(pdfData) { const pdfBlob = New Blob([atob(pdfData)], { type: 'application/pdf' }); const pdfUrl = URL.createObjectURL(pdfBlob); window.open(pdfUrl, '_blank'); } </script> </body> </html>

VB C#

伺服器端： SockJS 伺服器(sockjsServer)由 Node.js 伺服器配置，然後監聽 /socket 埠的連接。它使用IronPDF(IronPdf.PdfDocument)調用 generatePdf()為了處理傳入的消息的函數(PDF 生成請求). 生成 PDF 後，它使用 SockJS 連接將 base64 編碼的 PDF 數據發送回客戶端。

sockjs NPM（其開發人員操作方式）：圖 5 - SockJS 客戶端源代碼輸出

客戶端： 客戶端通過 SockJS 連接到伺服器(襪子)並監視 onopen、onmessage 和 onclose 等事件。用戶使用sock.send(html內容)發送 HTML 內容(html內容)當他們點擊「生成 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 使用者的需求。

我們可以透過利用來提高您的 Node.js 應用程式開發工具包的實用性IronPDF添加光學字符識別、條碼掃描、PDF生成、Excel互動及其他許多功能。 Iron Software 的高度可配置系統及其廣泛的社區支持插件庫使開發人員能夠更快速地構建功能和網頁應用程式。

開發人員可以免費使用 IronPDF 的眾多功能試用授權以及在決定購買之前，查看公司提供的多種代碼範例。如需有關IronPDF永久授權的更多資訊，請造訪授權頁面。欲了解如何開始使用 IronPDF，請造訪文件頁面。

< 上一頁
browserify NPM（開發者如何使用）

下一個 >
JsdomNPM（它如何為開發者工作）