HTML을 nodejs에 연결하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

HTML을 nodejs에 연결하는 방법

PHPz

May 13, 2023 pm 05:10 PM

최근 몇 년 동안 웹 애플리케이션이 급속히 발전함에 따라 Node.js(경량 JavaScript 런타임 환경)도 다양한 서버 측 애플리케이션을 개발하는 데 널리 사용되었습니다. HTML은 웹의 핵심 언어입니다. 그렇다면 HTML을 Node.js 백엔드에 어떻게 연결하나요? 이 기사에서는 이에 대해 하나씩 답변해 드립니다.

HTML과 Node.js의 관계를 더 잘 이해하려면 먼저 HTML이 어떻게 작동하는지 이해해야 합니다. HTML은 웹 페이지 디자인의 기본 언어로, 수많은 태그(태그)를 통해 페이지의 구조와 레이아웃을 기술하고, 다양한 미디어 파일(이미지, 사운드, 비디오 등)을 통해 콘텐츠를 표시합니다. Node.js는 웹 요청을 처리하고 웹 페이지를 클라이언트에 반환할 수 있는 JavaScript 언어 기반의 백엔드 서버 기술입니다. 클라이언트가 웹 페이지를 요청하면 Node.js는 백엔드 데이터베이스에서 필요한 데이터를 검색한 다음 이를 HTML 코드에 동적으로 삽입하여 동적 웹 페이지를 생성합니다.

HTML과 Node.js를 연결하려면 일부 프레임워크와 라이브러리를 사용하여 작업 부하를 줄여야 합니다. 다음은 일반적으로 사용되는 프레임워크 및 라이브러리입니다.

1.Express.js

Express.js는 개발자가 확장 가능한 웹 애플리케이션을 빠르게 구축하는 데 도움이 되는 Node.js 기반의 웹 애플리케이션 프레임워크입니다. 애플리케이션 개발을 더 쉽게 만들기 위해 일련의 API를 제공합니다.

다음은 Express.js를 사용하여 HTML과 Node.js를 연결하는 간단한 예입니다.

const express = require('express');
const app = express();

app.use(express.static('public'));
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

app.listen(3000, () => {
  console.log('App listening on port 3000!');
});

로그인 후 복사

위 코드에서 express() 함수는 Express 애플리케이션 인스턴스를 생성하고 이를 < code>앱변수. app.use() 함수는 웹 서버가 public 디렉토리에서 정적 파일(예: CSS 및 JavaScript 파일)을 호스팅하도록 지정합니다. app.get() 함수는 URL 경로가 /일 때 index.html 파일이 서버에서 전송되도록 지정합니다. app.listen() 함수는 애플리케이션을 포트 3000에 바인딩합니다. express()函数创建一个Express应用程序实例，并将其赋值给app变量。app.use()函数指定Web服务器将静态文件（如CSS和JavaScript文件）托管在public目录下。app.get()函数指定当URL路径为/时，从服务器发送index.html文件。app.listen()函数将应用程序绑定到端口3000上。

2.Handlebars.js

Handlebars.js是一个流行的模板引擎，它可以根据页面和数据生成HTML。它与Node.js的Express.js框架集成非常好，借助于它可以更方便地连接HTML和Node.js。

以下是一个使用Handlebars.js连接HTML和Node.js的简单示例：

const express = require('express');
const exphbs  = require('express-handlebars');

const app = express();

app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

app.get('/', (req, res) => {
  res.render('home', {
    name: 'World'
  });
});

app.listen(3000, () => {
  console.log('App listening on port 3000!');
});

로그인 후 복사

上述代码中，exphbs()函数返回一个Handlebars.js实例，并将其赋值给app.engine()函数的第一个参数。app.set()函数指定模板引擎为Handlebars.js。app.get()函数在访问根路径时渲染home.handlebars模板并传递设置name变量为"World"。

3.Socket.IO

Socket.IO是一个Node.js和浏览器之间实时通信的库。它允许服务器与客户端之间进行双向通信，可以在HTML和Node.js之间实现实时通信。

以下是一个使用Socket.IO连接HTML和Node.js的简单示例：

服务端代码：

const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('disconnect', () => {
    console.log('user disconnected');
  });

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

server.listen(3000, () => {
  console.log('App listening on port 3000!');
});

로그인 후 복사

客户端代码：

<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO Example</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <ul id="messages"></ul>
  <form id="message-form">
    <input type="text" id="message-input">
    <button type="submit">Send</button>
  </form>
  <script>
    var socket = io();

    var form = document.getElementById('message-form');
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      var msgInput = document.getElementById('message-input');
      socket.emit('chat message', msgInput.value);
      msgInput.value = '';
    });

    socket.on('chat message', function(msg) {
      var messages = document.getElementById('messages');
      var message = document.createElement('li');
      message.innerHTML = msg;
      messages.appendChild(message);
    });
  </script>
</body>
</html>

로그인 후 복사

上述代码中，服务端代码使用socket.io模块创建了一个Socket.IO服务器，并在客户端与服务器之间建立连接时记录日志。当接收到客户端发来的chat message消息时，服务器将该消息广播给所有当前连接的客户端。客户端使用socket.io.js

2.Handlebars.js

Handlebars.js는 페이지와 데이터를 기반으로 HTML을 생성할 수 있는 인기 있는 템플릿 엔진입니다. 이는 Node.js용 Express.js 프레임워크와 매우 잘 통합되어 HTML과 Node.js를 보다 편리하게 연결할 수 있습니다. 🎜🎜다음은 Handlebars.js를 사용하여 HTML과 Node.js를 연결하는 간단한 예입니다. 🎜rrreee🎜위 코드에서 exphbs() 함수는 Handlebars.js 인스턴스를 반환하고 할당합니다. app.engine()함수의 첫 번째 매개변수입니다. app.set() 함수는 템플릿 엔진을 Handlebars.js로 지정합니다. app.get() 함수는 루트 경로에 액세스할 때 home.handlebars 템플릿을 렌더링하고 name 변수를 "World"에 전달합니다. 🎜🎜3.Socket.IO🎜🎜Socket.IO는 Node.js와 브라우저 간의 실시간 통신을 위한 라이브러리입니다. 이는 서버와 클라이언트 간의 양방향 통신을 허용하여 HTML과 Node.js 간의 실시간 통신을 가능하게 합니다. 🎜🎜다음은 Socket.IO를 사용하여 HTML과 Node.js를 연결하는 간단한 예입니다. 🎜🎜서버 코드: 🎜rrreee🎜클라이언트 코드: 🎜rrreee🎜위 코드에서 서버 코드는

socket.io를 사용합니다.  모듈은 Socket.IO 서버를 생성하고 클라이언트와 서버 사이에 연결이 설정되면 기록합니다. 클라이언트로부터 <code>채팅 메시지

메시지를 받으면 서버는 현재 연결된 모든 클라이언트에게 메시지를 브로드캐스트합니다. 클라이언트는 socket.io.js 라이브러리를 사용하여 Socket.IO 서버에 연결하고 양식 제출 데이터는 Socket.IO 서버로 전송되며 브로드캐스트 메시지는 Socket.IO 클라이언트를 통해 자동으로 수신됩니다. . 🎜🎜요약하자면, HTML과 Node.js의 연결은 웹 애플리케이션 개발 구축 시 유연성과 실시간을 달성할 수 있습니다. 프레임워크와 라이브러리를 사용하면 연결이 더 쉬워지지만 HTML, Node.js 및 웹 개발에 대해 깊이 이해하는 것이 중요합니다. 🎜

위 내용은 HTML을 nodejs에 연결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.