聊天场景在web前端开发中 使用WebRTC搭建前端视频聊天室——点对点通信篇

聊天场景在web前端开发中 使用WebRTC搭建前端视频聊天室——点对点通信篇很多朋友对这方面很关心，我爱编程网整理了相关文章，供大家参考，一起来看一下吧！

做一个网页版的聊天系统需要用到哪些技术（文字消息，图片，文件，语音，语音通话，视频通话这样功能）？

一些小型的聊天系统，比如游戏页面转接给客服。
用不到 视频通话这种，甚至语言通话和视频通话都用不到。

大部分聊天页，都是文字消息和图片组成，语音视情况加吧。如果项目经营的不错，都会提加上视频上传功能，图片、视频上传涉及到oss上传。接收和发送消息(包括掉线和分配用户)都涉及到websocket，客服端涉及角标(提示通知，由前端负责) 用户端需要考虑到不同机型适配，video标签千奇百怪的坑。推荐如果是某个应用使用，作为他的子页面开发。如果多端应用它(聊天页)，用UNi写，vue2和vue3写起来有些吃力，可能是我太菜了，但Uni写的确有不少自带的方法，可以提供帮助。

使用WebRTC搭建前端视频聊天室——点对点通信篇

WebRTC给我们带来了浏览器中的视频、音频聊天体验。但个人认为，它最实用的特性莫过于DataChannel——在浏览器之间建立一个点对点的数据通道。在DataChannel之前，浏览器到浏览器的数据传递通常是这样一个流程：浏览器1发送数据给服务器，服务器处理，服务器再转发给浏览器2。这三个过程都会带来相应的消耗，占用服务器带宽不说，还减缓了消息从发送到接收的时间。其实最理想的方式就是浏览器1直接与浏览2进行通信，服务器不需要参与其中。WebRTC DataChannel就提供了这样一种方式。

如果对WebRTC和DataChannel不太了解的同学，可以先阅读如下文章：

- WebRTC的RTCDataChannel

- 使用WebRTC搭建前端视频聊天室——信令篇

- 使用WebRTC搭建前端视频聊天室——入门篇

当然服务器完全不参与其中，显然是不可能的，用户需要通过服务器上存储的信息，才能确定需要和谁建立连接。这里通过一个故事来讲述建立连接的过程：

不如钓鱼去

一些背景：

现在，老刘听说老姚钓鱼技术高超，想和老姚讨论钓鱼技巧。只要老刘和老姚相互之间知道对方的门牌号以及凭证，就可以串门了:

老刘和老姚相互之间知道了对方的门牌号和小区出入凭证，他们相互之间有什么需要交流的直接串门就行了，消息不再需要门卫老大爷来代为传达了

换个角度

我们把角色做一个映射：

于是乎故事就变成了这样：

这样，就建立了一个点对点的信道，流程如下所示：

故事

老刘和老姚已经可以相互串门了，经过一段时间的交流感情越来越深。老姚的亲友送了20斤葡萄给老姚，老姚决定送10斤给老刘。老姚毕竟年事已高，不可能一次带10斤。于是乎，老姚将葡萄分成了10份，每次去老刘家串门就送一份过去。

这里可以做如下类比：

这其实就是通过datachannel传输文件的方式，首先将文件分片，然后逐个发送，最后再统一的进行组合成一个新的文件

分片

通过HTML5的File API可以将type为file的input选中的文件读取出来，并转换成data url字符串。这也就为我们提供了很方便的分片方式：

组合

通过datachannel发送的分片数据，我们需要将其进行组合，由于是data url字符串，在接收到所有包之后进行拼接就可以了。拼接完成后就得到了一个文件完整的data url字符串，那么我们如何将这个字符串转换成文件呢？

方案一：直接跳转下载

既然是个dataurl，我们直接将其赋值给window.location.href自然可以下载，但是这样下载是没法设定下载后的文件名的，这想一想都蛋疼

