Websocket & WebRTC 技术文档

Websocket

应用场景

• 服务器主动推送到客户端
• 双端通信
• 即时通讯

其他即时通讯的方法

1. 定期轮询
2. SSE（服务器推送事件，单向）
3. Comet 技术（长连接）

如何创建 WebSocket

WebSocket 的建立流程包括：

1. TCP 三次握手创建连接
2. 默认使用 HTTP 进行一次通信
3. 使用 HTTP 请求进行协议升级，创建 WebSocket 连接

WebSocket 的特点

• WebSocket 中所有发送的数据使用帧的形式发送。客户端发送的数据帧都要经过掩码处理，服务端发送的所有数据帧不能经过掩码处理。
• WebSocket 连接必须是一个直接连接。
• WebSocket 连接建立后，通信双方都可以在任何时刻向另一方发送数据。
• WebSocket 连接建立后，数据传输使用帧来传递，不再需要 Request 消息。
• WebSocket 的数据帧是有序的。

帧类型：

1. Opcode == 0 继续：
   表示此帧是一个继续帧，需要拼接在上一个收到的帧之后，来组成一个完整的消息。
2. Opcode == 1 文本帧：
   表示文本数据。
3. Opcode == 2 二进制帧：
   表示二进制数据。
4. Opcode == 8 关闭连接：
   发送此帧的一方表示关闭连接。
5. Opcode == 9 Ping：
   一方发送 Ping 帧，另一方应立即响应 Pong。
6. Opcode == 10 Pong：
   Pong 帧响应 Ping 请求。

WebSocket vs HTTP 协议

• HTTP 协议是半双工，WebSocket 是全双工。
• HTTP 协议是客户端主动发送请求，服务端响应；而 WebSocket 支持服务端主动推送信息给客户端。
• WebSocket 允许双向通信，不需要每次请求都重新建立连接。

WebSocket 的优缺点

优点：

• 跨域通信（CORS），使得不同域之间可以直接通讯。
• 跨平台兼容性，支持 Web 和移动设备。
• 低延迟，能够保持持久连接，适合高频交互。
• 异步任务处理，打破传统请求响应模式。

缺点：

• 可能存在隐私数据泄露问题。
• 客户端与服务端的加密和数据保护问题。

---

WebRTC

WebRTC 是什么

WebRTC（Web Real-Time Communication）是基于浏览器的实时通信技术，允许浏览器之间直接进行音频、视频以及数据的传输。

应用场景

• 私人会议系统
• 直播
• 视频通信、实时数据传输

WebRTC 的优缺点

优点：

• 无需安装软件，可以直接通过浏览器进行通信。
• 使用现代音频（Opus）和视频编解码器（VP8，H.264），提供高质量数据传输。
• 自动调整视频或音频质量，根据网络环境进行优化。
• 使用 TLS 和 SRTP 协议进行数据加密，保障连接安全。
• 开源软件，支持无限制控制接口，适合嵌入到 Web 应用中。

缺点：

• 需要视频会议服务器来混合多个音视频流。
• 解决方案之间缺乏兼容性，不同 WebRTC 应用之间可能无法互通。
• 必须购买订阅服务器进行音视频流的混合处理。

WebRTC 架构

点对点（P2P）

• 两个浏览器之间直接传送媒体内容。
• 优点：开发简单，成本低，安全性高。

多点控制单元（MCU）

• 多个用户发送数据流。架构对每个流进行解码、重新组合后再发送给用户。
• 优点：适合大型会议，确保每个参与者都能收到优化后的媒体流。

选择性转发单元（SFU）

• 媒体流先发送到集中式服务器，服务器转发给其他用户。
• 优点：高度可扩展，适合带宽条件差的网络环境。

WebRTC 端 API

• 使用前提：在安全源中访问

WebRTC 与 WebSocket 的区别

• 开发环境：WebSockets 支持 Java、JMS 和 C++，而 WebRTC 主要使用 Java 和 HTML。
• 安全性：WebRTC 提供更高的安全性。
• 浏览器支持：WebRTC 目前只支持部分浏览器，而 WebSockets 几乎所有主流浏览器都支持。
• 会话管理：WebSocket 每个会话都有一个服务端对应，而 WebRTC 则是点对点的连接。
• 传输类型：WebRTC 专为高性能的音视频传输设计，而 WebSocket 用于通用的数据传输。

---

前端开发工程化

目的

• 提高生产效率，解放开发人员。

前端开发内容：

• 处理静态资源和动态资源。
• 使用 JavaScript 实现前端业务逻辑。
• 编写 HTML 模板，生成动态页面。
• 使用 Node.js 实现中间层 Web 服务。
• 完成前端单元测试和项目部署。

前端项目结构

|-- undefined
    |-- .browserslistrc
    |-- .gitignore
    |-- babel.config.js
    |-- jsconfig.json
    |-- package-lock.json
    |-- package.json
    |-- README.md
    |-- vue.config.js
    |-- node_modules // 安装的依赖包
    |-- public // 公共静态资源
    |   |-- favicon.ico
    |   |-- index.html
    |   |-- robots.txt
    |   |-- img
    |-- src
        |-- App.vue // 顶层路由
        |-- main.js // Vue 入口
        |-- registerServiceWorker.js
        |-- assets // 静态资源
        |   |-- logo.png
        |-- components // 公共组件
        |   |-- Bottom.vue
        |   |-- Menu.vue
        |   |-- Top.vue
        |-- router // 路由配置
        |   |-- index.js
        |-- store // Vuex
        |   |-- index.js
        |-- views // 路由文件
            |-- AddTemplate.vue
            |-- HomeView.vue