SpringBoot+Vue+Netty+WebSocket+WebRTC 视频聊天实现

• 核心作用：帮助处于 NAT 后的设备获取自己的公网 IP 和端口，是网络地址翻译的探测器。
• 关键功能：
  • 客户端向 STUN 服务器发送请求，服务器会返回该客户端在公网中的可见 IP 和端口。
  • 这个公网地址会通过信令服务器转发给对方，让双方知道如何找到彼此。
  • 解决了大多数家庭 / 企业网络下，设备无法直接被外部访问的问题。

4. 信令（A 信令 / B 信令）

• 核心作用：携带通话所需的控制信息和网络信息，是双方沟通的语言。
• 包含内容：
  • 通话发起、应答、挂断等控制指令。
  • 从 STUN 服务器获取的公网 IP + 端口。
  • WebRTC 协商所需的 SDP（会话描述协议）和 ICE（交互式连接建立）候选地址。
• 传递方式：通过 WebSocket 连接，由 Spring Boot 服务端转发给对方。

3. 完整通话流程

1. 初始化连接：客户端 A 和 B 分别通过 WebSocket 与 Spring Boot 服务端建立长连接。
2. 获取公网地址：A 和 B 各自向 STUN 服务器请求，得到自己的公网 IP + 端口。
3. 信令交换：A 发起通话请求，携带自己的公网信息和 SDP，通过 WebSocket 发送给服务端；服务端转发给 B；B 应答并返回自己的信息，再由服务端转发给 A。
4. P2P 连接建立：A 和 B 根据收到的对方信息，通过 WebRTC 建立直接的 P2P 连接。
5. 音视频传输：连接建立后，WebRTC 接管音视频传输，双方开始实时通话。
6. 通话结束：任意一方发起挂断信令，服务端转发后，双方关闭 P2P 连接和 WebSocket 连接。

三、前后端实现细节

1. 核心原理

核心原理：

核心流程图示：

1. 客户端 A → WebSocket 连接 → Netty 服务端（注册）
2. 客户端 B → WebSocket 连接 → Netty 服务端（注册）
3. 客户端 A 发起呼叫 → 信令（含 SDP 提议）→ 服务端转发 → 客户端 B
4. 客户端 B 应答 → 信令（含 SDP 应答）→ 服务端转发 → 客户端 A
5. 双方交换 ICE 候选（网络地址）→ 建立 WebRTC P2P 连接 → 实时音视频传输

• 信令交换：相当于敲门 + 协商——告诉对方我要和你视频、我这边的音视频参数是什么、我的网络地址是什么，由 WebSocket+Netty 负责
• 端到端音视频传输：协商完成后，直接在两个客户端之间传输音视频数据，不经过服务端中转（P2P），由 WebRTC 负责

2. 服务端开发：项目搭建

<!-- SpringBoot 核心 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter</artifactId>
</dependency>
<!-- Netty WebSocket 依赖 -->
<dependency>
    <groupId>io.netty</groupId>
    <artifactId>netty-all</artifactId>
    <version>4.1.94.Final</version>
</dependency>
<!-- JSON 解析 -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>2.0.25</version>
</dependency>

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

3. 服务端开发：核心逻辑

1. 创建消息实体类 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;
}

2. 创建 Netty WebSocket 处理器

处理 WebSocket 连接的建立、消息接收与转发、连接断开等事件，是服务端的核心逻辑。

package com.qcby.schoolai.commun;
import com.alibaba.fastjson.JSON;
import com.qcby.schoolai.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 io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;
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 {
        // 解析 JSON 消息
        String text = msg.text();
        Message message = JSON.parseObject(text, Message.class);
        System.out.println("收到消息：" + text);
        switch (message.getType()) {
            case "register":
                // 注册用户 ID 与 Channel 的映射
                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();
    }
}

4. 服务端启动配置

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

package com.qcby.schoolai.commun;
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();
        }
    }
}

import com.qcby.springboot.commun.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.qcby.springboot.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();
    }
}

