Node.js 與前端可透過 HTTP 請求/回應、WebSocket 以及 Socket.IO 進行互動:建立 Node.js 伺服器並定義路由。前端發送 HTTP 請求或使用 WebSocket 或 Socket.IO 建立連線。 Node.js 伺服器處理請求並回傳回應或透過即時連線發送資料。
Node.js 與前端的互動
Node.js 是一種用於建立伺服器端應用程式的JavaScript 執行環境。它可以與前端技術(如 HTML、CSS 和 JavaScript)交互,以提供動態和互動的 Web 應用程式。
互動方法
Node.js 和前端的互動可以透過以下方式進行:
實作步驟
1. 建立伺服器:
<code class="javascript">const express = require('express'); const app = express(); const server = app.listen(3000);</code>
2. 定義路由:
<code class="javascript">app.get('/', (req, res) => { res.send('Hello from Node.js!'); });</code>
3. 處理前端請求:
<code class="javascript">app.post('/submit-form', (req, res) => { const data = req.body; // 处理表单数据... });</code>
4. 使用WebSocket:
<code class="javascript">const WebSocket = require('ws'); const wss = new WebSocket.Server({ server }); wss.on('connection', (ws) => { // 与客户端建立 WebSocket 连接... });</code>
#5 . 使用Socket.IO:
<code class="javascript">const socketIO = require('socket.io'); const io = socketIO(server); io.on('connection', (socket) => { // 与客户端建立 Socket.IO 连接... });</code>
前端程式碼範例:
<code class="javascript">// 发送 HTTP 请求 fetch('/submit-form', { method: 'POST', body: JSON.stringify({ name: 'John' }), }) .then((res) => res.json()) .then((data) => console.log(data)); // 建立 WebSocket 连接 const socket = new WebSocket('ws://localhost:3000'); socket.onopen = () => console.log('Connected to WebSocket'); // 使用 Socket.IO const socket = io(); socket.on('connect', () => console.log('Connected to Socket.IO'));</code>
以上是nodejs怎麼跟前端交互的詳細內容。更多資訊請關注PHP中文網其他相關文章!