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内容
【WebRTC实例】 PeerJS 实现点对点聊天发起者
收到消息:{{ receiveVal }}
ReceiveMsg.vue 接收者代码示例
【WebRTC实例】 PeerJS 实现点对点聊天接收者
收到消息:{{ receiveVal }}
结果显示
将arraybuffer格式数据还原成图片的过程:
把arraybuffer格式 先转为二进制,再转成base64格式的图片
ArrayBuffer对象代表存储二进制数据的一段内存,不能直接读写,只能通过视图(TypedArray视图和DataView视图)来读写,视图的作用是以指定格式解读二进制数据。
new Uint8Array() 的返回值类型是 TypedArray,指的是一类指定元素类型的数组,而不是array的数组类型。
ArrayBuff 转 Base64 ,使用btoa() 方法用于创建一个 base-64 编码的字符串。该方法使用‘A-Z’,'a-z','0-9','+','/'和'=' 字符来编码字符串。
String.fromCharCode() 可接收一个指定的Unicode 值,然后返回一个字符串。
【WebRTC实例】 PeerJS 实现点对点聊天发起者
ReceiveMsg.vue 接收者代码示例
【WebRTC实例】 PeerJS 实现点对点聊天接收者
结果显示
发起者请求连接,接收者接收连接后,发送者上传一个png图片,接收者也能正常收到。
接收者上传png图片,发收者能正常接收到并显示。
到此这篇关于PeerJS实现实时在线消息发送的示例代码的文章就介绍到这了,更多相关PeerJS实时在线消息发送内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
本文地址: https://www.earthnavs.com/jishuwz/7d8c03e510c822bb1cc6.html
长江网(www.cjn.cn)成立于2002年8月,是国家重点地方新闻网,是武汉市唯一拥有国家Ⅰ类资质的新闻网,是武汉市唯一上榜《互联网新闻信息稿源单位名单》(白名单)的网站,拥有《互联网新闻信息服务许可证》、《网络文化经营许可证》、《互联网出版许可证》、《信息网络传播视听节目许可证》、《广播电影电视节目制作经营许可证》、《增值电信业务经营许可证》、《短消息类服务接入代码使用证书(电信网码号资源)》等权威资质。作为互联网舆论主阵地,目前,长江网全媒体矩阵包括:长江网(小程序、APP、PC端、WAP端)、长江时评;长江网人民号、新华号,长江网微信、微博、抖音号、头条号、视频号、B站等。同时,承担“学习强国”武汉学习平台、“武汉发布”平台、武汉市级新闻发布会、武汉城市留言板、武汉企业直通车、武汉市网络人士实践创新基地、“武汉人大”微信公众号、“武汉组工”微信公众号等党政平台运维工作。长江日报报业集团依托长江网成立武汉都市圈新闻中心,助力武汉发挥“一主引领”作用,为推进都市圈同城化发展提供强大舆论支持。























