基于 SpringBoot、Vue 与 Netty 的 WebRTC 视频聊天实战

Netty 是核心，负责网络通信；FastJSON 用于处理前后端传输的 JSON 格式信令。

核心实体类与消息处理器

首先定义消息实体类 Message.java，包含消息类型、发送方 ID、接收方 ID 及内容：

public class Message {
    // 消息类型：register(注册)、call(呼叫)、answer(应答)、ice(ICE 候选)
    private String type;
    // 发送方 ID
    private String from;
    // 接收方 ID
    private String to;
    // 消息内容（SDP/ICE 数据）
    private String data;
    // Getters and Setters...
}

接着创建 Netty WebSocket 处理器，这是服务端的核心逻辑，负责处理连接建立、消息接收与转发：

import com.alibaba.fastjson.JSON;
import com.example.websocket.entity.Message;
import io.netty.channel.Channel;
import io.netty.channel.ChannelHandler;
import io.netty.channel.ChannelHandlerContext;
import io.netty.channel.SimpleChannelInboundHandler;
import io.netty.handler.codec.http.websocketx.TextWebSocketFrame;
import org.springframework.context.annotation.Configuration;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

@Configuration
@ChannelHandler.Sharable
public class WebSocketHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {
    // 存储用户 ID 与 Channel 的映射（线程安全）
    public static final ConcurrentHashMap<String, Channel> USER_CHANNEL_MAP = new ConcurrentHashMap<>();

    @Override
    public void channelActive(ChannelHandlerContext ctx) throws Exception {
        System.out.println("与客户端建立连接，通道开启！");
    }

    @Override
    protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception {
        String text = msg.text();
        Message message = JSON.parseObject(text, Message.class);
        System.out.println("收到消息：" + text);

        switch (message.getType()) {
            case "register":
                USER_CHANNEL_MAP.put(message.getFrom(), ctx.channel());
                System.out.println("用户 " + message.getFrom() + " 注册成功");
                break;
            case "call":
            case "answer":
            case "ice":
                Channel targetChannel = USER_CHANNEL_MAP.get(message.getTo());
                if (targetChannel != null && targetChannel.isActive()) {
                    targetChannel.writeAndFlush(new TextWebSocketFrame(text));
                    System.out.println("转发消息到用户 " + message.getTo());
                } else {
                    System.out.println("用户 " + message.getTo() + " 不在线");
                }
                break;
            default:
                System.out.println("未知消息类型：" + message.getType());
        }
    }

    @Override
    public void channelInactive(ChannelHandlerContext ctx) throws Exception {
        System.out.println("与客户端断开连接，通道关闭！");
    }

    @Override
    public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception {
        System.out.println("连接异常：" + cause.getMessage());
        USER_CHANNEL_MAP.entrySet().removeIf(entry -> entry.getValue() == ctx.channel());
        ctx.close();
    }
}

Netty 服务启动与 SpringBoot 集成

需要在 SpringBoot 项目启动时自动启动 Netty 的 WebSocket 服务，监听指定端口（8081）。

import io.netty.bootstrap.ServerBootstrap;
import io.netty.channel.ChannelFuture;
import io.netty.channel.ChannelInitializer;
import io.netty.channel.ChannelOption;
import io.netty.channel.EventLoopGroup;
import io.netty.channel.nio.NioEventLoopGroup;
import io.netty.channel.socket.SocketChannel;
import io.netty.channel.socket.nio.NioServerSocketChannel;
import io.netty.handler.codec.http.HttpObjectAggregator;
import io.netty.handler.codec.http.HttpServerCodec;
import io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;
import io.netty.handler.stream.ChunkedWriteHandler;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;

@Configuration
public class NettyWebSocketServer {
    @Autowired
    private WebSocketHandler coordinationSocketHandler;

