# 新建文件夾，初始化
npm init -y
# 安裝ws包
npm install ws

const WebSocket = require('ws');
// 創(chuàng)建WebSocket服務(wù)，監(jiān)聽8080端口
const wss = new WebSocket.Server({ port: 8080 });

console.log('? Node.js WebSocket服務(wù)啟動成功，監(jiān)聽端口：8080');

// 監(jiān)聽「客戶端連接」事件：有客戶端連上來就觸發(fā)
wss.on('connection', (ws) => {
  console.log('?? 有一個(gè)客戶端成功連接');

  // 監(jiān)聽「客戶端發(fā)送的消息」事件：接收客戶端消息
  ws.on('message', (msg) => {
    console.log('?? 收到客戶端消息：', msg.toString());
    // 服務(wù)端主動給「當(dāng)前連接的客戶端」發(fā)消息
    ws.send(`我收到你的消息啦：${msg.toString()}`);
    
    // 【進(jìn)階】廣播消息：給「所有連接的客戶端」發(fā)消息（比如群聊）
    wss.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`廣播：有客戶端說：${msg.toString()}`);
      }
    });
  });

  // 監(jiān)聽「客戶端斷開連接」事件
  ws.on('close', () => {
    console.log('?? 客戶端斷開連接');
  });

  // 監(jiān)聽「連接錯(cuò)誤」事件
  ws.on('error', (err) => {
    console.error('? 連接異常：', err);
  });
});

node server.js

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket // 開啟WebSocket支持
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        // 配置WebSocket地址：ws://localhost:8080/ws
        registry.addHandler(new MyWebSocketHandler(), "/ws")
                .setAllowedOrigins("*"); // 允許所有跨域（生產(chǎn)環(huán)境可指定域名）
    }
}

import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

public class MyWebSocketHandler extends TextWebSocketHandler {
    // 存儲所有連接的客戶端
    private static final CopyOnWriteArraySet<WebSocketSession> sessions = new CopyOnWriteArraySet<>();

    // 連接成功觸發(fā)
    @Override
    public void afterConnectionEstablished(WebSocketSession session) {
        sessions.add(session);
        System.out.println("? 客戶端連接成功，當(dāng)前在線數(shù)：" + sessions.size());
    }

    // 接收客戶端消息觸發(fā)
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {
        String msg = message.getPayload();
        System.out.println("?? 收到客戶端消息：" + msg);
        // 服務(wù)端給客戶端發(fā)消息
        session.sendMessage(new TextMessage("服務(wù)端已收到：" + msg));
    }

    // 連接關(guān)閉觸發(fā)
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
        sessions.remove(session);
        System.out.println("? 客戶端斷開連接，當(dāng)前在線數(shù)：" + sessions.size());
    }
}

from fastapi import FastAPI, WebSocket
from fastapi.responses import HTMLResponse

app = FastAPI()

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept() # 接受客戶端連接
    print("? 客戶端連接成功")
    while True:
        data = await websocket.receive_text() # 接收客戶端消息
        print(f"?? 收到消息：{data}")
        await websocket.send_text(f"服務(wù)端已收到：{data}") # 發(fā)送消息給客戶端

let ws = null;
let heartBeatTimer = null; // 心跳定時(shí)器
let reconnectTimer = null; // 重連定時(shí)器
const wsUrl = 'ws://localhost:8080';
const heartBeatInterval = 10000; // 心跳間隔：10秒
const reconnectInterval = 3000; // 重連間隔：3秒

// 初始化WebSocket連接
function initWebSocket() {
  ws = new WebSocket(wsUrl);
  
  ws.onopen = function () {
    console.log('? 連接成功');
    startHeartBeat(); // 連接成功，啟動心跳
    ws.send('連接成功，請求登錄');
  };

  ws.onmessage = function (event) {
    const msg = event.data;
    console.log('?? 收到消息：', msg);
    // 收到服務(wù)端的pong，說明心跳正常，無需處理，重置定時(shí)器即可
    if (msg === 'pong') return;
    // 業(yè)務(wù)消息處理...
  };

  ws.onclose = function () {
    console.log('? 連接關(guān)閉，準(zhǔn)備重連');
    stopHeartBeat(); // 關(guān)閉心跳
    startReconnect(); // 啟動重連
  };

  ws.onerror = function () {
    console.error('? 連接異常');
    stopHeartBeat();
    startReconnect();
  };
}

// 啟動心跳：定時(shí)發(fā)送ping
function startHeartBeat() {
  heartBeatTimer = setInterval(() => {
    if (ws.readyState === 1) {
      ws.send('ping'); // 發(fā)送心跳包
    } else {
      stopHeartBeat();
    }
  }, heartBeatInterval);
}

// 停止心跳
function stopHeartBeat() {
  clearInterval(heartBeatTimer);
  heartBeatTimer = null;
}

// 啟動重連：失敗后每隔3秒重試一次
function startReconnect() {
  if (reconnectTimer) return; // 避免重復(fù)創(chuàng)建定時(shí)器
  reconnectTimer = setInterval(() => {
    console.log('?? 嘗試重連...');
    initWebSocket();
    // 重連成功后，清除重連定時(shí)器
    if (ws.readyState === 1) {
      clearInterval(reconnectTimer);
      reconnectTimer = null;
    }
  }, reconnectInterval);
}

// 頁面加載時(shí)初始化
window.onload = initWebSocket;
// 頁面關(guān)閉時(shí)銷毀
window.onunload = function () {
  ws.close();
  stopHeartBeat();
  clearInterval(reconnectTimer);
};