Next.js WebSocket集成[编辑 | 编辑源代码]

介绍[编辑 | 编辑源代码]

WebSocket是一种在单个TCP连接上提供全双工通信的协议，允许客户端和服务器之间进行实时数据交换。在Next.js中集成WebSocket可以用于构建实时应用，如聊天应用、实时通知系统或股票行情展示等。本章将详细介绍如何在Next.js应用中实现WebSocket集成，涵盖从基础到高级的概念。

WebSocket基础[编辑 | 编辑源代码]

WebSocket协议（RFC 6455）通过HTTP/HTTPS握手建立连接，之后升级为WebSocket连接。与传统的HTTP请求不同，WebSocket连接一旦建立，客户端和服务器可以随时互相发送数据，无需重复握手。

WebSocket生命周期[编辑 | 编辑源代码]

在Next.js中集成WebSocket[编辑 | 编辑源代码]

Next.js支持在客户端和服务器端（如API路由）使用WebSocket。以下是两种常见场景的实现方法。

客户端WebSocket集成[编辑 | 编辑源代码]

在客户端组件中，可以直接使用浏览器的WebSocket API：

import { useEffect, useState } from 'react';

export default function WebSocketClient() {
    const [messages, setMessages] = useState([]);
    const [input, setInput] = useState('');

    useEffect(() => {
        // 创建WebSocket连接
        const socket = new WebSocket('ws://localhost:3000/api/socket');

        // 监听消息
        socket.addEventListener('message', (event) => {
            setMessages(prev => [...prev, event.data]);
        });

        // 清理函数
        return () => {
            socket.close();
        };
    }, []);

    const sendMessage = () => {
        if (socket.readyState === WebSocket.OPEN) {
            socket.send(input);
            setInput('');
        }
    };

    return (
        <div>
            <h2>实时消息</h2>
            <ul>
                {messages.map((msg, index) => (
                    <li key={index}>{msg}</li>
                ))}
            </ul>
            <input 
                type="text" 
                value={input} 
                onChange={(e) => setInput(e.target.value)} 
            />
            <button onClick={sendMessage}>发送</button>
        </div>
    );
}

服务器端WebSocket集成[编辑 | 编辑源代码]

在Next.js API路由中，可以使用`ws`库实现WebSocket服务器：

// pages/api/socket.js
import { WebSocketServer } from 'ws';

// 保持WebSocket服务器实例的引用
let wss;

export default function handler(req, res) {
    if (!wss) {
        // 创建WebSocket服务器
        wss = new WebSocketServer({ noServer: true });

        // 监听连接
        wss.on('connection', (ws) => {
            console.log('客户端已连接');

            // 监听消息
            ws.on('message', (message) => {
                console.log('收到消息:', message.toString());
                // 广播消息给所有客户端
                wss.clients.forEach(client => {
                    if (client.readyState === WebSocket.OPEN) {
                        client.send(message.toString());
                    }
                });
            });

            // 监听关闭
            ws.on('close', () => {
                console.log('客户端已断开');
            });
        });

        // 将HTTP服务器升级为WebSocket
        if (req.socket.server) {
            req.socket.server.on('upgrade', (request, socket, head) => {
                wss.handleUpgrade(request, socket, head, (ws) => {
                    wss.emit('connection', ws, request);
                });
            });
        }
    }

    res.status(200).end();
}

实际应用案例[编辑 | 编辑源代码]

实时聊天应用[编辑 | 编辑源代码]

使用上述代码可以构建一个简单的聊天应用： 1. 用户A发送消息 → 服务器接收 → 广播给所有用户 2. 用户B和用户C实时看到用户A的消息

实时数据仪表盘[编辑 | 编辑源代码]

WebSocket适用于需要实时更新的数据展示： 1. 服务器每5秒推送一次最新数据（如股票价格） 2. 客户端自动更新UI，无需手动刷新

高级主题[编辑 | 编辑源代码]

连接状态管理[编辑 | 编辑源代码]

WebSocket连接可能因网络问题中断，需要实现重连机制：

const [socket, setSocket] = useState(null);
const [isConnected, setIsConnected] = useState(false);

useEffect(() => {
    const connect = () => {
        const ws = new WebSocket('ws://localhost:3000/api/socket');
        
        ws.onopen = () => {
            setIsConnected(true);
            setSocket(ws);
        };

        ws.onclose = () => {
            setIsConnected(false);
            setTimeout(connect, 5000); // 5秒后重连
        };
    };

    connect();

    return () => {
        if (socket) socket.close();
    };
}, []);