    public void start() throws Exception {
        EventLoopGroup bossGroup = new NioEventLoopGroup();
        EventLoopGroup group = new NioEventLoopGroup();
        try {
            ServerBootstrap sb = new ServerBootstrap();
            sb.option(ChannelOption.SO_BACKLOG, 1024);
            sb.group(group, bossGroup)
                    .channel(NioServerSocketChannel.class)
                    .localAddress(8004)
                    .childHandler(new ChannelInitializer<SocketChannel>() {
                        @Override
                        protected void initChannel(SocketChannel ch) throws Exception {
                            ch.pipeline().addLast(new HttpServerCodec());
                            ch.pipeline().addLast(new ChunkedWriteHandler());
                            ch.pipeline().addLast(new HttpObjectAggregator(8192));
                            ch.pipeline().addLast(new WebSocketServerProtocolHandler("/ws", "WebSocket", true, 65536 * 10));
                            ch.pipeline().addLast(coordinationSocketHandler);
                        }
                    });
            ChannelFuture cf = sb.bind().sync();
            cf.channel().closeFuture().sync();
        } finally {
            group.shutdownGracefully().sync();
            bossGroup.shutdownGracefully().sync();
        }
    }
}

在 SpringBoot 主启动类中，利用 CommandLineRunner 确保 Netty 服务随应用启动：

import com.example.websocket.NettyWebSocketServer;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.example.websocket.dao")
public class Application implements CommandLineRunner {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

    @Autowired
    private NettyWebSocketServer nettyServer;

    @Override
    public void run(String... args) throws Exception {
        nettyServer.start();
    }
}

这里使用了 bossGroup 负责接收连接，workerGroup 负责处理读写，是 Netty 高性能的核心。通道处理器链按顺序添加，WebSocket 基于 HTTP 握手，所以先添加 HTTP 相关处理器，最后添加自定义处理器。

前端开发

模板结构

使用 Vue 构建界面，包含用户 ID 输入、呼叫区域和视频展示区域。

<template>
  <div class="container">
    <h2>WebRTC 视频聊天</h2>
    <!-- 1. 用户 ID 输入与连接服务器区域 -->
    <div class="input-group">
      <input v-model="userId" placeholder="输入你的用户 ID（如 user1）" type="text" />
      <button @click="connect">连接服务器</button>
    </div>
    <!-- 2. 呼叫功能区域（仅连接成功后显示） -->
    <div v-if="socketConnected">
      <input v-model="targetUserId" placeholder="输入对方用户 ID（如 user2）" type="text" />
      <button @click="call">发起视频呼叫</button>
    </div>
    <!-- 3. 挂断按钮 -->
    <div v-if="socketConnected && remoteVideo?.srcObject">
      <button @click="hangUp">挂断通话</button>
    </div>
    <!-- 4. 视频展示区域 -->
    <div class="video-container">
      <div class="video-item">
        <p>本地视频</p>
        <video ref="localVideo" autoplay muted></video>
      </div>
      <div class="video-item">
        <p>远程视频</p>
        <video ref="remoteVideo" autoplay></video>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 900px;
  margin: 20px auto;
  text-align: center;
  font-family: "Microsoft YaHei", sans-serif;
}
.input-group { margin: 25px 0; }
input { padding: 10px 15px; width: 220px; margin-right: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
button { padding: 10px 20px; background: #42b983; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
button:hover { background: #359469; }
.video-container { display: flex; justify-content: center; gap: 30px; margin-top: 30px; }
.video-item p { margin-bottom: 8px; font-size: 16px; color: #333; }
video { width: 400px; height: 300px; border: 1px solid #ccc; border-radius: 8px; background-color: #f5f5f5; }
</style>

核心交互逻辑

采用 Vue 3 的 <script setup> 语法糖编写逻辑。

<script setup>
import { ref, onUnmounted } from 'vue';

// 1. 定义响应式变量
const userId = ref('');
const targetUserId = ref('');
const socketConnected = ref(false);
const localVideo = ref(null);
const remoteVideo = ref(null);

// 2. 定义非响应式全局变量
let socket = null;
let peerConnection = null;
let localStream = null;

// 3. 配置 STUN 服务器
const iceServers = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'stun:stun.qq.com:3478' },
    { urls: 'stun:stun.aliyun.com:3478' }
  ]
};

// 4. 连接 WebSocket 函数
const connect = () => {
  if (!userId.value.trim()) {
    alert('请输入你的用户 ID！');
    return;
  }
  socket = new WebSocket(`ws://localhost:8081/ws`);

  socket.onopen = () => {
    console.log('✅ WebSocket 连接成功');
    socketConnected.value = true;
    sendMessage({ type: 'register', from: userId.value, to: '', data: '' });
  };

  socket.onmessage = (e) => {
    try {
      const message = JSON.parse(e.data);
      handleMessage(message);
    } catch (err) {
      console.error('❌ 消息解析失败：', err);
    }
  };

  socket.onclose = () => {
    console.log('❌ WebSocket 连接关闭');
    socketConnected.value = false;
  };

  socket.onerror = (err) => {
    console.error('❌ WebSocket 连接错误：', err);
    socketConnected.value = false;
    alert('连接服务器失败！请检查服务端是否启动。');
  };
};

// 5. 通用发送函数
const sendMessage = (message) => {
  if (socket && socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify(message));
  } else {
    alert('未连接服务器，请先点击'连接服务器'！');
  }
};

// 6. 消息处理函数
const handleMessage = async (message) => {
  switch (message.type) {
    case 'call':
      await answerCall(message);
      break;
    case 'answer':
      await setRemoteSDP(message.data);
      break;
    case 'ice':
      await addIceCandidate(message.data);
      break;
  }
};

// 7. 初始化 PeerConnection
const initPeerConnection = async () => {
  if (peerConnection) peerConnection.close();
  peerConnection = new RTCPeerConnection(iceServers);

  peerConnection.onicecandidate = (e) => {
    if (e.candidate) {
      sendMessage({ type: 'ice', from: userId.value, to: targetUserId.value, data: JSON.stringify(e.candidate) });
    }
  };

  peerConnection.ontrack = (e) => {
    remoteVideo.value.srcObject = e.streams[0];
    console.log('🎥 收到远程音视频流');
  };
};

// 8. 发起呼叫
const call = async () => {
  if (!targetUserId.value.trim()) { alert('请输入对方用户 ID！'); return; }
  try {
    await initPeerConnection();
    localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    localVideo.value.srcObject = localStream;
    localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    sendMessage({ type: 'call', from: userId.value, to: targetUserId.value, data: JSON.stringify(offer) });
  } catch (err) {
    console.error('❌ 发起呼叫失败：', err);
  }
};

// 9. 应答呼叫
const answerCall = async (message) => {
  targetUserId.value = message.from;
  try {
    await initPeerConnection();
    localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    localVideo.value.srcObject = localStream;
    localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

    await peerConnection.setRemoteDescription(JSON.parse(message.data));
    const answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answer);
    sendMessage({ type: 'answer', from: userId.value, to: targetUserId.value, data: JSON.stringify(answer) });
  } catch (err) {
    console.error('❌ 应答呼叫失败：', err);
  }
};