方案二：通过a标签下载

这个原理和跳转下载类似，都是使用dataurl本身的特性，通过创建一个a标签，将dataurl字符串赋值给href属性，然后使用download确定下载后的文件名，就可以完成下载了。但是很快又有新问题了，稍微大一点的文件下载的时候页面崩溃了。这是因为dataurl有大小限制

方案三：blob

其实可以通过给a标签创建blob url的方式来进行下载，这个没有大小限制。但是我们手上是dataurl，所以需要先进行转换：

获得blob后，我们就可以通过URL API来下载了：

这里有几个点：

1. datachannel其实是可以直接传送blob的，但是只有ff支持，所以传data url

2. chrome下载是直接触发的，不会进行询问，firefox会先询问后下载，在询问过程中如果执行了revokeObjectURL，下载就会取消，囧

升级

如我们所知，WebRTC最有特点的地方其实是可以传输getUserMedia获得的视频、音频流，来实现视频聊天。但事实上我们的使用习惯来看，一般人不会一开始就打开视频聊天，而且视频聊天时很消耗内存的（32位机上一个连接至少20M左右好像，也有可能有出入）。所以常见的需求是，先建立一个包含datachannel的连接用于传输数据，然后在需要时升级成可以传输视频、音频。

看看我们之前传输的session description，它其实来自Session Description Protocol。可以看到wiki上的介绍：

这意味着什么呢？我们之前建立datachannel是没有加视频、音频流的，而这个流的描述是写在SDP里面的。现在我们需要传输视频、音频，就需要添加这些描述。所以就得重新获得SDP，然后构建offer和answer再传输一次。传输的流程和之前一样，没什么区别。但这一次，我们不需要传输任何的ice candidate，这里我曾经遇到了坑，经过国外大大的点拨才明白过来。

Peertc

我将datachannel和websocket组合，实现了一个构建点对点连接的库Peertc，它提供非常简洁的方式来建立连接和发送数据、文件和视频/音频流，详情见github。走过路过的记得star一下哦，有什么bug也非常希望能够提出来。

最后 我爱编程网

WebRTC的点对点方式能够运用在很多场景：

- 如web qq这种Web IM工具，这就不说了

- 如象棋这种双人对战 游戏 ，每一步的数据服务器时不关心的，所以完全可以点对点发送

- 一对一在线面试、在线教育，这其实是即时通信的一个业务方向

javaweb实现网页聊天怎么样？

Java Web 实现网页聊天可以分为以下几个步骤：

1. 前端页面设计：设计网页聊天室 UI 界面，包括聊天消息显示、输入框、发送按钮等。

2. 后端实现：采用 Java Web 框架，如 Spring、Spring MVC、Spring Boot，搭建后台服务器，接收前端的消息，处理和存储聊天记录数据，并将聊天记录发送给前端。

3. Ajax 实现前后端交互：使用 Ajax 技术实现前端页面和服务器之间的实时数据传输。

4. WebSocket 实现实时通信：使用 WebSocket 协议，建立客户端和服务器之间的连接，实现即时消息通信，并提供在线状态检测功能。

5. 聊天记录存储：使用数据库技术，如 MySQL、Oracle 等，存储聊天记录数据，并实现聊天记录的查看和搜索功能。

需要注意的是，Java Web 实现网页聊天需要考虑消息的加密和用户身份验证等安全问题，并使用线程池等技术优化服务器性能，提高聊天室的并发能力。

综上所述，Java Web 实现网页聊天比较复杂，需要前、后端技术的综合运用。但是，Java Web 框架提供了很多优秀的工具和解决方案，减轻了开发人员的工作负担，同时 Java 语言本身也具有跨平台、高效稳定等优点，适合开发服务器端应用。

以上就是我爱编程网为大家带来的聊天场景在web前端开发中 使用WebRTC搭建前端视频聊天室——点对点通信篇，希望能帮助到大家！