使用 WebRTC 在 Next.js 应用程序中实现实时协作功能

了解如何在 Next.js 中使用 WebRTC 构建实时协作应用程序。通过实时更新实现无缝交互！

为什么要进行实时协作？

想象一下，在类似 Google 文档的体验中，多个用户可以对同一内容进行实时交互——编辑、更新或头脑风暴。这种协作水平可以将您的 Next.js 应用程序的交互性和参与度提升到一个新的高度。

WebRTC（网络实时通信）是实时视频通话、屏幕共享和协作体验背后的神奇力量。它速度快、点对点，在现代浏览器中运行良好。有了 Next.js，您就可以提供最先进的协作功能。

第 1 步：了解 WebRTC 基础知识

WebRTC 的核心是一个浏览器 API，允许点对点连接进行实时通信。可以将其用于：

共享数据（文本、文件等）
流媒体（音频/视频）
实时同步应用程序状态

在我们的示例中，我们将创建一个共享画板，让用户可以实时一起绘图。

第 2 步：设置 Next.js 应用

首先，搭建一个新的 Next.js 应用：

npx create-next-app@latest collaborative-board  
cd collaborative-board  
npm install

添加 WebRTC 信令和状态管理的依赖项：

npm install socket.io-client react-use

第 3 步：创建 WebRTC 信令服务器

WebRTC 需要一个信令服务器来交换连接元数据（如 ICE 候选者和 SDP）。这里使用 Node.js 和 socket.io 创建一个。

创建文件 server.js：

const { Server } = require('socket.io');  
const http = require('http');  

const server = http.createServer();  
const io = new Server(server, { cors: { origin: '*' } });  

io.on('connection', (socket) => {  
  console.log('User connected:', socket.id);  

  // 处理信令数据 
  socket.on('signal', (data) => {  
    const { target, payload } = data;  
    io.to(target).emit('signal', { source: socket.id, payload });  
  });  

  // 加入房间
  socket.on('join', (room) => {  
    socket.join(room);  
    console.log(`${socket.id} joined room ${room}`);  
  });  

  socket.on('disconnect', () => {  
    console.log('User disconnected:', socket.id);  
  });  
});  

server.listen(3001, () => console.log('Signaling server running on port 3001'));

使用以下命令运行信令服务器：

node server.js

第 4 步：在 Next.js 中集成 WebRTC

设置客户端

在 Next.js 应用中，创建一个pages/collaborate.js文件。

安装socket.io-client：

npm install socket.io-client

添加 WebRTC 逻辑：

import { useEffect, useRef, useState } from 'react';  
import io from 'socket.io-client';  

const Collaborate = () => {  
  const [socket, setSocket] = useState(null);  
  const peers = useRef({});  
  const canvasRef = useRef(null);  

  useEffect(() => {  
    const socketInstance = io('http://localhost:3001');  
    setSocket(socketInstance);  

    socketInstance.emit('join', 'collab-room');  

    socketInstance.on('signal', async ({ source, payload }) => {  
      const peer = peers.current[source] || new RTCPeerConnection();  

      peer.onicecandidate = (e) => {  
        if (e.candidate) {  
          socketInstance.emit('signal', {  
            target: source,  
            payload: { type: 'candidate', candidate: e.candidate },  
          });  
        }  
      };  

      peer.ondatachannel = (e) => {  
        const channel = e.channel;  
        channel.onmessage = (msg) => handleIncomingData(msg.data);  
      };  

      if (payload.type === 'offer') {  
        await peer.setRemoteDescription(payload);  
        const answer = await peer.createAnswer();  
        await peer.setLocalDescription(answer);  
        socketInstance.emit('signal', { target: source, payload: answer });  
      } else if (payload.type === 'candidate') {  
        peer.addIceCandidate(payload.candidate);  
      }  

      peers.current[source] = peer;  
    });  
  }, []);  

  const handleIncomingData = (data) => {  
    const canvas = canvasRef.current;  
    const ctx = canvas.getContext('2d');  
    const { x, y } = JSON.parse(data);  
    ctx.fillRect(x, y, 2, 2);  
  };  

  const sendData = (x, y) => {  
    const payload = JSON.stringify({ x, y });  
    Object.values(peers.current).forEach((peer) => {  
      const channel = peer.createDataChannel('collab');  
      channel.send(payload);  
    });  
  };  

  return (  
    <canvas  
      ref={canvasRef}  
      width={800}  
      height={600}  
      style={{ border: '1px solid black' }}  
      onMouseMove={(e) => {  
        if (e.buttons === 1) {  
          sendData(e.nativeEvent.offsetX, e.nativeEvent.offsetY);  
        }  
      }}  
    />  
  );  
};  

export default Collaborate;