PeerJS实现实时在线消息发送的示例代码_javascript技巧

PeerJS 是一个基于浏览器WebRTC功能实现的js功能包，提供丰富的、易用的并且可以配置的P2P连接API，借助PeerJS可以实现一端通过知道另一端的ID进行连接，ID可以自行设置也可以服务器随机分配，并且建立Data或Media连接，实现data数据或者Media传输功能。

PeerJS开源项目简化了WebrRTC的开发过程，对底层的细节做了封装，直接调用API即可。

PeerJS的核心对象是Peer，有以下常用的方法：

Peer 对象是我们创建和接收连接的地方，每个 Peer 对象在创建时都会被分配一个随机的唯一 ID。

连接到指定的远程peer并返回数据连接。

调用指定的远程Peer并返回媒体连接。

为Peer事件设置侦听器。

peer.on（event， callback）;​peer.on（'open'， function（id） { ... }）; //打开事件peer.on（'connection'， function（dataConnection） { ... }）;//连接事件peer.on（'call'， function（mediaConnection） { ... }）; //呼叫事件peer.on（'data'， function（data） { ... }）; //传输消息事件peer.on（'close'， function（） { ... }）; //关闭事件peer.on（'disconnected'， function（） { ... }）;//断开连接事件peer.on（'error'， function（err） { ... }）; //错误事件

关闭与服务器的连接，保持所有现有数据和媒体连接不变。

尝试使用另一方Peer的旧 ID 重新连接到服务器。只有才能重新连接。

关闭与服务器的连接并终止所有现有连接。peer.destroy.将设置为 。true

peer.destroy（）;

相关PeerJS介绍文档地址： 和 。

可以参考API手册了解更多以及详细PeerJS内容

​​

ReceiveMsg.vue 接收者代码示例

​

结果显示

将arraybuffer格式数据还原成图片的过程：

把arraybuffer格式 先转为二进制，再转成base64格式的图片

ArrayBuffer对象代表存储二进制数据的一段内存，不能直接读写，只能通过视图（TypedArray视图和DataView视图）来读写，视图的作用是以指定格式解读二进制数据。

new Uint8Array() 的返回值类型是 TypedArray，指的是一类指定元素类型的数组，而不是array的数组类型。

ArrayBuff 转 Base64 ，使用btoa() 方法用于创建一个 base-64 编码的字符串。该方法使用‘A-Z’,'a-z','0-9','+','/'和'=' 字符来编码字符串。

String.fromCharCode() 可接收一个指定的Unicode 值，然后返回一个字符串。

​​

ReceiveMsg.vue 接收者代码示例

​​

结果显示

发起者请求连接，接收者接收连接后，发送者上传一个png图片，接收者也能正常收到。

接收者上传png图片，发收者能正常接收到并显示。

到此这篇关于PeerJS实现实时在线消息发送的示例代码的文章就介绍到这了,更多相关PeerJS实时在线消息发送内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

上一篇：Vue3前端项目实现动态显示当前系统时间详解

下一篇：JS中空值合并运算符 ?? 的使用javascript