// 10. 设置远程 SDP
const setRemoteSDP = async (sdpStr) => {
  try {
    const sdp = JSON.parse(sdpStr);
    await peerConnection.setRemoteDescription(new RTCSessionDescription(sdp));
  } catch (err) {
    console.error('❌ 设置远程 SDP 失败：', err);
  }
};

// 11. 添加 ICE 候选
const addIceCandidate = async (iceStr) => {
  try {
    const ice = JSON.parse(iceStr);
    await peerConnection.addIceCandidate(new RTCIceCandidate(ice));
  } catch (err) {
    console.error('❌ 添加 ICE 候选失败：', err);
  }
};

// 12. 挂断通话
const hangUp = () => {
  if (localStream) {
    localStream.getTracks().forEach(track => track.stop());
    localVideo.value.srcObject = null;
  }
  if (remoteVideo.value) remoteVideo.value.srcObject = null;
  if (peerConnection) { peerConnection.close(); peerConnection = null; }
  targetUserId.value = '';
  console.log('📞 挂断通话');
};

// 13. 资源清理
onUnmounted(() => {
  if (socket) socket.close();
  if (peerConnection) peerConnection.close();
  if (localStream) localStream.getTracks().forEach(track => track.stop());
});
</script>

这里重点在于 getUserMedia 获取权限，以及 PeerConnection 的协商过程。ontrack 事件触发时将远程流绑定到 DOM 即可显示画面。页面销毁时务必停止本地流，否则摄像头会被占用。

通过以上步骤，我们就完成了一个基于 SpringBoot、Vue 和 Netty 的完整 WebRTC 视频聊天系统。实际项目中，还可以增加 TURN 服务器以解决更复杂的 NAT 穿透问题，或引入数据库持久化聊天记录。