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 和前端的交互可以通過以下方式進行:
HTTP 請求/響應:Node.js 服務器可以處理來自瀏覽器或其他客戶端的 HTTP 請求,并返回 HTML、JSON 或其他類型的響應。
WebSocket:WebSocket 是一種雙向實時通信協議,允許 Node.js 服務器與前端建立持久連接,以便實時傳輸數據。
Socket.IO:Socket.IO 是一個 WebSocket 庫,簡化了 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>
登錄后復制