首页 > 网络编程 > JavaScript > javascript技巧 > PeerJS实时在线消息发送

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

2025-07-17 10:15:36 作者：Mr.怪兽

PeerJS库是一个基于WebRTC的JavaScript库,简化了浏览器间P2P的数据和媒体连接,本文通过在线聊天和图片传输的代码示例展示了如何使用PeerJS进行点对点通信,感兴趣的可以了解一下

1.PeerJS介绍

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

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

2.PeerJS 基础用法

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

创建对等对象

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

var peer = new Peer();
peer.on('open', function(id) {
    console.log('My peer ID is: ' + id);
  });

Peer连接

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

peer.connect（id， [options]）

Peer调用

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

peer.call（id， stream， [options]）

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断开

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

peer.disconnect（）;

Peer重新连接

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

peer.reconnect（）;

Peer销毁

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

peer.destroy（）;

相关PeerJS介绍文档地址：https://www.npmjs.com/package/peerjs 和 https://peerjs.com。

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

3.安装依赖

npm i peerjs

4.在线聊天代码实现

SendMsg.vue 发起者代码示例

<template>
  <h1>【WebRTC实例】 PeerJS 实现点对点聊天发起者</h1>
  <div>
    <button @click="requestCallFn">请求连接</button>
  </div>
  <input type="text"
         @keyup="inputTxtFn">
  <button @click="sendFn">发送信息</button>
  <div>收到消息：{{ receiveVal }}</div>
</template>

<script setup>
import { ref } from 'vue'
import { Peer } from "peerjs";

var peer = new Peer() // peer对象
let peerId = null
let sendVal = ref('') // 输入文字框
let receiveVal = ref('') //接收信息

// 请求连接
const requestCallFn = () => {
  // 生成自己的id，给接收者连接自己的时候调用
  peer.on('open', id => {
    peerId = id
    console.log(id);
    console.log('请求连接，保存peerId在本地存储中', peerId);
    localStorage.setItem("peerId", peerId)
  })
}

// 监听被接收者连接事件
peer.on('connection', (connObj) => {
  console.log('被接收者连接：', connObj);
  // 保存接收方的id，给发送按钮使用
  localStorage.setItem("receiveId", connObj.peer)
  // 监听接收消息
  connObj.on('data', (data) => {
    // console.log('接收到接收方的消息：', data);
    receiveVal.value = data
  })
})

// 输入信息时监听
const inputTxtFn = (e) => {
  // console.log(e.target.value);
  sendVal.value = e.target.value
}

// 发送按钮
const sendFn = () => {
  // 获取接收方的id
  let receiveId = localStorage.getItem('receiveId')
  // 建立与对方的连接
  let connObj = peer.connect(receiveId)
  connObj.on('open', () => {
    // 发送给对方消息
    connObj.send(sendVal.value)
  })
}
</script>

<style>
</style>

ReceiveMsg.vue 接收者代码示例

<template>
  <h1>【WebRTC实例】 PeerJS 实现点对点聊天接收者</h1>
  <div>
    <button @click="replayCallFn">接收连接</button>
  </div>
  <input type="text"
         @keyup="replyTxtFn">
  <button @click="replyBtn">回复信息</button>
  <div>收到消息：{{ receiveVal }}</div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Peer } from "peerjs";


let peerObj = reactive({ obj: null })
let receiveVal = ref('') //接收信息


// 接通
const replayCallFn = () => {
  peerObj.obj = new Peer()
  peerObj.obj.on('open', () => {
    // 从本地存储中取得发送者的key
    let peerId = localStorage.getItem('peerId')
    console.log('获取到peerId', peerId);
    // 建立发送者的连接
    let conn = peerObj.obj.connect(peerId)
    // 把接收者的id发送回去
    conn.on('open', () => {
      conn.send('你好发送者，我是接收者，我收到了你的请求。')
    })
  })
  // 监听发送者的信息
  peerObj.obj.on('connection', function (conn) {
    conn.on('data', (data) => {
      // console.log('收到发送者的消息', data);
      receiveVal.value = data
    });
  })
}

// 输入文字框
let sendVal = ref('')
const replyTxtFn = (e) => {
  // console.log(e.target.value);
  sendVal.value = e.target.value
}

//回话
const replyBtn = () => {
  let peerId = localStorage.getItem('peerId')
  // 建立发送者的连接
  let conn = peerObj.obj.connect(peerId)
  // 发送信息
  conn.on('open', () => {
    conn.send(sendVal.value)
  })
}

</script>
 
<style>
</style>

结果显示

5.图片传输代码实现

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

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

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

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

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

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