HTML을 nodejs에 연결하는 방법
- PHPz원래의
- 2023-05-13 17:10:381416검색
최근 몇 년 동안 웹 애플리케이션이 급속히 발전함에 따라 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 애플리케이션 인스턴스를 생성하고 이를 앱변수. 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
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!