푸터 콘텐츠로 바로가기
노드 도움말

sockjs NPM (개발자를 위한 작동 방식)

SockJS와 IronPDF 온라인 애플리케이션 구축에 있어 서로 다르지만 상호 보완적인 역할을 수행합니다. SockJS라는 JavaScript 패키지는 웹소켓과 유사한 양방향 클라이언트-서버 통신용 HTTP API를 제공합니다. 이를 통해 웹 브라우저와 서버가 실시간으로 이벤트를 통해 통신할 수 있게 되며, 채팅방, 실시간 뉴스, 팀워크 도구와 같은 앱을 사용할 수 있게 됩니다. 하지만 Node.js 환경에서 IronPDF PDF 문서를 프로그래밍 방식으로 생성하고 수정할 수 있도록 해주는 강력한 JavaScript 라이브러리입니다.

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를 제공하여 실시간 기능 구현을 더 쉽게 만들어 줍니다.

전송 프로토콜 추상화:

SockJS는 WebSocket, HTTP 롱폴링 및 기타 기본 전송 프로토콜을 추상화합니다. 뛰어난 적응성 덕분에 WebSocket 연결이 제한되거나 불가능한 상황에서도 안정적인 통신이 보장됩니다.

SockJS 생성 및 구성

온라인 애플리케이션에서 실시간 통신을 위해 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의 실시간 통신 기능을 활용하고 동적 PDF 생성을 위해 IronPDF 통합하는 웹 애플리케이션을 설정하는 것이 SockJS 및 IronPDF 시작하는 첫 번째 단계입니다. 다음은 시작 가이드입니다.

IronPDF 란 무엇인가요?

IronPDF 라는 강력한 Node.js 도구는 HTML 데이터를 매우 높은 품질의 PDF 파일로 변환하도록 설계되었습니다. 원본 웹 콘텐츠를 손상시키지 않고 HTML, CSS 및 기타 JavaScript 파일을 올바른 형식의 PDF로 변환하는 프로세스를 신속하게 처리할 수 있습니다. 이 도구는 보고서, 송장, 인증서와 같은 동적이고 인쇄 가능한 문서를 생성해야 하는 웹 애플리케이션에 매우 유용합니다.

사용자 정의 가능한 페이지 설정, 머리글, 바닥글, 글꼴 및 이미지 추가 기능은 IronPDF의 기능 중 일부에 불과합니다. 이 프로그램은 복잡한 레이아웃과 스타일을 처리하여 모든 테스트 PDF 출력물이 요구 사항을 충족하도록 보장합니다. 또한 IronPDF HTML 내부의 JavaScript 실행을 관리하여 정확하고 동적이며 상호 작용적인 콘텐츠 렌더링을 가능하게 합니다.

sockjs NPM (개발자를 위한 작동 방식): 그림 4 - IronPDF

IronPDF 의 특징

1. HTML에서 PDF 생성

JavaScript, HTML, CSS 파일을 PDF로 변환합니다. 미디어 쿼리와 반응형 디자인을 지원하며, 이는 최신 웹 표준 두 가지입니다. PDF 보고서, 송장 및 문서를 HTML과 CSS를 사용하여 동적으로 꾸미는 데 유용합니다.

2. PDF 편집

기존 PDF 파일에 텍스트, 이미지 및 기타 콘텐츠를 추가할 수 있습니다. PDF 파일에서 텍스트와 이미지를 추출합니다. 여러 개의 PDF 파일을 하나의 파일로 병합합니다. 여러 개의 PDF 파일을 개별 문서로 분할합니다. 워터마크, 주석, 머리글 및 바닥글을 포함하세요.

3. 성능 및 신뢰성

산업 현장에서는 고성능과 신뢰성이 중요한 설계 요소입니다. 대규모 문서 세트를 손쉽게 관리합니다.

IronPDF를 설치하세요

Node.js 프로젝트에서 PDF 작업을 위한 도구를 얻으려면 IronPDF 패키지를 설치하세요. 다음 명령어를 실행하세요:

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 생성을 위한 요청을 제출합니다.


<!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 서버(sockjsServer)를 구성하고 /socket 경로에서 연결을 수신합니다. IronPDF(IronPdf.PdfDocument)를 사용하여 generatePdf() 함수를 호출하여 수신된 메시지(PDF 생성 요청)를 처리합니다. PDF를 생성한 후, SockJS 연결을 사용하여 base64로 인코딩된 PDF 데이터를 클라이언트로 다시 전송합니다.

sockjs NPM (개발자를 위한 작동 방식): 그림 5 - SockJS 클라이언트 소스 코드 출력

클라이언트 측: 클라이언트는 SockJS 연결(sock)을 통해 서버에 연결하고, onopen, onmessage, onclose 등의 이벤트를 수신합니다. 사용자는 "PDF 생성" 버튼을 클릭할 때 sock.send(htmlContent)을 사용하여 서버로 HTML 콘텐츠(htmlContent)를 보내 PDF 생성을 요청합니다. 서버로부터 PDF 데이터(sock.onmessage)를 얻은 후 PDF를 표시하거나 다운로드합니다.

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 사용 시작 방법에 대한 자세한 내용은 설명서 페이지를 참조하십시오.

다리우스 세란트
풀스택 소프트웨어 엔지니어 (웹 운영)

다리우스 세런트는 마이애미 대학교에서 컴퓨터 과학 학사 학위를 받았으며, Iron Software에서 풀 스택 웹 운영 마케팅 엔지니어로 근무하고 있습니다. 어린 시절부터 코딩에 매료되었던 그는 컴퓨팅이 신비로우면서도 접근하기 쉬운 분야라고 생각했고, 창의력과 문제 해결 능력을 발휘하기에 완벽한 매체라고 여겼습니다.

Iron Software에서 다리우스는 새로운 것을 만들고 복잡한 개념을 단순화하여 더 쉽게 이해할 수 있도록 하는 것을 즐깁니다. 그는 사내 개발자로서 학생들을 가르치는 데에도 자원하여 차세대 인재들과 전문 지식을 공유하고 있습니다.

다리우스에게 있어 그의 일은 가치 있고 실질적인 영향을 미치기 때문에 보람 있는 일입니다.

아이언 서포트 팀

저희는 주 5일, 24시간 온라인으로 운영합니다.
채팅
이메일
전화해