5. 前端开发

1. 模板编写

<template>
    <div>
        <h2>WebRTC 视频聊天</h2>
        <!-- 1. 用户 ID 输入与连接服务器区域 -->
        <div>
            <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>
            <div>
                <p>本地视频</p>
                <!-- muted：本地视频静音，避免回声；autoplay：自动播放 -->
                <video ref="localVideo" autoplay muted></video>
            </div>
            <div>
                <p>远程视频</p>
                <video ref="remoteVideo" autoplay></video>
            </div>
        </div>
        <!-- 挂断按钮（仅连接成功且有远程流时显示） -->
        <div v-if="socketConnected && remoteVideo?.srcObject">
            <button @click="hangUp">挂断通话</button>
        </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 {
    text-align: center;
}
.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>
<script setup>
// 1. 导入 Vue 内置的响应式变量和生命周期钩子
import { ref, onUnmounted } from 'vue';

// 2. 定义响应式变量（页面上用到的动态数据）
const userId = ref('');
const targetUserId = ref('');
const socketConnected = ref(false);
const inCall = ref(false);

// 3. 定义视频 DOM 引用（用于绑定音视频流）
const localVideo = ref(null);
const remoteVideo = ref(null);

// 4. 定义非响应式全局变量（仅脚本内使用，无需页面响应）
let socket = null;
let peerConnection = null;
let localStream = null;

// 5. 配置 STUN 服务器（WebRTC 必需，用于获取公网 ICE 候选）
const iceServers = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        { urls: 'stun:stun.qq.com:3478' },
        { urls: 'stun:stun.aliyun.com:3478' }
    ]
};

// 6. 连接 WebSocket 服务器函数
const connect = () => {
    if (!userId.value.trim()) {
        alert('请输入你的用户 ID！（不能为空/仅空格）');
        return;
    }
    socket = new WebSocket(`ws://localhost:8004/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);
            console.log('收到服务端消息：', message);
            handleMessage(message);
        } catch (err) {
            console.error('消息解析失败：', err);
        }
    };

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

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

// 7. 通用发送 WebSocket 消息函数
const sendMessage = (message) => {
    if (socket && socket.readyState === WebSocket.OPEN) {
        socket.send(JSON.stringify(message));
        console.log('发送消息：', message);
    } else {
        console.error('WebSocket 未连接，无法发送消息');
        alert('未连接服务器，请先点击'连接服务器'！');
    }
};

// 8. 处理收到的信令消息
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;
        default:
            console.log('未知消息类型：', message.type);
    }
};

// 9. 初始化 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('收到远程音视频流');
    };
};

// 10. 发起视频呼叫函数
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) });
        inCall.value = true;
        console.log('发起视频呼叫：', targetUserId.value);
    } catch (err) {
        console.error('发起呼叫失败：', err);
        alert('发起呼叫失败！请检查摄像头/麦克风权限，或是否已连接服务器。');
    }
};

// 11. 应答呼叫请求函数
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) });
        inCall.value = true;
        console.log('应答视频呼叫：', targetUserId.value);
    } catch (err) {
        console.error('应答呼叫失败：', err);
        alert('应答呼叫失败！');
    }
};

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

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

// 14. 页面销毁时清理资源
onUnmounted(() => {
    if (socket) {
        socket.close();
        console.log('关闭 WebSocket 连接');
    }
    if (peerConnection) {
        peerConnection.close();
        console.log('关闭 PeerConnection');
    }
    if (localStream) {
        localStream.getTracks().forEach(track => {
            track.stop();
            console.log('停止本地音视频流');
        });
    }
    inCall.value = false;
});

// 15. 挂断通话函数
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 = '';
    inCall.value = false;
    console.log('挂断通话');
    alert('已挂断通话！');
};
</script>

6. 挂断功能实现

在 video-container 上方添加挂断按钮，并在 script 中实现 hangUp 函数，用于停止本地流、清空远程视频、关闭 PeerConnection 并重置状态。