Node.js實(shí)現(xiàn)WebSocket的詳細(xì)教程

更新時(shí)間：2025年11月18日 10:36:53 作者：j***4854

本文詳細(xì)介紹了如何在Node.js中使用ws庫和express框架實(shí)現(xiàn)WebSocket服務(wù)器,并涵蓋了項(xiàng)目結(jié)構(gòu)、代碼實(shí)現(xiàn)、運(yùn)行方法、功能特點(diǎn)、性能優(yōu)化建議及安全注意事項(xiàng),感興趣的朋友跟隨小編一起看看吧

Node.js實(shí)現(xiàn)WebSocket教程

1. WebSocket簡介

WebSocket是一種在單個(gè)TCP連接上提供全雙工通信的協(xié)議，允許服務(wù)器和客戶端之間進(jìn)行實(shí)時(shí)、雙向通信。本教程將詳細(xì)講解如何在Node.js中實(shí)現(xiàn)WebSocket。

2. 技術(shù)選型

我們將使用ws庫來實(shí)現(xiàn)WebSocket服務(wù)器，并結(jié)合express創(chuàng)建Web應(yīng)用。

2.1 安裝依賴

# 創(chuàng)建項(xiàng)目目錄
mkdir nodejs-websocket-demo
cd nodejs-websocket-demo
# 初始化項(xiàng)目
npm init -y
# 安裝依賴
npm install express ws uuid

依賴說明：

express: Web應(yīng)用框架
ws: WebSocket服務(wù)器實(shí)現(xiàn)
uuid: 生成唯一標(biāo)識符

3. 項(xiàng)目結(jié)構(gòu)

nodejs-websocket-demo/
│
├── public/
│   ├── index.html
│   └── client.js
├── server.js
└── package.json

4. 詳細(xì)實(shí)現(xiàn)

4.1 WebSocket服務(wù)器 (server.js)

const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const { v4: uuidv4 } = require('uuid');
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
// 存儲客戶端連接
const clients = new Map();
// 靜態(tài)文件服務(wù)
app.use(express.static('public'));
// WebSocket連接處理
wss.on('connection', (ws) => {
  // 為每個(gè)客戶端分配唯一ID
  const clientId = uuidv4();
  // 存儲客戶端連接
  clients.set(clientId, ws);
  // 發(fā)送客戶端ID
  ws.send(JSON.stringify({
    type: 'connection',
    clientId: clientId
  }));
  // 廣播新用戶連接
  broadcast({
    type: 'userJoined',
    clientId: clientId,
    message: `用戶 ${clientId} 已加入聊天`
  }, clientId);
  // 消息處理
  ws.on('message', (message) => {
    try {
      const parsedMessage = JSON.parse(message);
      switch(parsedMessage.type) {
        case 'chat':
          handleChatMessage(clientId, parsedMessage);
          break;
        case 'typing':
          handleTypingNotification(clientId, parsedMessage);
          break;
        default:
          console.log('未知消息類型:', parsedMessage.type);
      }
    } catch (error) {
      console.error('消息解析錯(cuò)誤:', error);
    }
  });
  // 連接關(guān)閉處理
  ws.on('close', () => {
    // 移除客戶端
    clients.delete(clientId);
    // 廣播用戶離開
    broadcast({
      type: 'userLeft',
      clientId: clientId,
      message: `用戶 ${clientId} 已離開聊天`
    }, clientId);
  });
});
// 聊天消息處理
function handleChatMessage(senderId, message) {
  broadcast({
    type: 'chat',
    clientId: senderId,
    message: message.message
  }, senderId);
}
// 輸入狀態(tài)通知
function handleTypingNotification(senderId, message) {
  broadcast({
    type: 'typing',
    clientId: senderId,
    isTyping: message.isTyping
  }, senderId);
}
// 廣播消息
function broadcast(message, excludeClientId = null) {
  clients.forEach((client, clientId) => {
    if (client.readyState === WebSocket.OPEN && clientId !== excludeClientId) {
      client.send(JSON.stringify(message));
    }
  });
}
// 服務(wù)器啟動
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`WebSocket服務(wù)器運(yùn)行在 ${PORT} 端口`);
});

4.2 客戶端HTML (public/index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>WebSocket聊天室</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            max-width: 600px; 
            margin: 0 auto; 
            padding: 20px; 
        }
        #chat-messages {
            height: 300px;
            overflow-y: scroll;
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="chat-messages"></div>
    <input type="text" id="message-input" placeholder="輸入消息">
    <button id="send-btn">發(fā)送</button>
    <script src="client.js"></script>
</body>
</html>

4.3 客戶端JavaScript (public/client.js)

const socket = new WebSocket('ws://localhost:3000');
let clientId = null;
const chatMessages = document.getElementById('chat-messages');
const messageInput = document.getElementById('message-input');
const sendBtn = document.getElementById('send-btn');
// WebSocket事件處理
socket.addEventListener('open', (event) => {
  appendMessage('系統(tǒng)', '連接成功');
});
socket.addEventListener('message', (event) => {
  const message = JSON.parse(event.data);
  switch(message.type) {
    case 'connection':
      clientId = message.clientId;
      appendMessage('系統(tǒng)', `您的ID是: ${clientId}`);
      break;
    case 'chat':
      appendMessage(message.clientId, message.message);
      break;
    case 'userJoined':
    case 'userLeft':
      appendMessage('系統(tǒng)', message.message);
      break;
    case 'typing':
      handleTypingNotification(message);
      break;
  }
});
socket.addEventListener('close', (event) => {
  appendMessage('系統(tǒng)', '連接已關(guān)閉');
});
// 發(fā)送消息
sendBtn.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    sendMessage();
  }
});
function sendMessage() {
  const message = messageInput.value.trim();
  if (message) {
    socket.send(JSON.stringify({
      type: 'chat',
      message: message
    }));
    appendMessage(clientId, message);
    messageInput.value = '';
  }
}
// 消息追加到聊天窗口
function appendMessage(sender, text) {
  const messageEl = document.createElement('div');
  messageEl.innerHTML = `<strong>${sender}:</strong> ${text}`;
  chatMessages.appendChild(messageEl);
  chatMessages.scrollTop = chatMessages.scrollHeight;
}
// 處理打字狀態(tài)通知
function handleTypingNotification(message) {
  // 可以在這里實(shí)現(xiàn)打字狀態(tài)提示
}

5. 運(yùn)行項(xiàng)目

# 啟動服務(wù)器
node server.js
# 訪問 http://localhost:3000

6. 功能特點(diǎn)

實(shí)時(shí)雙向通信
唯一客戶端標(biāo)識
廣播消息機(jī)制
連接/斷開事件處理
聊天消息和系統(tǒng)通知

7. 性能與擴(kuò)展建議

生產(chǎn)環(huán)境考慮使用Redis等外部存儲管理WebSocket連接
增加身份驗(yàn)證機(jī)制
實(shí)現(xiàn)消息持久化
使用負(fù)載均衡

8. 安全注意事項(xiàng)

使用WSS（WebSocket Secure）
實(shí)現(xiàn)連接速率限制
驗(yàn)證和過濾消息內(nèi)容
防止跨站W(wǎng)ebSocket劫持

到此這篇關(guān)于Node.js實(shí)現(xiàn)WebSocket的詳細(xì)教程的文章就介紹到這了,更多相關(guān)node.js websocket實(shí)現(xiàn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: